Pagespeed Insights is useful again thanks to Lighthouse
On November 17th, 2017, I called utter and complete stupid bullshit as Google Pagespeed was giving glowing scores to pages like Wired.com and Newsweek.com. Both garnered higher scores than my hyper minimalist blog, which has a whopping 2.9k of CSS and about 40k of JS against their megabytes of JS and images. It was so irrelevant that it caused me grief professionally as clients would be unhappy with their scores despite being fairly optmized.
Pagespeed isn't perfect, but it is now what I'd consider fixed, and I've meant to write this article for some time. My blog's page speed has gone up to 76 from 70 on my homepage. Individual articles, such as Google Page Speed lacks common sense, now scores 90. Sanity has been restored. I'm not just saying that because my numbers are better. Let's start with my complaints.
- Pagespeed did not care about JS bloat, long as it wasn't directly linked. If a library decided to append several megabytes of Javascript, Pagespeed wouldn't even blink.
- It would advise on how to optimize iframes even though the user has no control over such things
- It did not care if you used post-JPG/PNG formats
- It made no effort to measure total requests.
- It made no effort to measure time-to-paint
- It failed to recognize minified HTML due to a single line-break
- It did not compare against any other real-world dataset making it relativistic only to your website's previous scores
Surprisingly, all my major gripes were resolved to the point where I feel like a Google engineer took umbrage with my post (let me be clear; this almost certainly didn't happen). Lighthouse is oodles better (I've been using it since mid/late 2018), trying to leverage Chrome User Experience Report for higher tier pages. What's interesting is the change philosophically from the technology bucketed approach of CSS, JS, HTML, and Server-side technologies existing in their own orbits to one that clearly has standardized goals. This makes cross-site comparisons more sane. The benchmark metrics are as follows: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency. This lends itself to a greater understanding of the stages of a web page's life-cycle. This is the most significant change, and I approve of it. The feedback is more meaningful, as well. Below is an unorganized list of my observations.
- If you are using Wordpress, it'll suggest plugins to assist certain tasks. Another meaningful change that I didn't think of to rant about was DOM Tree depths. Google now recommends less than 32 levels of depth.
- It makes some executive calls like using
font-display: auto;
which re-enables one of the banes of web dev, Flash of Unstyled text that was expressed in shorthand, as "FOUT, FOIT, FOFT". Google prefers the FOUT. - Google has stepped away from suggesting minified HTML, likely because compressing HTML is far more important, as demonstrated here. You can still minify HTML to squeeze extra bytes away.
- Lighthouse measures JS execution times, not just size.
- It no longer suggests the wantonly silly declaritive image sizes. Prior, Pagespeed wanted you to write out the pixel value to speed up render times. This was good advice in 2000, but tragically out-of-step for the responsive web.
- Audits can pass even if they are not met 100%, such as minify CSS or JS if the vast majority has been met.
All in all, it's good to see Lighthouse.