Autoptimize vs Native Image Lazy Loading

Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default but can also inline critical CSS and defer the aggregated full CSS, moves and defers scripts to the footer and minifies HTML. You can optimize and lazy-load images (with support for WebP and AVIF formats), optimize Google Fonts, async non-aggregated JavaScript, remove WordPress core emoji cruft and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs. If you think performance indeed is important, you should at least consider one of the many free page caching plugins (e.g. Speed Booster pack or KeyCDN’s Cache Enabler) to complement Autoptimize or even consider Autoptimize Pro which not only has page caching but also image optimization, CDN, critical CSS and more! Autoptimize Pro Autoptimize Pro is a premium Power-Up, adding image optimization, CDN, page caching, automatic critical CSS rules and extra “booster” options, all in one handy subscription to make your site even faster!! Premium Support We provide great Premium Support and Web Performance Optimization services with Accelera, check out our offering on https://accelerawp.com/! (Speed-surfing image under creative commons by LL Twistiti)

This plugin adds the loading attribute to IMG tags found when filtering the_content() to support native image lazy loading. For more information about lazy loading images using this new native browser image attribute, check out this article: https://addyosmani.com/blog/lazy-loading/ and for a little more depth into what we’re doing here, check out our explainer post. Historically, to limit the impact offscreen images have on page load times, developers have needed to use a JavaScript library (like LazySizes or Vanilla-LazyLoad) in order to defer fetching these images until a user scrolls near them. What if the browser could avoid loading these offscreen images for you? The loading attribute instructs a browser to defer loading offscreen images until users scroll near them. It comes in three flavors: eager, auto, and lazy. Install this plugin and you can set the first image’s loading attribute and the loading attribute for all the subsequent images sent through the_content() in the plugin’s settings page. Simple is Beautiful There is no JavaScript or CSS included in the plugin. It just works in browsers that support the new loading image attribute. For browsers that don’t support this new image loading attribute, that’s ok. You can still use whatever JavaScript-based image lazy loader you want as a fallback until browser support becomes a little more mainstream.