Look for fetchPriority instead of importance

Open
  • Is something wrong?
#103 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
35/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript
Domain
performance

Research direction

Open lib/dom/performance/largestContentfulPaint.js at lines 44-49 and inspect how the Coach checks an LCP img element's priority attribute. Verify the check against the fetchPriority value shown in the issue, then confirm that an image using fetchpriority="high" no longer loses the 5 points.

Written by the indexing model from the issue text.

Description

In https://github.com/sitespeedio/coach-core/blob/aa2654879533af3ec0381acaf9e7f0b1bfe84c30/lib/dom/performance/largestContentfulPaint.js#L44C1-L49 The Coach will take 5 points if the LCP element is an img and it misses the importance="high" attribute.

According to https://web.dev/fetch-priority/#history, this attribute is now fetchPriority:

Fetch Priority was first experimented with in Chrome as an origin trial in 2018 and then again in 2021 using the importance attribute. At that time it was known as Priority Hints. The interface has since changed to fetchpriority for HTML and priority for JavaScript's Fetch API as part of the web standards process. To reduce confusion we now refer to this API as Fetch Priority.

I've tried adding both attributes to get a perfect score there, but I think doesn't work in recent versions of Chrome as it already moved to fetchPriority (testing manually in the JS console, markup for lcp_image is <img importance="high" fetchpriority="high" src=...):

lcp_image.importance
undefined
lcp_image.fetchPriority
'high'
Dominant language
JavaScript
Stars
3
Forks
6
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from sitespeedio/coach-core

All issues in sitespeedio/coach-core

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.