Serving resized images on mobile - page speed problem

[Varys]

Ok, here is my problem.

My site is image-heavy and I have 90% traffic coming from mobile devices.

Lets take the most popular post on my site as an example. That post have ~70 images on one page.

I always resize images as much as I can without loosing too much quality, but problem is with mobile devices.

My Google page speed score for mobile is 15! (for that page)

I tried 15 fucking Worpdress plugins (Hammy for example) that should generate resided images based on content width. And none of them is working! It is driving me crazy. I set few breakpoints and no matter what, I always get the smallest image served, based on my smallest breakpoint.

I first tried on my site, not working. Disabling all plugins, not working. Fresh local worpdress install with default theme, still not working. What the fuck.

Anyone have experience with this? Is this even good solution for my problem?

 

[CCarter]

Isn't there some sort of javascript that doesn't load the image until you scroll to that point, therefore reducing the initial loading of all the images when users land on it? I could swear I had one on a couple of my old sites, but it was custom. I know i saw one on my competitor's sites a long time ago that was running wordpress. Might be worth looking into if it does reduce the load time and increase initial speed.

 

[SmokeTree]

Isn't there some sort of javascript that doesn't load the image until you scroll to that point, therefore reducing the initial loading of all the images when users land on it?

Here's a link to the lazy loading plugin that does just that: https://github.com/tuupola/jquery_lazyload

 

[Ryuzaki]

Lazy Loading would definitely help for users but won't change your Google score, and will likely still affect your mobile rankings.

Your media queries might not be set up properly, or you might be forcing a viewport size with zooming set to a default. You could double check those things.

I'm waiting for HTML5 to hurry up and create <picture> that's supposed to do this for us.

I think it's "released" but only the newest versions of Chrome support it. So there's no point in using it yet.

<picture>
<source
media="(min-width: 650px)"
srcset="images/kitten-stretching.png,
images/kitten-stretching@1.5x.png 1.5x,
images/kitten-stretching@2x.png 2x">
<source
media="(min-width: 465px)"
srcset="images/kitten-sitting.png,
images/kitten-sitting@1.5x.png 1.5x
images/kitten-sitting@2x.png 2x">
<img
src="images/kitten-curled.png"
srcset="images/kitten-curled@1.5x.png 1.5x,
images/kitten-curled@2x.png 2x"
alt="a cute kitten">
</picture>
​

Sorry for the formatting, but that should get the point across. It's mobile first and then has media queries for the larger viewports. You could probably achieve this yourself using Wordpress and some jQuery.

It'd be something like telling Wordpress to auto-generate a small mobile size for phones and to then detect viewport width. If it's smaller than desktop, have the jQuery tag on the -200x or whatever Wordpress auto tags when it resizes the picture to the end of the file path of the image. Then you could use something like "width: 100%;" on the CSS to have it stretch to fill up the size on tablets. You'd get some slight blur but it'd be faster. Or you could generate several sizes using the same procedure.

Yeah, this is definitely a pain. On my new site, I designed with this in mind, but it's still not perfect. It's a middle ground somewhat. Only time will heal this wound for us, I think.

 

[Varys]

Thanks guys. Looks like I will use lazy loading for better user experience. If Google decides to punish me, so be it. I any case, I am focusing on other traffic sources than Google, for now.