web.dev icon indicating copy to clipboard operation
web.dev copied to clipboard

Replace prefetch with preload in 'Responsive images'

Open RomFouq opened this issue 3 years ago • 4 comments
trafficstars

Describe the bug The guide Responsive images advises to use prefetch to prioritize downloading some images. However, prefetch is used to pre-download resources useful for the next navigation, not the current page. preload should be used instead, which does have the effect of prioritizing the image for the current page.

Expected behavior The two occurences of prefetch and the occurence of pre-fetch should read preload in Responsive images.

RomFouq avatar Jun 24 '22 12:06 RomFouq

I believe the original author was @adactio, but I'm not sure who is responsible for maintenance/fixes for this content.

Assigning to @rachelandrew for triage.

jeffposnick avatar Jun 24 '22 13:06 jeffposnick

My two: prefetch can be used to queue up downloading of resources used for the current navigation, it's just a lower priority fetch than preload.

malchata avatar Jun 25 '22 18:06 malchata

Here the article discusses 'important images,' images that should be loaded as early as possible, e.g. hero images. prefetch indicates to the browser that the resource can be useful a following navigation, but resources of the current page of course have higher priorities, since rendering the current page is more important than preparing for a future one. So prefetching a resource used in the current page is not useful, as it would be loaded normally anyway (it should be discovered by the preload scanner), before getting prefetched.

In the case of the article, preloading is clearly the value to use, as we want to load the image as early as possible, with high priority. It is also the strategy recommended in Preloading responsive images.

RomFouq avatar Jul 01 '22 12:07 RomFouq

Any update on this? I really think this should be corrected, as this page is highly ranked when searching for 'responsive images', possibly misleading beginners on a topic which can significantly affect perceived page load speed. It is pretty clear that in the use case of the article, prefetch should be replaced by preload.

RomFouq avatar Sep 16 '22 09:09 RomFouq

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. To prevent this from happening, leave a comment.

stale[bot] avatar Dec 21 '22 02:12 stale[bot]