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

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

Daily short news for you
  • Manus has officially opened its doors to all users. For those who don't know, this is a reporting tool (making waves) similar to OpenAI's Deep Research. Each day, you get 300 free Credits for research. Each research session consumes Credits depending on the complexity of the request. Oh, and they seem to have a program giving away free Credits. I personally saw 2000 when I logged in.

    I tried it out and compared it with the same command I used before on Deep Research, and the content was completely different. Manus reports more like writing essays compared to OpenAI, which uses bullet points and tables.

    Oh, after signing up, you have to enter your phone number for verification; if there's an error, just wait until the next day and try again.

    » Read more
  • I just found a quite interesting website talking about the memorable milestones in the history of the global Internet: Internet Artifacts

    Just from 1977 - when the Internet was still in the lab - look how much the Internet has developed now 🫣

    » Read more
  • Just thinking that a server "hiding" behind Cloudflare is safe, but that’s not necessarily true; nothing is absolutely safe in this Internet world. I invite you to read the article CloudFlair: Bypassing Cloudflare using Internet-wide scan data to see how the author discovered the IP address of the server that used Cloudflare.

    It's quite impressive, really; no matter what, there will always be those who strive for security and, conversely, those who specialize in exploiting vulnerabilities and... blogging 🤓

    » Read more

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.

Accessing Lighthouse

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.

Lighthouse Score for 2coffee.dev

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.

Minimize main-thread work on 2coffee.dev

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.

CSS Grid Layout browser support

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.

Premium
Hello

The secret stack of Blog

As a developer, are you curious about the technology secrets or the technical debts of this blog? All secrets will be revealed in the article below. What are you waiting for, click now!

As a developer, are you curious about the technology secrets or the technical debts of this blog? All secrets will be revealed in the article below. What are you waiting for, click now!

View all

Subscribe to receive new article notifications

or
* The summary newsletter is sent every 1-2 weeks, cancel anytime.

Comments (0)

Leave a comment...