[Resolved] Speed Tests Show Decent Speed, Pics & Site Still Load Slow

[victor]

Hi again. You folks helped me optimize my images using a Snippet in this thread. Thank you!

With the above snippet, my pictures are slightly noticeably degraded however. Speed scores are decent, but, in incognito for (mostly) desktop and some of Mobile, pictures still load fairly slow.

1) Is it possible to load lower quality images on archive / home pages and load the full quality image on individual blog posts? This sounds ideal to me — I show them the fast loading, decent quality pictures, then when they click on that blog post, it opens that blog post with the full quality image.

2) What other tweaks can I make? How do other websites load high quality images instantly? ‘Smush’ Lazy Loading appears to make things substantially worse but I am Smushing images, and using ‘Converter for Media’ to serve images as Webp.

[David]

Hi there,

in Customizer > Layout > Blog you can set the Featured Images size for the Archive pages to a smaller size eg. Medium.
The featured images on your archive will now prompt the browser to use the medium size.
If you want to ensure the browser does only load that size then use this snippet:

function set_max_srcset_width( $max_width ) {
    if ( !is_singular() ) {
        $max_width = 300;
    }
    return $max_width;
}
add_filter( 'max_srcset_image_width', 'set_max_srcset_width' );

It will tell WP to only add the 300px ( default medium size ) image for the archive pages.
Then there is no ambiguity.

Then just modify the other function to suit your single post needs.

[victor]

Thanks, a bit confused here though. A few things:

– Are you saying the above snippet only effects non-singular images? That is, images only on archives and not images in blogs? If so, I’m not seeing it being applied in either case when I inspect the page.

– Medium is a bit small for me. I’ve been playing with the setting height and width of images in the Customizer but ideally, I’d like the feature image to be largest.

– How are websites able to load these massive images instantly? Many seem to be under 100 kb despite perfect, enriched detail. Am I missing something?

[David]

If you follow the steps here then it should only load the image size you set.
If you’re not seeing that, then it maybe caches need clearing.

In the Customizer > Layout > Blog -> Featured Images, don’t mess with the width and height just select one of the image sizes.

Performance isn’t just related to the images. There are several improvements you could make to the site:

1, Load Google fonts locally:

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

2. Use an optimization plugin to optimize CSS to reduce render blocking.

3. Reduce the initial server response time by using Page Caching.

All of those things will reduce the work the browser has to do.

Then Images, just an example omn the /category/recipes/ page, the featured image sizes are between 130kb and 275kb in size. Which is quite high. A good desktop compression app could halve that

[victor]

Thank you! Few things:

– With the script above, I notice that even if I set it to a max-width of 1, there is no difference between that and 300 or many other higher numbers — at a certain breakpoint though, it renders the full quality image. What’s happening here?

– Is there a way to further reduce image size for just archive pages using those Snippets?

– Tried loading fonts locally, never seem quite right. I’m also just pulling one font currently.

– Tried render blocking stuff but it slowed things down, any recommendations?

– My host automatically caches as they internally use Litespeed Cache, I hope that’s sufficient!

– Before I even upload, I convert to webp and run them through Tinypng to compress them. Currently using Smush and Converter for Media to compress and serve as webp. Anything else I can do?

[David]

– With the script above, I notice that even if I set it to a max-width of 1, there is no difference between that and 300 or many other higher numbers — at a certain breakpoint though, it renders the full quality image. What’s happening here?

If you’re not seeing any change there then i assume there is a cache or CDN that needs flushing ?

– Is there a way to further reduce image size for just archive pages using those Snippets?

All those snippets should do is a) limit the sizes made available and b) prompt the browser to use a specific size. They don’t do anything to the actual images.

– Tried loading fonts locally, never seem quite right. I’m also just pulling one font currently.

One font can be damning for performance, as it has to make a 3rd party requests to the Google servers, and then make the request. This is one of the top of the list optimizations for me.

– Tried render blocking stuff but it slowed things down, any recommendations?

Considering you have litespeed caching, you should speak to the host about using some of its optimization features for reducing render blocking.

– Before I even upload, I convert to webp and run them through Tinypng to compress them. Currently using Smush and Converter for Media to compress and serve as webp. Anything else I can do?

Not really, i would assume that Smush does all that you need. Maybe speak to their support if theres any improvements to be made there.

[victor]

If you’re not seeing any change there then i assume there is a cache or CDN that needs flushing ?

I confirmed that at at certain breakpoints in the above snippet, pictures will render a different sized image. As you explained to me previously, images will load a different sized image depending on breakpoints, or am I wrong?

Also trying to wrap my head around how the two scripts you gave me interact.

[David]

OK, if your Right Click > Inspect one of the images, the browser developers tools will show you the HTML.
See here:

YELLOW
The width and height property are set by WordPress based upon the Size Image you choose eg. medium, large.... full
So for featured images you can choose the one you want in the Customizer > Layout > Blog.

GREEN
After that you see the green underlined URLs. Those are the src-set images. WP adds ALL available sizes for that image.
The max_srcset_image_width code i provided here tells WordPress to not include any images that are larger then the size you set in that code.

RED
This is the sizes attribute that prompts the browser with the size for each breakpoint and is what gets changed by the other snippet i provided.

Does that help ?

[victor]

Oh gosh David, seriously man, going way above and beyond here! Thank you!

GREEN
After that you see the green underlined URLs. Those are the src-set images. WP adds ALL available sizes for that image.
The max_srcset_image_width code i provided here tells WordPress to not include any images that are larger then the size you set in that code.

This is the part that was really bothering me, even now, “WP adds all available sizes for that image”, what if I uploaded only one size? Is WP doing, available size == a properly scaled image ?

TLDR: I’m trying to get to the core of why setting it to “1” doesn’t do anything / why there are explicit breakpoints with this variable.

Additional note: Is there a way to do what we did with the above script except targeting mobile?

[Manuel]

Not official support but I was a little bored and took a glance.

1. Those image sizes are humongous. For example, the main one clocks in at almost half a MB. Chop it down manually in PS yourself to under 100K It is just a plate of food. Can easily go down to 45K.

2. It appears you need to upgrade your host.

[David]

WordPress has a bunch of various image attachment sizes:

Thumbnail 150px square
Medium 300px
Medium Large 768px
Large 1024px
…

When you upload a new image WP will create any of those attachment sizes that are below the original image size.
e,g if you upload a 1200px wide image, then all of the above are created. If you uploaded a 500px image then only the medium and thumbnail are created.

There are several reasons for this. The two main ones are:
1. Developers can choose a specific image size for use in their code eg. the thumbnail size for a sidebar related post list.
2. An image can be responsive to various screen and display sizes to reduce file size. We are dealing with this here.

If you wanted you could have it so WP ONLY serves the original image you uploaded.
But what that cannot do is serve a different image just for mobile devices.

This is why WP added src-set in the image HTML. As it allows the browser to choose from different size images that best fit the device it is being viewed on. ie. this image for a small screen and this one for the larger screen.

Personally i would address the other issues i raised above so you improve the overall site performance and then revisit the images.

[Author]

Posts