Skip lazy loading first post image

This tutorial features the Feast Plugin, which contains enhances and extends your theme.

Improve your desktop Core Web Vitals by skipping lazy loading your first post image automatically:

This is generally a small improvement, and is recommended.

Jump to:

• Smart logic
• Compatibility
• Testing
• Future improvement

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.