Skip to content

Fetchpriority - add a fetchpriority=high attribute to the non-lazy image(s) #477

@adamsilverstein

Description

@adamsilverstein

Overview

  • Proposed module name: Fetchpriority
  • Proposed module slug: fetchpriority
  • Proposed module owner GitHub username(s): pbearne, adamsilverstein

About the module

Adding the fetchpriority attribute high attribute to the LCP (or first large) image on the page should improve the page's LCP, because it tells the browser to prioritize loading that image.

We can build this as a module (possibly experimental), then measure its impact on performance. Note: as of this writing, fetchpriority is only supported in chrome and edge.

Purpose

Scope

WordPress already determines which image is most likely to be the "LCP" image in wp_get_loading_attr_default, excluding the loading=lazy attribute. We can leverage this to add fetchpriority=high to those same images, which should cause the browser to prioritize their load.

Rationale

fetchpriority is a new approach to priority hinting that improves on features like preload. Adding this module will let the performance team test this feature as a potential improvement for core.

Other

Read this document for the details: https://web.dev/priority-hints/#the-fetchpriority-attribute

Metadata

Metadata

Assignees

Labels

[Type] FeatureA new feature within an existing module

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions