You probably have heard about AVIF already, but if not; it is a new image format which is based on the AV1 video format and generally has superior compression than the better-known WebP, JPEG, PNG and GIF formats. Avif is currently supported by Chrome & Opera and can be enabled by setting the image.avif.enabled flag in Firefox.
So there you have it, AVIF is now available in WordPress!
So AVIF is a new(ish) image format that promises even better optimization then WebP and is supported in desktop Chrome & behind a preference in Firefox; go to about:config and set image.avif.enabled to true.
If you are using Autoptimize to optimize your images and you want to test AVIF images, you can use below code snippet to do so;
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, …
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 :-)
an experimental option to provide “fallback autoptimized CSS and JS”; in some cases a cached version of the HTML links to autoptimized CSS/ JS that was already removed. if you enable that option, Autoptimize will try to intercept those requests and redirect them to fallback versions to limit the breakage. the option is default off for now, but might become default on at a later stage.
The title says it all; I just pushed the first beta of Autoptimize 2.7 which has some small fixes/ improvements but which most importantly finally sees the “Autoptimize CriticalCSS.com power-up” fully integrated.
Next to the actual integration and switching to object-oriented for most (but not all) of AOCCSS files, there are some minor functional changes as well, most visible ones being buttons to clear all rules and to clear all jobs from the queue.
I hope to be able to release AO27 officially in April, but for that I need the beta thoroughly tested off course. Most important part to test is the critical CSS logic obviously, so if you have the power-up running, download/ install the beta and simply disable the power-up to have Autoptimize fill that void (if the power-up is active, AO refrains from loading it’s own critical CSS functionality).
I just released AO26, which comes with a bunch of new features, improvements and bugfixes.
New: Autoptimize can be configured at network level or at individual site-level when on multisite.
Extra: new option to specify what resources need to be preloaded.
Extra: add display=swap to Autoptimized (CSS-based) Google Fonts.
Images: support for lazyloading of background-images when set in the inline style attribute of a div.
Images: updated to lazysizes 5.2.
CSS/ JS: no longer add type attributes to Autoptimized resources.
Improvement: cache clearing now also integrates with Kinsta, WP-Optimize & Nginx helper.
Added “Critical CSS” tab to highlight the criticalcss.com integration, which will be fully included in Autoptimize 2.7.
Batch of misc. smaller improvements & fixes, more info in the GitHub commit log.
The release has been tested extensively (automated unit testing, manual testing on several of my own sites and testing by users of the beta-version on Github), but as with all software it is very unlikely to be bug-free. Feel free to post any issue with the update here or to create a separate topic in this forum.