Skip to content

Frank Goossens' blog

  • Web-Tech blogposts
  • Other blogposts
  • WordPress & plugins
    • WP YouTube Lyte
    • Autoptimize
    • WP DoNotTrack
    • Do Not Donate!
  • about
    • Timemachine
    • Contact

featured image

AO not lazyloading above the fold; the sequel

December 23, 2020 by futtta

So in the ever-continuing saga of learning, testing and fine-tuning your site’s settings to get the ultimate in performance you might have enjoyed the new Autoptimize filter/ setting not to lazyload the first N images to keep the impact of lazyloading on Largest Contentfull Paint down?
Well, now you can take things a step further with below code snippet, which tells Autoptimize not to lazyload the logo and the featured image (hat tip to Gijo Varghese of Flying Press for the idea).

add_filter('autoptimize_filter_imgopt_lazyload_exclude_array', function( $lazy_excl ){
	// site logo.
	$custom_logo_id = get_theme_mod( 'custom_logo' );
	$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
	$logo = $image[0];
	if ( ! empty( $logo ) ) {
		$lazy_excl[] = $logo;
	}
	// featured image.
	if ( is_single() || is_page() ) {
		$featured_img = get_the_post_thumbnail_url();
		if ( ! empty( $featured_img ) ) {
			$lazy_excl[] = $featured_img;
		}
	}
	return $lazy_excl;
});

This might end up in a future version of Autoptimize, maybe even preloading those images … 🙂

Categories autoptimize, lang:en, wordpress Tags code snippet, featured image, lazyload, logo, not lazyload, preload 1 Comment

I am a "Web Performance and Architecture Consultant" from Belgium, working on Web and Mobile Architecture by day and WordPress and web performance by night (more info here).

  • subscribe to my web-tech blogfeed
  • abonneer op niet-technische artikels
  • @optimatters on Twitter
This is an ad-free blog!

You said, she said

  1. Moudud Ahmed on Google PageSpeed Insights updated, new metrics and recommendations!
  2. futtta on How to fix render-blocking jquery.js in Autoptimize
  3. Al on How to fix render-blocking jquery.js in Autoptimize
  4. Zelenskii on Нет войне!
  5. Putin on Нет войне!

Recent Blogposts

  • Autoptimize troubleshooting howto
  • Plezierig tijdverdrijf!
  • CriticalCSS “power-up” pining for the fjords
  • Autoptimize 3.0 almost done, want to test?
  • Нет войне!
© 2022 Frank Goossens' blog • Built with GeneratePress