Image resizing by CSS

Hi there,

resizing images with CSS won't help. Heres some things i would try:

1. Do NOT lazy load the Featured image.
Most lazy loading plugins have an option to exclude an image using a CSS class. So add this PHP Snippet to your site:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' skip-lazy';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then you can use the skip-lazy class to exclude the image.

2. The other major issue is the advert scripts running on the size. I would recommend using a plugin to Defer the loading of advert scripts.

3. Fonts - i would recommend loading them locally:

https://docs.generatepress.com/article/adding-local-fonts/

Hi David,

thanks for your suggestions. Using the snippet I've got a slight improvement (5-10 points). I'm aware that the main problem are the ads scripts. I will try WP-Rocket; do you suggest some other plugin?
Thanks,

Mario

For me personally i like the PerfMatters plugin, it supports defer and delay of loading scripts.

Hi David,

I used WP-Rocket, because it also manages defer and delay of loading scripts and I needed some additional caching. My Lighthouse score went from 45 to 90-91: very good outcome. Still using your snippet on not lazyloading the first image. Mission accomplished, thanks!

Awesome - glad to hear that!!!