web.dev
web.dev copied to clipboard
Replace prefetch with preload in 'Responsive images'
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.
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.
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.
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.
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.
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.