Desktop header image is part of mobile load - slow speed

[TomSnow]

We're redesigning our site.

UX guy used a different header image for desktop and for mobile respectively.

This desktop image is still part of the mobile load even though it doesn't appear.

Time to interactive and FCP are pretty slow.

I checked the waterfall and Desktop Image is loading before the important mobile content even though it's not even part of the mobile content.

So my two choices seem to be:

1) Choose the same image for both mobile and desktop (I have to check with UX if this is possible dimension-wise)

2) Lazy load the desktop image on mobile. But don't you think this will still slow down page load too much?

Any advice on which to do? Or why the desktop image is even loading on mobile?

I'm responsible for a complete turn around of this old site, and need to make sure page speed is at least moderate. (The slower the speed and more of a ranking factor it becomes).

Thanks!

[Dave_Hybrid]

Pretty sure display:none won’t load it, depends on implementation though.

Or use a mobile detect script and swap up the html/css class based on device.

[mobiledetect.net...]

[Wilburforce]

why the desktop image is even loading on mobile?

In general (and by design, in order to maximise rendering speed) browsers load all files set by @media in the page head irrespective of whether they apply before attempting to render the page.

Unless they are page-specific you'll stand a better chance if you defer @media decisions to a single stylesheet so only one stylesheet-fetching trip to the server is needed, and as the styleesheet has already been loaded when the browser starts to render the page it is less likely to fetch images that have been ruled out by the stylesheet.

However, your best bet for images (such as the header image) that do not from part of the page narrative is to use a background image and use CSS either to display it as different fixed sizes according to screen-size range (e.g. mobile, tablet, desktop) or to make it scalable as a percentage of screen-width (so a 100% image fills the available width and scales with window size). That way, the browser can't load unwanted images and you get a truly responsive display. You'll get the best displayed resolution if the actual image size equals the maximum displayed size (in pixels), so desktop version shows the image at 100% of is actual size.

Personally, on a related note, I use SSI for content common to all pages, as this allows it to be edited in one place, and forces the latest version to be displayed. One potential disadvantage of this is that SSI files can't be cached (so are reloaded every time a new page is opened), but images loaded from the SSI file can be cached, so as long as you use fairly efficient html - my own SSI comprehensive drop-down menu is only 15k - it is unlikely to hinder load-speed.

Speed-testers - including Google's - don't "see" SSI files: as the name implies, the file is stitched into the rendered document by the server (not "fetched" as a separate round-trip from the browser), so you'll get full speed scores anyway.

[Dimitri]

<img srcset="..." ...>

or

<picture>...</picture>

[levo]

Use a lazyloading solution that doesn’t load hidden images.

[developers.google.com...]

lazysizes (one of the examples from Google’s article) only loads visible images and would solve your problem.

[TomSnow]

Hi Guys,

Thanks for all of your solutions and explanations.

One last thing, the desktop header image is about 1MB (according to page speed insights). When I actually look at the file size in my image viewer, it's 5MB. When I compress, it only goes down to 1MB. Isn't this way to big, even for desktop?

I feel I should tell UX to just redesign with a smaller header.

This is a big boy that covers the width of the screen, and lengthwise goes from top of page to beneath the fold.

What do you think?

[Wilburforce]

The UX should be your primary concern. It takes away load speed*. What does it add?

^{*It probably also makes text less easy to read, and key visual landmarks - links, features - less easy to see.}

[levo]

Depends on the website and the audience. Some of the images on Google's Design blog is more than 1MB and rightfully so. [design.google...]

1- You could define different dimensions for different pixel densities (1280x1024 for 1x and 2560x2048 for 2x)
2- Find your sweet spot for compression (Mine is -sampling-factor 4:2:2 -quality 85), you can also decrease the quality a bit for retina images.

[lucy24]

Pretty sure display:none won’t load it

It will load. I have personally tried this on a page using a large background image that isn’t supposed to display on smaller viewports, so no point in loading it.

If the image is defined by {background} in CSS, setting {background: none;} for the relevant viewport size (easy to do in responsive CSS) will prevent it from loading.

[Dimitri]

And not to forget "mobile-first" css : [webmasterworld.com...]

[Wilburforce]

@Dimitri

My suggestion, reading your referred thread, would be to do it thus:

On page:

<head>
...
<link rel="stylesheet" type="text/css" href="https://www.mysite.com/stylesheet-name.css">
...
</head>

In stylesheet-name.css:

@media all{
/* styles that apply to all screen sizes */
}
@media all and (max-width:720px){
/* styles that apply only to screen sizes 720px and below */
}
@media all and (min-width:721px){
/* styles that apply only to screen sizes 721px and above */
}

It is obviously also possible to set any number of intermediate sizes, e.g.:

@media all and (min-width:601px) and (max-width:720px){
/* styles that apply only to screen sizes from 601px to 720px */
}

They can also overlap, as long as styles set in any size range are unique to that range.

That way you don't apply styles in one size that are overwritten in another. The .xyz example in the other thread is an example - whichever way round you do it - of setting a style and then overwriting it. While it is better in that case that the mobile version is the one that only applies the style once, it is best that all versions only do it once.

@TomSnow

If you HAVE to have a background image as you are using it, make it scalable (totally responsive), e.g.:

On the stylesheet:

@media all{
.header{background:url(https://www.mysite.com/header-sprite.png);background-size:100%;display:inline-block;}
.photo{background-position:left 0 top 0;width:100%;padding-bottom:42%;height:0;}
/* left 0 top 0 assumes the top left corner of the displayed image is the top left corner of the actual image */
/* you need to set padding-bottom to crop the image in the right place, and might have to play around with it to get it right */
}

On the page:

<div style="width:100%" class="header photo">
<!--Text and other content that displays over the image goes here-->
</div>

The actual image should be the same width in pixels as your maximum screen width. It will then resize (keeping aspect ratio) to fill any smaller width. That way you only load one image once.

@Mods

I'm not sure that this was ever a Google SEO question.