DEV Community

Cover image for How I got perfect  Google Lighthouse score with Gatsby

How I got perfect Google Lighthouse score with Gatsby

Jessica Valencia on September 28, 2020

A few weeks ago, I got assigned a project to open a website for SEO. Targeted keyword is casino know-hows and online casino website, which are very...
Collapse
 
quinncuatro profile image
Henry Quinn

It can be tricky - I've noticed some things drop below 100 for me on my Gatsby site.

Just went through another round of shoring things up last week to get to 100 across the board!

henryneeds.coffee

Collapse
 
jessica000 profile image
Jessica Valencia

Numbers are numbers. I like your site!

Collapse
 
quinncuatro profile image
Henry Quinn

Thanks! It's gone through a lot of small iterations over the years but it's always been that terminal theme.

I think I'm going to mess with the CSS a bit to make different sections of it more clear, but then I'll let it sit for a bit, haha.

Collapse
 
perpetual_education profile image
perpetual . education • Edited

We gotta learn more about HTTP2 !

It's important to remember that Lighthouse is not ONLY a tool to help the people but also to help Google sell you the idea of AMP pages (which are never going to take hold... but all the same). By telling you that your site isn't fast enough... they are really pushing that idea a bit far... with the goal of keeping you reliant on them. Netlify seems to be building a similar idea. How could we possibly create 100/100 HTML pages - with React? :/

Setting a reasonable performance budget is good enough. Just having a vimeo video on your site is going to knock you a little / and be out of your hands. Not all sites are markdown templates. All sites have different goals and different constraints. 100/100 is not the primary goal.

We really liked Scott Jehl's mini-course on web performance.

Collapse
 
jessica000 profile image
Jessica Valencia

Couldn't agree with you more. If I make a dynamic website, 80 ~ 90 points will be more than enough. But I wanted to make a fast static website. When you see score like 93, you want to make it 100, right?

Collapse
 
perpetual_education profile image
perpetual . education

Hey, we're super into being 100 ;)

for sure. Gotta go for the gold. But there's a lotta people who care more about that 100 than having any decent CSS / or content... and so - our comment is just a little shout-out to those people. : )

Collapse
 
ender_minyard profile image
ender minyard

Awesome!

Collapse
 
jessica000 profile image
Jessica Valencia

This is my first day on DEV community.
Thanks for cheering me!!

Collapse
 
ender_minyard profile image
ender minyard

💞 I like DEV, I hope you like it too :-)

Collapse
 
stevepepple profile image
Steve Pepple

This guide was very helpful, thanks much!
In particular, I'm using Wordpress + Gatsby I didn't understand why my wepb images were larger than the source in Wordpress.

Still have some things to optimize for our site, Vibemap.com, but these tips are a solid improvement.

Collapse
 
ben profile image
Ben Halpern

Really great post

Collapse
 
jessica000 profile image
Jessica Valencia

Thanks, Ben!

Collapse
 
bravemaster619 profile image
bravemaster619

Superb!

Collapse
 
dutradotdev profile image
lucas

Nice!

Collapse
 
yurieastwood profile image
Yuri Eastwood

Nice post, thanks for sharing! (:
We just have to remember to keep that balance of performance (or achieving tool's requirements, which is not always the same) and usability/focus on the end goals.

Collapse
 
jessica000 profile image
Jessica Valencia

Totally agree with you!

Collapse
 
blossom profile image
Blossom Babs

do you have any idea how to Serve static assets with an efficient cache policy with a site hosted on netlify