Improve performance score (Lighthouse/Core Web Vitals)

[PullJosh]

(Pretty sure @kurtbruns knows more than I do about this, so hopefully he's willing to help.)

Google has an ambiguously-branded tool, sometimes called Lighthouse, other times spoken about as "core web vitals", and other times just plopped on web.dev with no name. In Chrome devtools it's under the "Lighthouse" tab.

It tests the performance and accessibility of a website, and as far as I know it's pretty much the gold standard for measuring the basic user experience.

Right now, our performance score is total trash.

This kind of performance really matters, both for users and for SEO. We need to at least fix the low-hanging fruit, and it would be good to go a step beyond that and really make performance a priority, because it matters a lot, especially for people with low-end devices or spotty internet.

The good news is that this is definitely a solvable problem. (We can at least get 80% better for 20% of the work.) I haven't done a whole lot of digging, but there are a few major issues that Lighthouse is clearly highlighting:

• I never noticed this because I always use adblock (sorry Grant; no YT ad revenue for you), but Disqus is actually slapping a whole bunch of ads at the bottom of the page, which is totally uncool. Honestly, performance issues are the least of my concerns here. ("Female Athlete Fails You Can't Look Away From" doesn't really feel like it fits the general vibe of the site we're building.) Ads aside, Disqus also seems to be doing bad things for performance in general.
• All our icons currently come from Font Awesome, which works is a bit like Wingdings, where each icon is actually a character. So we are downloading the entire font, with all its icons, just to get the few that we want.
• Lighthouse also says we have a bunch of unused JavaScript, which I totally believe. It will take a bit of digging to figure out exactly what the cause is and how to fix it.
• Images are not properly sized. Next has a built-in solution for this that we aren't currently taking advantage of (but totally should).
• Serving the assets in the Linode bucket using http/2 rather than http/1.1 would supposedly save a bit of time. Not sure if that's actually possible or not. (@kurtbruns?)

[PullJosh]

Today I learned that Next has built-in support for measuring these web vitals!

[kurtbruns]

@PullJosh Attached to this comment are two lighthouse reports that I ran on the site. Can you run again, save and attach your report?

I've spent my fair share of time optimizing light house reports. My two cents is to pick low hanging fruit and to make changes that will definitely improve accessibility. That being said, the two reports I ran multiple times have scores that feel reasonable for an initial release, especially if it's a soft release. With a large audience and public repository we may see some thoughtful people weight in on site performance issues.

Happy to talk more about my experience and discuss improvements.

PS you may get a kick out of this article

lighthouse-3blue1brown.netlify.app:lessons:derivatives.pdf
lighthouse-3blue1brown.netlify.app:lessons:essence-of-calculus.pdf

[PullJosh]

That's a relief! But I'm confused how you got those numbers. Are you just using the Lighthouse tab in Chrome devtools? That's what I did, and I was consistently getting performance results of 12 or lower.

Update: I just re-ran the tests using the same pages you did, and I got performance scores of 36 and 23. Better than earlier today, but still much worse than what you're seeing.

lighthouse-derivatives.pdf
lighthouse-essence-of-calculus.pdf

[kurtbruns]

Yeah Lighthouse tab in Chrome Devtools

[vincerubinetti]

It seems like we removed Disqus?

Maybe we can replace with https://giscus.app/