SEO 102: One Step Forward

I work at adsby as a Junior Front-end Developer. Thanks to my job, I need to know a bit about SEO, which is important for being found on search engines. Even if you create the perfect product that fits the market, it's all for nothing if your potential customers can't find your website. That's why being properly indexed is just as important as building a well-developed website.

If you're new to this concept, there's no shame in it. There's another post on Indie Hackers that is beginner-friendly..

Now, let's get started. I assume you know the basics that I mentioned earlier.

As a Frontend Developer, I need to focus on site performance as much as UI&UX. The reason is simple: reducing the bounce rate. Wait, bounce what? Yes, bounce rate. Bounce rate refers to when a visitor comes to your website and then leaves without interacting with other pages. It's an important metric because search engines like Google analyze your website based on several factors, and one of them is bounce rate. Before you ask, let me explain what bounce rate means to search engines: it helps determine if your website is relevant. But relevant to whom? To your visitors, who could be your potential customers.

Now we understand why we need to improve website performance. It's time to discuss how. It's natural to wonder about how to do this. There are various tools available to help you analyze your website's performance and provide insights on what needs improvement. One of the most populer tool is Google Page Speed Tool. With this tool, you can check your website's performance separately for mobile and desktop.

You'll see some headings in the picture above. We'll go through each of them in the following sections. All of these headings have the same purpose: they aim to direct your attention to the right areas for improving your website. Let's examine each of them separately.

Largest Contentful Paint (LCP)

This metric is about load speed. If your LCP score is low, visitors quickly understand that your website is responsive. To be more specific, LCP measures the render time of the largest image or text block from the moment a user navigates to the page.

What is a good LCP score?

For a good user experience, the LCP score must be 2.5 seconds or less. Scores between 2.5 and 4.0 seconds need improvement, and scores greater than 4.0 seconds are considered poor. You should focus on optimizing images and video tags. Most of the time, resizing images can help improve your LCP score.

First Contentful Paint (FCP)

FCP (First Contentful Paint) measures the time from when a user first navigates to the page to when any part of the page's content is rendered on the screen. To learn how to improve FCP for a specific site, you can run a Lighthouse performance audit and pay attention to any specific opportunities or diagnostics that the audit suggests. To improve FCP for any site, there are some common areas to check. These include eliminating render-blocking resources, minifying CSS, removing unused CSS, removing unused JavaScript, preconnecting to required origins, reducing server response times (TTFB), avoiding multiple page redirects, preloading key requests, and more.

What is a good FCP score?

Websites should have an FCP of 1.8 seconds or less. Scores between 1.8 and 3.0 seconds need improvement, and scores greater than 3.0 seconds are considered poor.

First Input Delay (FID)

First impressions are lasting impressions. Most people understand the meaning of this phrase. When we meet someone new, we often form opinions based on that first impression. The same concept applies when visitors open a new webpage. A good impression can make visitors loyal to your website, while a bad one can drive them away for good. The question is, what makes a good impression?

FID measures the time from a user's first interaction with your website.

What is a good FID score?

A good FID score is 100 ms or less. Scores between 100 ms and 300 ms need improvement, and scores higher than 300 ms are considered poor.

Interaction to Next Paint (INP)

This metric is about user interactions. For example, when a user clicks somewhere and gets a response quickly. Good responsiveness means a page responds quickly to interactions. Sometimes, users interact with complex sections, which might take longer to process. In cases like this, it's important to show a loading indicator, so users understand that something is happening and they just need to wait.

What is a good INP?

An INP of 200 milliseconds or less indicates good responsiveness. An INP between 200 and 500 milliseconds suggests your page's responsiveness needs improvement. An INP greater than 500 milliseconds indicates poor responsiveness.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) helps quantify how often users experience unexpected layout shifts. These unexpected shifts can negatively affect user experience. For example, imagine you have a form with just one input field and a button. When the user fills out the input field and clicks the button, BUM, the layout shifts, and the user can't see what was there before, with no way to go back. In a situation like this, the user is left confused about what to do next. It's a bad user experience.

General Tips:
*Make sure your website has a robots.txt file and a sitemap.

• Go to the Google Page Speed Tool, enter your website's URL, and run an analysis.
• Check your website's performance separately for web and mobile.
• The Page Speed Tool usually explains where you can optimize your website. Follow the tool's suggestions for improvements.
• Make sure your image format is .webp and their file sizes are not too high.
• Ensure your website has a responsive design.
• Avoid unexpected layout shifts.
• There are tools to compress image file sizes. If needed, you can use them.

Conclusion

Without SEO, website development cannot be complete. If you're new to this, you might want to check out my SEO-101 blog. I explain how to analyze your website and improve its performance. Performance is key to SEO. Thus, the sky is the limit when it comes to improvements. Every day, you can find something new to improve about your website. Take a breath, analyze, and then make changes. Don't forget that "content is king."