How we improved our mobile Lighthouse Score from 60 to 95
Boost your website performance with these tested methods.
In my last company, we refactored our old chunky tightly coupled CMS to Jamstack, a decoupled list of services to improve the Content Management experience. This journey has made our website rank in the google search results within the Top 5 under its domain/category.
In this journey, we researched and picked the best tools and methods periodically to improve our web page experience by measuring our success with Lighthouse Score
Note: Lighthouse is a tool from chrome browser, which runs multiple tests against your website and reports the scores in different categories.
Lighthouse score split, before we dive into achieving more score. Let's understand how lighthouse scores are calculated and how scores are weighted across different metric
This is how the lighthouse score weights are distributed into these metrics. Learn in detail about these metrics it pays well
So here is a list of initiatives we have done that resulted in positive results in the Lighthouse score. I will also mention which metrics are influenced by the implementation
SSR or SSG
This will be the most rewarding step, which yields a huge jump in your lighthouse score. Also, it is not an optional step if you have written your website using libraries like React, Vue or Angular, etc.
Single Page application builds the content of the page once after its initialized which takes quite a time after the page is loaded in the browser. so it will render the initial blank screen with no content and then paints the whole screen. Google SEO will punish your website for no content.
Most of the modern libraries have Server-Side Rendering support. It will matter of days to set up and run your server with minimal or no cost.
SSG is similar to SSR but it pre-rendered all the pages and routes to static files during the build time and it is served when the client requests. It is much faster compared to SSR since there are no API calls are made during the client request. To know more about detailed comparison read it in SSR vs SSG
Metrics: First contentful paint, Speed Index as your DOM is rendered without waiting for the library to paint the content.
Image Compression, Accessibility
A high-quality image on your web page has a severe impact on the client-side. If the image is not optimized for mobile, the user will leave the site as it takes more time to load the image. You can use some skeleton or loading animation to inform the user, it will be a temporary fix but still, result in a poor lighthouse score.
There are multiple services that can provide multiple versions of your image in varying quality and sizes. (Contentful image optimization)
- Webp : Convert your image to webp, which is superior in both lossy and lossless compression, smaller size compared to PNG
2. Responsive Image: Use image tag with srcset and sizes attributes that have been recently added to support responsive images. If you have the same image for mobile resolution add it and the browser automatically picks the best version.
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">3. Image Blur: Using a blurred image as a replacement till the original image is loaded is a technique used initially in Facebook. (Link to original article https://engineering.fb.com/2015/08/06/android/the-technology-behind-preview-photos/). Generate low-quality images during the build time and make sure your app uses them during the initial load.
<image src="blurred.jpg">
<image src="original.jpg" style="display: none">// JS
imageTagRef.onload(() => {
imageTagRef.style = "display: inline";
// Code to hide the blurred image.
})
4: Size matters: Defining the size of your image will have an impact on layout resizing. So try to define the section width and height measurement upfront so that image just can fill the space.
4. Alternate text: Alternate text for images improves the accessibility score for your site. Think beyond the score, your content can reach a wider audience with a small step, as content should be accessible to all people and it is a basic right.
If you want to know more about accessibility and steps to implement in your websites feel free Subscribe or post comments below this article.
Metrics: Cumulative Layout Shift, Largest Contentful Paint will push score much higher, these metrics have more weight in score distribution.
Script Loading
Script loading order will be the simplest implementation in terms of code.
<script defer src="react.js"></script>
<script defer src="my-library.js"></script>defer vs async
defer loads your script asynchronsously but executed only after document parsing is completed
async loads your scripy asynchronsously and it executes immedieately.
Both attributes on the script tag have similar functionality except the first one has a major role in the lighthouse score.
Short explanation use defer it will improve the First contentful paint. There have been multiple techniques that have been mentioned here.
One common thing we did along with deferring our scripts is also deferring third-party scripts such as Google Tag. Because apart from your framework, it is common for all tech to use Google analytics along with multiple third-party libraries to track and measure the website performance and user discovery. These scripts sometimes act on the DOM and interfere with further layout changes.
Metrics: First contentful paint, Cumulative Layout Shift.
Preload Styles
Stylesheet determines the layout measurement for each section. If your styles are loaded even before the DOM is parsed, the styles are applied during the DOM parsing phase(detail article).
<link rel="preload" href="my-styles.css">Metrics: Cumulative Layout Shift.
Webcomponents
The reason I have added this initiative as the last one is because this is an opinionated one and probably you really don't need this and might be overkill for your tech stack. But if you have proper resources and long-term strategy for your CMS then it would be the right bet.
Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.
I have explained how Webcomponents work under the hood in my previous article. I won't be explaining the pros and cons here, we have seen an opportunity and after much trials and iteration, we have seen pages rendered using webcompoents for CMS have significantly higher scores compared to React or any js frameworks.
The next question that pops out is about the developer's productivity and learning curve in webcomponents, you don't have to rely on native API, there are frameworks like Stenciljs, Svelte to solve this problem, and has a good developer ecosystem around it.
Conclusion
I would highly recommend starting with the easiest initiatives and measuring your lighthouse score. It’s a lean strategy to convince your peer or manager to pitch the other initiatives.
There are a few methods I haven't mentioned here, which didn't yield any improvement, some resulted in negative scores, if you want to know more about it please leave a comment, I will write a detailed cover in my next article.
