Search code examples
google-chromecore-web-vitals

Should I remove the as attribute in the link tag when preloading LCP images to get a high priority?


When preloading LCP images, should the as="image" attribute be removed to force the priority of Google Chrome to high? It is my understanding that the priority defaults to low.

Instead of this -

<link rel="preload" as="image" href="cool-lcp-image.avif" />

Should it be -

<link rel="preload" href="cool-lcp-image.avif" />

Solution

  • The as attribute should not be removed. If it is removed, the browser will not preload the resource.

    Generally speaking, a preloaded request will be one of the first requests made, regardless of resource priority - so altering resource priority shouldn't be a primary concern. (There also isn't a good mechanism for doing this at the moment - though priority hints would change this.)

    If it's an in-viewport image it will have high priority; if it's a out-of-viewport image it will have low priority.