This tutorial features the Feast Plugin, which enhances and extends your theme to improve SEO, pagespeed, accessibility and user experience.
Improve your desktop Core Web Vitals by skipping lazy loading your first post image automatically:
This is generally a small improvement, and is recommended.
Smart logic
By default we only add this to posts where the first post-image is present high enough on the page to make a difference. By default, 1200 characters has worked well with our testing (though this may change as we see more data).
This ensures that on posts where the first image is way below the fold, lazyloading occurs normally.
Developers wishing to control this threshold can use a filter:
add_filter( 'feast_skip_lazy_threshold', function() { return 1200; } );
Enabling this on all posts (regardless of position) can be done by setting this to some arbitrarily high value (eg. 10000).
Compatibility
This will work with WP Rocket, as well as WordPress' built-in image lazyloading.
Testing
Because of the variability when running the Pagespeed Insights testing tool, tests may come back better or worse than before when making website changes. This is typically caused by caches being rebuilt, variability with third party plugins and more.
Because of this, initial tests may not actually reflect the full benefit.
Removing lazyloading on the first image is a small improvement and is safe to enable and leave enabled.
Future improvement
We may look to improve this in the future by excluding lazyloading for up to the first 4 images on the homepage and category pages.
Jamie says
Hi Skylar,
Is this still best practice in 2023? I'm getting some google pagespeed insights errors suggesting I lazy load the first image.
Thanks so much!
Skylar says
Yes, this is still a recommended best practice. There's a trade-off in performance that's generally beneficial.