DEV Community

Cover image for 5 Tips to Take your Website Lighthouse Score from Meh to WOW!
Tapajyoti Bose
Tapajyoti Bose

Posted on • Updated on

5 Tips to Take your Website Lighthouse Score from Meh to WOW!

When creating a website for Production, you would want the world to have a great experience using it. One of the best tools for this purpose is the Lighthouse, a Chrome Dev-tool that analyses how various your site fares on different metrics.

Sadly, pushing for a perfect Lighthouse score isn't easy. While creating my portfolio website, I started off with the following score:

Initial Lighthouse Score

But after following a few simple steps, I managed to take the score in each category to 90+

Current Lighthouse Score

1. Use Responsive Images & Art Direction

The most often way to use images is to use:

<img src="link-to-image">
Enter fullscreen mode Exit fullscreen mode

But there is are far more optimized methods to use images:

<!-- Responsive images -->
<img
    srcSet="link-to-img 480w, link-to-img@2x 720w, link-to-img@3x 960w"
    sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
    src="imgUrl@3x"
>

<!-- Art Direction -->
<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>
Enter fullscreen mode Exit fullscreen mode

Using these methods allows browsers to load up the images that are the most appropriate for the size of the screen you are using, often saving it from downloading a huge amount of data unnecessarily.

To learn more about Responsive Images and Art Direction, check out the MDN Docs

2. Use Server Side Rendering and Lazy Loading

My portfolio was initially made with React (bootstrapped with create-react-app), but since vanilla React is computed on Client-side, it hampers both Performance and SEO. Re-writing the entire website in Next.js provided some serious improvement to the Lighthouse Score.

Another important concept is Lazy Loading. It is the style of programming that defers the loading of resources till they are required. This provides huge gains in performance during the initial load of the website. It's very easy to implement Lazy Loading in React based applications:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function Component() {
  return (
    <div>
      <Suspense
          // fallback will be displayed while the lazy component loads
          fallback={<div>Loading...</div>}
      >
        <LazyComponent />
      </Suspense>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

3. Minify your resources

It is always a good idea to minify the JavaScript and CSS in the production environment. It drastically reduces the size of the items to be loaded and also gets rid of unused code.

Webpack is a great tool for this purpose. It minimizes JavaScript by default in the Production environment. For other resources, like CSS, you can use additional plugins like the css-minimizer-webpack-plugin.

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

Enter fullscreen mode Exit fullscreen mode

To learn more about Webpack, checkout this article

4. Use Compressed images

The next-gen image formats such as WebP can provide far better compression than a PNG or JPEG. This in turn means faster downloads, less data consumption, and therefore, an overall faster site.

WebP vs JPEG

You can also go with vector graphics format such as SVG instead of the commonly use raster graphics which too help tremendously in the domain of performance gains.

5. Use alt, aria-label, and aria-labelledby

These tags help you improve the Website's Accessibility.

  1. alt: The alt attribute is the HTML attribute used in HTML documents to specify alternative text that is to be rendered when the element (generally images) to which it is applied cannot be rendered.

    <img src="link-to-img" alt="image-description">
    
  2. aria-label: The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen.

    <button aria-label="Close" onclick="dialog.close()">
        X
    </button>
    
  3. aria-labelledby: Similar to the aria-label attribute, but it should be used if there is visible text labeling the element.

    <div role="dialog" aria-labelledby="dialog-header">
        <h2 id="dialog-header">Choose a File</h2>
        <!-- ... Dialog contents -->
    </div>
    

Wrapping Up

We went through some tricks to boost all aspects of the Lighthouse Score for your website. Use them on your website and witness the magic before your eyes.

Wishing you a Perfect 100 Lighthouse Score!

thumbs up

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Need a Top Rated Front-End Development Freelancer? Contact me on Upwork

Want to see what I am working on? Check out my GitHub

I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram

Follow my blogs for Weekly new Tidbits on Dev

FAQ

These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.

  1. I am a beginner, how should I learn Front-End Web Dev?
    Look into the following articles:

    1. Front End Development Roadmap
    2. Front End Project Ideas
  2. Would you mentor me?

    Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

  3. Would you like to collaborate on our site?

    As mentioned in the previous question, I am in a time crunch, so I would have to pass on such opportunities.

Connect to me on

Top comments (22)

Collapse
 
reikrom profile image
Rei Krom

** cough **

if (navigator.userAgent.indexOf("Chrome-Lighthouse") > -1) {
Return <PlainTextApp />
} else {
Return <App />
}

** cough **

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Nice one 😂

Collapse
 
stereosolar profile image
lazysergey

cloaking?

Collapse
 
reikrom profile image
Rei Krom
Collapse
 
vladi160 profile image
vladi160

Some browsers don't support webp and you need to detect that.

  1. Async loading for css + critical css in the head section, same for fonts with default font
  2. Static generation is the fastest
  3. Optimize images by decreasing their quality and removing meta data
  4. Use width and height for img tag
  5. Use http2
  6. Use nginx/litespeed with proper cache settings
  7. Use cdn for assets like aws s3 bucket
  8. May be use in memory database and cache there the query results
Collapse
 
stereosolar profile image
lazysergey • Edited

Metadata removal is a must, we had up to 40kb of trash in it

Collapse
 
zwelhtetyan profile image
Zwel👻

where can i check lighthouse score? I want to get lighthouse result as svg like below.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Chrome Dev Tools

Collapse
 
tzm profile image
Stamen Georgiev

In fact, no one cares about your LH score.
Google is only interested in LCP, FID and CLS for your SEO score.

The rest is just for show off.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose • Edited

Actually Google does care about Accessibility & Best Practices too. Initially Google refused to index my website because I was using a div as a button, as for Accessibility:

Accessibility

Collapse
 
kosich profile image
Kostia Palchyk

a) Google does care about Accessibility of your website.
b) YOU should care about Accessibility of your website.

Collapse
 
fullstackchris profile image
Chris Frewin

Those three are now considered a part of performance.

Collapse
 
chenyomi profile image
chenyuming

Nice

Collapse
 
grocker42 profile image
Grocker

The real magic trick is to load js on Interaction.

Collapse
 
xamian profile image
Xamian

Good tips! About img optimizing. When you use nextjs, just use the Image tag instead of img, nextjs will optimize it for you.

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Yeah, that's a handy one, thanks for pointing out!

But there's one issue with it: you need to have the image locally in the server, for images from external using next's optimization results in worse performance

Collapse
 
bbaublys profile image
Boris Baublys

Thanks. We look forward to continuing with tips for WordPress, in which the user's capabilities are limited by the themes used

Collapse
 
benstov profile image
benstov

I would suggest reading as well about

  • lazy hydration /progressive-hydration to reduce TBT
  • SVG sprites for faster rendering
  • css containment for faster painting
Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Thankyou for your insights

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Glad you found it helpful :)