How I Improved Lighthouse Score for My Blog by Increasing CLS Score?

The Problem

One of the top concerns I have when working on my blog is its SEO capability. Honestly, before getting started, I did a lot of research on how to improve the visibility of my website when users search on Google. Through many articles and SEO guides, I came across Google's Lighthouse scoring tool.

So, I always want to boost my Lighthouse score as high as possible. Although Google does not clearly state how the Lighthouse score affects SEO, they have hinted that Google really "likes" high-scoring websites. Like a filtering process, the higher the score, the more attention your website gets, and the easier it is to reach the top.

In the past, when measuring my blog's score, I faced many performance issues. Now, many criteria have been improved, but there is one problem that gave me a headache - the CLS score, which indirectly led to the issue of main-thread work being blocked (Minimize main-thread work). It took me a lot of time to find a solution to improve the CLS score and the main-thread processing time.

What is Lighthouse?

Lighthouse is an open-source tool for improving the quality of web pages. You can run it on any web page. It can assess performance, accessibility, PWA application evaluation, SEO, etc.

In recent years, Google has focused much more on high-quality content and user experience on web pages. They constantly change search algorithms to provide the most benefits to users. Previously, many websites used SEO techniques by adding a lot of irrelevant tags, keywords, etc. to attract Google's attention. But now, that no longer works. In fact, intentionally doing so can harm your website's SEO. Even more, most of the traffic to my website comes from Google search, without any ads or marketing campaigns.

Using Lighthouse is quite simple. It is integrated into the Chrome browser, so you can use it right away. Just access the web page you want to measure, open Dev Tools (F12), and click on the Lighthouse tab to access the tool.

You can also use Lighthouse through CLI or even integrate it into CI/CD deployment. Lighthouse provides various usage methods for different purposes.

Below is my Lighthouse score, which includes suggestions and issues that the tool provides for you to fix. If you meet all the criteria, your website is considered to have a "good" user experience and is favored by Google in search results.

If you still doubt it, the evidence is the traffic to my website, which mostly comes from Google search. I don't run any ads or marketing campaigns.

Setting aside the score issue, I used to receive low scores for CLS and "Minimize main-thread work." If you are not familiar with CLS, you can read my article I Just Removed a Markdown Service from My API. After analyzing the issue, I found that the "Minimize main-thread work" (referring to the web page taking too much time to process the main thread, which can cause lag or unresponsiveness for users) was taking a considerable amount of time. At that time, the time for the Style & Layout section always reached around 2000ms.

Digging deeper into the problem, it seemed that the culprit was the CSS code responsible for the layout of the web page (CSS grid). I was using Bootstrap CSS grid for responsiveness. Basically, it works by dividing the layout into percentage ratios. To give you an idea, here is an example:

  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

When using percentages, the browser needs to perform many calculations for rendering. That caused the Style & Layout to take a lot of time.

After identifying the issue, I needed a solution to improve CLS and reduce the rendering time.

Using CSS Grid Layout to Increase CLS Score and Minimize Main-Thread Work

CSS Grid Layout is an advanced solution for dividing web pages into defined regions or defining relationships in terms of size, position, and layering between parts made from HTML.

CSS Grid Layout is relatively new but is supported by most of the latest browsers. It provides a fast and powerful way to create web layouts.

After referring to some sources on how to use and switch to CSS Grid Layout instead of Bootstrap CSS Grid, I created my own layout CSS file. One part of it looks like this:

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 24px;
}

.col-sm-12 {
  grid-column: span 12;
}

.col-sm-11 {
  grid-column: span 11;
}

.col-sm-10 {
  grid-column: span 10;
}

.col-sm-9 {
  grid-column: span 9;
}

.col-sm-8 {
  grid-column: span 8;
}

.col-sm-7 {
  grid-column: span 7;
}

.col-sm-6 {
  grid-column: span 6;
}

.col-sm-5 {
  grid-column: span 5;
}

.col-sm-4 {
  grid-column: span 4;
}

.col-sm-3 {
  grid-column: span 3;
}

.col-sm-2 {
  grid-column: span 2;
}

.col-sm-1 {
  grid-column: span 1;
}

Then, I can use a layout syntax similar to Bootstrap:

<div class="row">
  <div class="col-sm-6">
    ....  
  </div>

  <div class="col-sm-6">
    ....  
  </div>
</div>

After redesigning my website's layout using the CSS Grid Layout, my Lighthouse score has significantly improved. The CLS score is consistently around 0.001, and the time for Style & Layout has reduced by one-third.

Conclusion

Lighthouse is a Google's open-source tool for "scoring" your website based on various criteria. Although the score is only a reference measurement, and true quality lies in the content, having both quality and a high score wouldn't hurt. Moreover, achieving a high score will prioritize your website in Google's search results.

After spending a lot of time researching the CLS and Style & Layout issues, I discovered the method of restructuring the website using CSS Grid Layout. As a result, I improved many scores.