// Import from the attribution build.import {onLCP} from 'web-vitals/attribution';
// Then register a callback to run after LCP.onLCP(({attribution}) => {  // If the LCP element is an image, send a request to the `/lcp-data`  // endpoint containing the page's URL path and LCP element selector.  if (attribution.lcpEntry?.element?.tagName.toLowerCase() === 'img') {    navigator.sendBeacon(      '/lcp-data',      JSON.stringify({        url: location.pathname,        selector: attribution.element,      })    );  }});复制代码

{  "url": "/articles/my-challenge-to-the-web-performance-community/",  "selector": "#post>div.entry-content>figure>a>img"}复制代码

// Read from the store.const myValue = await store.get('my-key');
// Write to the store.await store.put('my-key', 'Updated value...');复制代码

export default {  async fetch(request, env) {    if (url.endsWith('/lcp-data') && request.method === 'POST') {      return storePriorityHints(request, env.PRIORITY_HINTS);    }  },};
async function storePriorityHints(request, store) {  const {url, selector} = await request.json();
  // Determine if the visitor is on mobile or desktop via UA client hints.  const device =    request.headers.get('sec-ch-ua-mobile') === '?1' ? 'mobile' : 'desktop';
  // The key is the device joined with the URL path. If the LCP element  // can vary by more than just the device, more granularity can be added.  const key = `${device}:${url}`;
  // If the new selector is different from the old selector, update it.  const storedSelector = await store.get(key);  if (selector !== storedSelector) {    await store.put(key, selector);  }
  // Return a 200 once successful.  return new Response();}复制代码

export default {  async fetch(request, env) {    // If the request is to the `/lcp-data` endpoint, add it to the KV store.    if (url.endsWith('/lcp-data') && request.method === 'POST') {      return storePriorityHints(request, env.PRIORITY_HINTS);    }    // For all other requests use the stored LCP data to add the    // `fetchpriority` attribute to matching <img> elements on the page.    return addPriorityHintsToResponse(request, env.PRIORITY_HINTS);  },};
async function addPriorityHintsToResponse(request, store) {  const urlPath = new URL(request.url).pathname;  const device =    request.headers.get('sec-ch-ua-mobile') === '?1' ? 'mobile' : 'desktop';
  const hintKey = `${device}:${encodeURIComponent(urlPath)}`;
  const [response, hintSelector] = await Promise.all([    fetch(request),    store.get(hintKey),  ]);
  // If a stored selector is found for this page/device, apply it.  if (hintSelector) {    return new HTMLRewriter()      .on(hintSelector, new PriorityHintsHandler())      .transform(response);  }  return response;}
class PriorityHintsHandler {  #applied = false;  element(element) {    // Only apply the `fetchpriority` attribute to the first matching element.    if (!this.#applied) {      element.setAttribute('fetchpriority', 'high');      this.#applied = true;    }  }}复制代码

curl https://philipwalton.com/articles/my-challenge-to-the-web-performance-community/复制代码

<img data-src="image.jpg" class="lazyload" />复制代码

import {onLCP} from 'web-vitals/attribution';
onLCP((metric) => {  let dynamicPriority = null;
  const {lcpEntry} = metric.attribution;
  // If the LCP element is an image, check to see if a different element  // on the page was given the `fetchpriority` attribute.  if (lcpEntry?.url && lcpEntry.element?.tagName.toLowerCase() === 'img') {    const elementWithPriority = document.querySelector('[fetchpriority]');    if (elementWithPriority) {      dynamicPriority =        elementWithPriority === lcpEntry.element ? 'hit' : 'miss';    }  }  // Log whether the dynamic priority logic was a hit, miss, or not set.  console.log('Dynamic priority:', dynamicPriority);});复制代码