performance

Autoptimize with support for AVIF images

by

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 now you know what it is you may want to use it on your WordPress site? In that case -and the title kind of gives it away- the freshly released Autoptimize 2.7.8 now has support for AVIF if you have image optimization active. Just as for WebP Autoptimize hooks into the lazyload JavaScript to detect if your visitor’s browser supports AVIF and will switch the requests to the ShortPixel CDN to that format if so. If AVIF is not support but WebP is, the requests will be for WebP images and if those are not supported old-fashioned JPEG’s will be loaded.
So there you have it, AVIF is now available in WordPress!

Want to test AVIF images with Autoptimize’s Image Optimization?

by

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;

add_filter('autoptimize_filter_imgopt_webp_js', function(){return '<script data-noptimize="1">function c_img(a,b){src="avif"==b?"data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABoAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACJtZGF0EgAKCBgADsgQEAwgMgwf8AAAWAAAAACvJ+o=":"data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";var c=new Image;c.onload=function(){var d=0<c.width&&0<c.height;a(d,b)},c.onerror=function(){a(!1,b)},c.src=src}function s_img(a,b){w=window,"avif"==b?!1==a?c_img(s_img,"webp"):w.ngImg="avif":!1==a?w.ngImg=!1:w.ngImg="webp"}c_img(s_img,"avif");document.addEventListener("lazybeforeunveil",function({target:a}){window.ngImg&&["data-src","data-srcset"].forEach(function(b){attr=a.getAttribute(b),null!==attr&&-1==attr.indexOf("/client/to_")&&a.setAttribute(b,attr.replace(/\/client\//,"/client/to_"+window.ngImg+","))})});</script>';});

Use the the code snippets plugin to add this (easy and safe) or if you’re adventurous add it to your theme’s functions.php.

Google PageSpeed Insights updated, new metrics and recommendations!

by

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.

Autoptimize 2.7; final stretch, testers needed!

by

Autoptimize 2.7 is in the final stages and the beta version can as of now be downloaded from https://downloads.wordpress.org/plugin/autoptimize.zip
Main new features:

So who want to test? Feedback in the comments please! 🙂

Autoptimize 2.7 with Critical CSS integrated, beta out

by

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).

Autoptimize 2.6 released

by
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.
Happy holidays to all!
frank

Autoptimize closing in on W3 Total Cache

by

Fun fact; As per wordpress.org “popular plugins” ranking , Autoptimize is slowly but surely closing in on what used to be the go-to solution for Web Performance Optimization W3 Total Cache based on the “active installs” metric. Who would have thought? What a crazy ride …