2

I have a banner which appears at the top fold of the page. To improve my LCP score, I am preloading the banner image to make it as a critical resource but I can see that for my mobile resolution, the tablet, mobile version of banner image is preloaded.

Please find below the markup of my banner image

`
            <picture><source srcset="mobile.jpg" media="(max-width: 767px)">
            
            
                <source srcset="tablet.jpg" media="(max-width: 1024px)">
            
            <!-- [if IE 9]></video><![endif] -->
            <img src="/desktop.jpg" width="1920" height="1080" alt="Kia Sportage">
        </picture>`

I am using below preloads to load images as per viewport sizes:

<link rel="preload" href="mobile.jpg" as="image" importance="high" media="(max-width: 767px)">
<link rel="preload" href="tablet.jpg" as="image" importance="high" media="(min-width: 768px) and (max-width: 1024px)">
<link rel="preload" href="desktop.jpg" as="image" importance="high" media="(min-width: 1025px)">

For Tablet, Desktop size viewport I can see respective images getting preloaded but for mobile resolution I see that mobile.jpg and tablet.jpg is loaded and in console I can see Chrome complaining with below warning:

The resource tablet.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Am I missing something here?

Villie
  • 261
  • 3
  • 18
  • With the question about Chrome, I've experienced errors in the console which are not real. With Firefox too. There might be a few more details about that if you Google it. I did manage to find the following question that might help with regard to `as-value`. https://stackoverflow.com/questions/50593084/link-rel-preload-must-have-a-valid-as-value – Cutey from Cute Code Mar 10 '22 at 07:00
  • but I have added valid as="image" attribute to the tag. – Villie Mar 10 '22 at 07:03
  • I am not 100% sure about this but have you tried `as="img"`. I am really clutching at straws though. – Cutey from Cute Code Mar 10 '22 at 07:06
  • as="img" is an invalid value. :( – Villie Mar 10 '22 at 07:09
  • Yeah I somehow thought that might be the case, sorry. Sit tight, more people will be looking as the day goes by. – Cutey from Cute Code Mar 10 '22 at 07:38

1 Answers1

2

I found the cause! Apparenntly The meta tag <meta name"viewport" content=”width=device-width, initial-scale=1"> was defined way below in head tag in which case the viewport has not been configured when the media query is evaluated.

Villie
  • 261
  • 3
  • 18