DEV Community

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

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

Tapajyoti Bose on November 07, 2021

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...
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 :)

Collapse
 
ruppysuppy profile image
Tapajyoti Bose

Thanks :)

Collapse
 
rosaliecollins profile image
rosaliecollins

Love this!
drift hunters