Pagespeed is giving me a 95, but my site loads slowly

#1

I’m not sure why but it seems like something is blocking all the images from loading right away. I eliminated all the ‘render-blocking resources’ I could and all that’s left are a couple stylesheets, a Google font, and jQuery. I tried removing the Google font, but it still seems like something is blocking the images. Is my site loading slowly for anyone else? Can anyone give me any suggestions to help make my images load faster? I’ve done all I could by optimizing them to webp.

Here is the site in question.

#2

It looks about as fast as it’s going to get. There’s a lot of .js files, but Rocket Loader and Cloudflare Caching looks like they’re going their jobs.
54%20PM

#3

I’m getting good results too which is confusing me because when I load the site, especially on mobile, sometimes the images take like 8 seconds to load and they all show up at once. Is this normal behavior since there are 30+ images on that page?

#4

It’s HTTP/2, so it will load a ton of them in parallel, but some images may be deferred depending on what is calling it. Some of the slower ones weren’t cached, but for subsequent loads, they were much faster.

#5

I see an issue where your images appear on the screen almost instantly, then disappear, and appear again. I’ve had a similar issue a while back on my site, but can’t remember what exactly made the issue go away (will update if I remember).

Please see the screencast: https://www.youtube.com/watch?v=f6ArfPiEM2o

If you open your site with Chrome dev tools and set the speed to 3g slow, you’ll see this in a more dramatic way.

1 Like
#6

Ok, thanks for looking into it.

#7

That’s strange. If you figure out what was causing it for you, please do let me know.

1 Like
#8

This sounds like a render reflow issue from a css rule firing after initial paint.
Many times, a higher Speed Score doesn’t yield a faster site.

2 Likes
#9

Yeah, I’ve realized that as my site loads painfully slow. Any idea what I can do to reduce this “reflow?”

#10

I’m mobile right now so I can’t give tailored tips. Google’s lighthouse docs give a good lesson on speed work. Ignore PageSpeed and Yslow for now.

#11

Thanks, jules. I audited my website and it looks like the biggest issue is the fact that offscreen images aren’t being deferred which I suspected. They recommend lazy-loading my images but unfortunately the theme author who I spoke to says it’s impossible since the page has a masonry effect. Maybe I should find a new theme. Thanks, for the tip, anyway.

1 Like
#12

If you know the exact dimensions of each image you can probably still use a lazy loading. Masonry should flow based on the coded image sizes on the preload image. But I guess that depends on the masonry plugin.

closed #13

This topic was automatically closed after 30 days. New replies are no longer allowed.