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
  • For a long time, I have been thinking about how to increase brand presence, as well as users for the blog. After much contemplation, it seems the only way is to share on social media or hope they seek it out, until...

    Wearing this shirt means no more worries about traffic jams, the more crowded it gets, the more fun it is because hundreds of eyes are watching 🤓

    (It really works, you know 🤭)

    » Read more
  • A cycle of developing many projects is quite interesting. Summarized in 3 steps: See something complex -> Simplify it -> Add features until it becomes complex again... -> Back to a new loop.

    Why is that? Let me give you 2 examples to illustrate.

    Markdown was created with the aim of producing a plain text format that is "easy to write, easy to read, and easy to convert into something like HTML." At that time, no one had the patience to sit and write while also adding formatting for how the text displayed on the web. Yet now, people are "stuffing" or creating variations based on markdown to add so many new formats that… they can’t even remember all the syntax.

    React is also an example. Since the time of PHP, there has been a desire to create something that clearly separates the user interface from the core logic processing of applications into two distinct parts for better readability and writing. The result is that UI/UX libraries have developed very robustly, providing excellent user interaction, while the application logic resides on a separate server. The duo of Front-end and Back-end emerged from this, with the indispensable REST API waiter. Yet now, React doesn’t look much different from PHP, leading to Vue, Svelte... all converging back to a single point.

    However, the loop is not bad; on the contrary, this loop is more about evolution than "regression." Sometimes, it creates something good from something old, and people rely on that goodness to continue the loop. In other words, it’s about distilling the essence little by little 😁

    » Read more
  • Alongside the official projects, I occasionally see "side" projects aimed at optimizing or improving the language in some aspects. For example, nature-lang/nature is a project focused on enhancing Go, introducing some changes to make using Go more user-friendly.

    Looking back, it resembles JavaScript quite a bit 😆

    » 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

5 profound lessons

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? Click now!

Every product comes with stories. The success of others is an inspiration for many to follow. 5 lessons learned have changed me forever. How about you? 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...