Does your website load fast? A slow loading website can make a user decide to go somewhere else. Speed is important because slow websites can lose money and users. No one wants to wait until your website loads.
Why is your site slow?
Many factors could be slowing your site down. The common ones are:
When you get a report from these tools, you’ll see many metrics. Focus on these three metrics: Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Google calls them Core Web Vitals. Core Web Vitals measure the user experience — loading, interactivity and visual stability.
5 Website speed optimization tips to start with
What do you fix first? It depends. You’ll need to decide what affects the users the most.
1. Large image sizes
Large image sizes can drag down your website’s loading time. You can use a Website Image Analysis Tool to decide which images to handle first. Tools like ImageOptim can help to optimize your images for the web.
2. Large CSS files
CSS files get large over time. They can include leftover unused selectors, workarounds and duplicated code. To fix these problems, you need to refactor your CSS. Refactoring CSS is not an easy task but necessary one. Use this guide on how to refactor CSS without creating new problems.
4. Old legacy code
Code can get old and not for the better. Is your code using old code that has been depreciated? Look at your code to see if you can remove it. Or refactor it and make it better.
Are you using plugins that you no longer need or have newer versions? Make sure your plugins or widgets aren’t slowing your site down.
5. Server issues
Is you website still slow after fixing other web performance issues? If yes, then you need to look at your hosting server. Are you using a server that fits you needs? You may need to consider moving to a new host or paying a bit more for a premium service.
Semantic HTML is using specific tags when writing HTML. These tags convey meaning about their intended purpose. Both humans and computers can understand the meaning of your code when you use them. Browsers, search engines and assistive technologies use these tags to create a better user experience.
Why should I use it?
It makes your code easy to read. You’ll be able to scan quickly through the code to understand how it is structured. Semantic tags also make it faster to write code. You don’t have as many decisions to make when you use the semantic tags.
How to get started?
HTML5 introduced new tags – semantic tags. Tags like <header>, <main> and <footer>. With these tags, you create a web page structure that is readable to both search engines and people.
Your main content lives inside <main>. You can use tags like <p> and heading tags like <h1> to provide some structure. To provide further meaning to the content, use tags like <article> and <section>. The <article> tag contains content that can be removed and put on another page. You can use the <section> tag when you need to wrap groups of related content. Use the HTML semantics cheat sheet to learn when to use which tags for the right job.
What about the <div> tag?
HTML has non-semantic tags like <div>. Its generic nature allows you to define its purpose through code. You can use the <div> and <span> tags in your code. Use them to group elements that don’t have any specific meaning. When you need more specific meaning, choose semantic tags over non-semantic ones.
Everyone can feel tired, bored or exhausted from doing work. Why? Too busy. Your tasks are repetitive and unchallenging. Or you deal with people who drain you. You need to focus on things that you can control to help deal with developer burnout.
Here’s a list of things to try:
Take a day off and do nothing. Relax, sleep or go somewhere different.
Change your sleep routine. It may need a bit of tweaking. You may need to change your nightly routine.
Break a habit or pattern. Take a different route to work. Eat at a new place for lunch.
Whether you are a beginner or experienced programmer, programming keeps changing. You have to keep up with the changes. How do improve your coding skills?
Most people learn by doing. You get better by writing code and sharing what you learn. Or getting involved with the programming community. To keep improving your coding skills, use the following tips:
1. Write code every day
Write code. Experiment with new ideas. Learn how others write code through copy work. It is the process of recreating an existing work as closely as possible. Writers and painters use this technique to improve their skills.
2. Read books
Why read books? Programming books can explore a topic more deeply than an online tutorial. They show you code in detail. You can reread it and gain new insights.
You can find podcasts on any topic. Pick from coding to tech news. Find one or more to get tips, tricks or updates on new technology. Don’t know where to start? Try FreeCodeCamp’s list of best tech podcasts for software developers.
5. Take a class
Pick a class to learn more about a programming topic or to pick up a specific skill. Get started with sites like Treehouse or FreeCodeCamp.
A quiz topic. I love to eat chocolate. Chocolate is a fun quiz topic. I compiled a list of questions on chocolate.
I wanted to use FlexBox for the layout. Plus a counter that shows you what question you are on. I included a photo of chocolate as well.
Building the app
The structure for a quiz is simple. It should display a question, a list of answers and track the number of questions that you get right. Then, it shows you summary of how well you did at the end. Plus, it should give you the option to try again.
I started with a simple quiz tutorial and modified it. First, I edited the code to include my questions on chocolate. Then, I looked at a quiz example with a timer and modified my code to add question counter.
Finally, I updated the code to include the chocolate photo into the results. It required adding one line of code.
I wanted to add a sticky footer to the bottom of the web app. The web page uses FlexBox. I need to modify the layout to create the footer using FlexBox. CSS-Tricks’ FlexBox option fit well with the app design.
I wanted to use a gradient for the background. You can either use a CSS gradient generator to create it. Or use one created by designers. Gradient Hunt lets you choose from a selection of pre-made gradients.
What to do differently
A quiz on chocolate needs more photos of it. The design would need to show more chocolate as you move through the quiz. Next, I would like to show chocolate facts with each question. Each question has to have four answers; no true or false. I would change it so I can add true or false questions.
If you like chocolate and want to take a quiz, try out this Chocolate Quiz.