Web performance: prevent wasteful hidden image requests (display: none)

[my401k]

Hi there,

When selecting “hide” on a mobile device using cornerstone, is there a way to make sure that image isn’t loaded by the browser?

To explain, i ran a google speed and see images that i’ve hidden on mobile (in body and footer) still loading.

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fglassjacobson2.staging.wpengine.com

I read this article and got some context: https://www.swimburger.net/blog/web/web-performance-prevent-wasteful-hidden-image-requests

But is this something you could build into the builder to help page speed?

Thanks,
Austin

[rad]

Hi Austin,

Thanks for reaching out.

With responsive design, it’s unavoidable especially if the visibility of one’s element is controlled by @media. Styling happens on browser side which means it’s already loaded there before you can even remove it. And removal should be done on the server but @media is only applicable for browser hence removing it from server side will forever remove it on every device.

The solution is never to add the image regardless of the device just to save bandwidth. OR :

And loaded images are only related to download size which only affects the bandwidth. Which you can bypass by caching the images within the browser, or use CDN to host your images.

Which means, you can have many hidden as much as you want but they will only load once if it’s cached by the browser. The browser will prevent re-downloading of the already cache images. The CDN will also help to distribute your images to share bandwidth with the actual site, hence, preventing the browser from downloading the image directly from your site but from CDN.

Thanks!