Google PageSpeed Insights updated, new metrics and recommendations!

If you tested your blog’s performance on Google PageSpeed Insights yesterday and do so again today, you might be in for a surprise with a lower score even if not one byte (letter) got changed on your site. The reason: Google updated PageSpeed Insights to Lighthouse 6, which changes the KPI’s (the lab data metrics) that are reported, adds new opportunities and recommendations and changes the way the total score is calculated.
So all starts with the changed KPI’s in the lab metrics really; whereas up until yesterday First Contentful Paint, Speed Index, Time to Interactive, First Meaningful Paint, First CPU Idle and First input delay were measured, the last 3 ones are now not shown any more, having been replaced by:

  • Largest Contentful Paint marks the point when the page’s main content has likely loaded, this can generally be improved upon by removing removing render-blocking resources (JS/ CSS), optimizing images, …
  • Total Blocking Time quantifies how non-interactive a page while loading, this is mainly impacted by Javascript (local and 3rd party) blocking the main thread, so improving that generally means ensuring there is less JS to execute
  • Cumulative Layout Shift which measures unexpected layout shifts

The total score is calculated based on all 6 metrics, but the weight of the 3 “old” ones (FCP, SI, TTI) is significantly lowered (from 80 to 45%) and the new LCP & TBT account for a whopping 50% of your score (CLS is only 5%).
Lastly some one very interesting opportunity and two recommendations I noticed;

  • GPSI already listed unused CSS, but now adds unused JS to that list, which will prove to be equally hard to control in WordPress as JS like CSS is added by almost each and every plugin. Obviously if you’re using Autoptimize this will flag the Autoptimized JS, disalbe Autoptimize for the test by adding ?ao_noptimize=1 to the URL to see what original JS is unused.
  • GPSI now warns about using document.write and about the impact of passive listeners on scrolling performance which can lead to Google complaining about … Google 🙂

Summary: Google Pagespeed Insights changed a lot and it forces performance-aware users to stay on their toes. Especially sites with lots of (3rd party) JavaScript might want to reconsider some of the tools used.

Next Autoptimize eliminates render-blocking CSS in above-the-fold content

Although current versions of Autoptimize can already tackle Google PageSpeed Insights’ “Eliminate render-blocking CSS in above-the-fold content” tip, the next release will allow you to do so in an even better way. As from version 1.9 you’ll be able to combine the best of both “inline CSS” and “defer CSS” worlds. “Defer” effectively becomes “Inline and defer“, allowing you to specify the “above the fold CSS” which is then inlined in the head of your HTML, while your normal autoptimized CSS is deferred until the page has finished loading.
Other improvements in the upcoming Autoptimize 1.9.0 include:

  • Inlined Base64-encoded background Images will now be cached as well and the threshold for inlining these images has been bumped up to 4096 bytes (from 2560).
  • Separate cache-directories for CSS and JS in /wp-content/cache/autoptimize, which should result in faster cache pruning (and in some cases possibly faster serving of individual aggregated files).
  • CSS is now added before the <title>-tag, JS before </body> (and after </title> when forced in head). This can be overridden in the API.
  • Some usability Improvements of the administration-page
  • Multiple hooks added to the API a.o. filters to not aggregate inline CSS or JS and filters to aggregate but not minify CSS or JS.
  • Multiple bugfixes & improvements

On the todo-list; testing, some translation updates (I’ll contact you translators in the coming week) and updating the readme.txt.
The first test-version of what will become 1.9.0 (still tagged 1.8.5 for now though) has been committed to wordpress.org’s plugin SVN and can be downloaded here. Anyone wanting to help out testing this new release, go and grab your copy and provide me with feedback.

Coming up: Autoptimize 1.8 with API and inlined CSS

I’ve been working on a new Autoptimize version over the last couple of weeks and consider it largely finished now. The following features are in:

  • Optionally inline all CSS as suggested by Hamed (warning: can result in improved pagespeed-score but lower page speed! I’ll write a blogpost about when to use and not to use this one shortly)
  • Simple API Set of filters to provide a simple API (including example code) to change Autoptimize behavior to
    • conditionally disable Autoptimize on a per request-basis
    • change the CSS- and JS-excludes
    • change the limit for CSS background-images to be inlined in the CSS
    • define what JS-files are moved behind the aggregated one
    • change the defer-attribute on the aggregated JS script-tag
  • Improvement: updated upstream CSS minifier
  • Improvement: switch default delivery of optimized CSS/JS-files from dynamic PHP to static files
  • Improvement (force gzip of static files) and bugfix (force expiry for dynamic files, thanks to Willem Razenberg) in .htaccess
  • Bugfix: fail gracefully when things go wrong (e.g. the CSS import aggregation gone haywire resulting in empty aggregated CSS-files that was reported by Danka)
  • Bugfix: stop import-statements in CSS comments to be taken into acccount as seen by Joseph from blog-it-solutions.de
  • Bugfix: fix for blur in CSS breaking as reported by Chris of clickpanic.com
  • Updated translations

Some more testing and a couple of translations are still to be updated and we’re good to go for a release early January. You’re welcome to join in on the fun off course; download the test-version here and let me know what works and -more importantly- what is broken!