ToolKit includes powerful media optimization features including: lazy loading, preloading of critical above the fold images (great for LCP), ability to exclude specific images from lazy loading, and the ability to define image width and height attributes (great for improving CLS!).
Lazy Loading speeds up your WP site by loading your media only as they enter the browser viewport.
ToolKit lets users select which Lazy Load method they prefer.
As of WP v5.5, native Browser-Based Lazy Loading is included in WP core for all images that have specified width and height attributes.
While browser-based lazy loading will be the best option for most users, depending on your site’s layout, feel free to test out Toolkit’s JS Lazy Loading method to see which method works best for you.
Excluding Images from Lazy Load
When excluding images from being lazy loaded, ToolKit will apply the “Eager” loading attribute instead of “Lazy”.
Preloading Critical “Above the Fold” Images
Depending on how many images (and how large they are), preloading above the fold images such as your logo and any images excluded from lazy loading can potentially help improve Largest Content Paint times as well as Total Blocking Time.
ToolKit can now help preload these images with a simple click.
Though this will help improve LCP for most users, depending on a few factors such as your image filesize, media filetype, etc, we recommend testing this in your environment to see which option works better.
Adding Height and Width Attributes to Reduce CLS
Assigning a height and width attributes to your images can help instruct browsers to reserve that space during rendering thus reducing Cumulative Layout Shift.
Learn more about CLS here.
By enabling this, ToolKit will attempt to add missing width and height attributes to images to help reduce layout shifts (CLS) in Lighthouse Recommendations.