Gatsby: [v2] Make v2 default/blog starters score 100 on Lighthouse out of the box

[KyleAMathews]

Lighthouse is a fantastic site audit tool and we should make official Gatsby starters pass with flying colors out of the box

https://developers.google.com/web/tools/lighthouse/

Other than the hello-world starter which is intentionally kept completely minimal.

• [ ] Default https://github.com/gatsbyjs/gatsby-starter-default/
• [ ] Blog https://github.com/gatsbyjs/gatsby-starter-blog

[roachnt]

Including the PWA section? So we should add those plugins to the starters?

[jumpalottahigh]

I'd love to give this a try if no one has started yet.

[KyleAMathews]

@roachnt yup!

@jumpalottahigh have at it! Though maybe @roachnt wants to take one as well :-)

[jumpalottahigh]

@KyleAMathews Sweet. I'll start on gatsby-starter-blog then in case @roachnt wants to pick up the default starter, if not, I'll move to it too after.

[roachnt]

Yeah I can take starter-default, thanks for saving me one!

[jumpalottahigh]

Sure thing. Got up to here for today, will have to sleep on the last 3 points of performance which seem to require removing unused css styles, yet the purgecss was unable to tree shake anything.

[roachnt]

Here's what I've come up with thus far. I've had this "passive listeners" thing come up a lot. Any thoughts on how to take care of that?

[KyleAMathews]

Looks like a chrome extension. Make sure to run audits in an incognito window for the cleanest runs.

[roachnt]

Ah, guess I could've gathered that information by hovering over the URL and seeing "chrome-extension" 🙄 thanks Kyle!

[roachnt]

Looking good so far! Last thing is that css preload. Is that something that would need to be handled in gatsby itself?

[KyleAMathews]

What's the issue with css preload?

[roachnt]

[KyleAMathews]

Haha I think lighthouse is confused by our prefetching. It's algorithm there must just be "if css is loaded within x seconds, suggest preloading". Which is fine normally except we start prefetching very quickly after the app starts.

Why though does the second page have its own CSS bundle? It doesn't require any CSS right?

[roachnt]

Oddly enough, it's the layout.css file's contents...is that just from the Layout component being imported on each page?

[jumpalottahigh]

Current state of the gatsby-starter-blog progress:

Even with completely removed typography.js for testing sake, still can't reach quite 100 score in performance. Out of clues in the Lighthouse report.

Reading here doesn't seem to help either: https://developers.google.com/web/tools/lighthouse/v3/scoring

They link to an excel sheet, which also doesn't point to anything we can improve, it seems we already cover all the values mentioned in the excel sheet.

Could it be something Gatsby internal that needs to be improved for that last 99 -> 100 points or as mentioned above is it a Lighthouse scoring algorithm issue?

[jumpalottahigh]

This PR has been up and quiet for a while - https://github.com/gatsbyjs/gatsby-starter-blog/pull/114
Any feedback would be appreciated if anyone gets a chance (which might also potentially close this issue.

[KyleAMathews]

We did it, thanks everyone!

[omrllm]

Hi!

Google probably changed their criteria because right now if you run an audit on the gatsby-starter-default/gatsby-starter-blog you don't get a 100 score in the pwa section.

What can I do to get a 100 score in the pwa section?

[jumpalottahigh]

Hi, @omrllm. The gastsby-starter-default doesn't reach 100 score in the PWA category, because the service worker is opt in. You can enable it and that's going to get you to 100, but unless you are aware of how service workers function, I'd suggest you are probably better off leaving it like that, as it might introduce caching issues and serving stale content in some cases. That being said it could be powerful if you really have the use case for it.

As for the gatsby-starter-blog it seems like we need to add some fallback content between noscript tags to alert users with JavaScript disabled that the app requires JavaScript to run correctly. Thanks for spotting this, I'll open a PR with a suggested fix for that.

It seems like the starters have moved here: https://github.com/gatsbyjs/gatsby/tree/master/starters and they do get 100 PWA score, check them out.

[omrllm]

It seems like the starters have moved here: https://github.com/gatsbyjs/gatsby/tree/master/starters and they do get 100 PWA score, check them out.

I still get the same results.. how do you get that 100 PWA score?

What I did:

• Went to https://github.com/gatsbyjs/gatsby/tree/master/starters
• Cloned the https://github.com/gatsbyjs/gatsby repo
• Deleted everything in the folder
• Installed the gatsby-cli with npm install gatsby-cli inside the blog and default folders
• gatsby build
• gatsby serve

Same results..

Brave (a browser based on Chromium):
Default gives me a PWA score of 58 and a Best Practices score of 93
Blog gives me a Performance score of 98, PWA score of 58 and a Best Practices score of 93

On Chromium:
Blog gives me a Performance score of 98, PWA score of 88 and a Best Practices score of 93
Default gives me a PWA score of 58 and a Best Practices score of 93

All the other values are equals to 100

I've got the results in incognito mode to get non distorted values

P.S. even the demo websites do not give me a 100 score.. the one which get the closest to a 100 score is https://gatsby-starter-blog-demo.netlify.com/ -> (performance = 99 & pwa = 96, everything else = 100) on Chromium

[jumpalottahigh]

I like testing on Netlify in an incognito Chrome tab for (hopefully) most trustworthy results. Following the same steps as you, cloning the monorepo, going to starters/blog and installing the dependencies with yarn, then building a production version and deploying it to Netlify, does indeed give me 100 scores across the board except for best practices.

Run the tests yourself here: https://wonderful-mirzakhani-873806.netlify.com

I'm wondering if the discrepancies are not because you are testing a locally served site on localhost?

The demo site, on the other hand, does seem to be a bit behind than what's in the repository.

[omrllm]

I'm wondering if the discrepancies are not because you are testing a locally served site on localhost?

Yeah, probably it's because I tested them locally.
Indeed, when I test https://wonderful-mirzakhani-873806.netlify.com I get a 100 score everywhere on Chromium and on Brave I get a 100 score excluding the pwa score (which I get a 65).

So the test score is influenced not just by being local vs being deployed somewhere, but also by the browser used to test (at least those are my results).

[miloofcroton]

I have the exact same score. What is up with Netlify + Gatsby and HTTP/2?

[ajmalafif]

I have the exact same score. What is up with Netlify + Gatsby and HTTP/2?

@miloofcroton because most probably you have

• [ ] Clear Storage unchecked (just above Run Audits button).

[miloofcroton]

I have the exact same score. What is up with Netlify + Gatsby and HTTP/2?

@miloofcroton because most probably you have

• [ ] Clear Storage unchecked (just above Run Audits button).

No, it's not that. I have it checked.

Sorry for the delay in response. I forget to check my Github notifications.

edit: if it's helpful, feel free to look at the site I'm testing: https://toumey.io/