Ability is needed to capture styles of elements to ensure proper optimization

Aperta
  • Qualcosa non va?
#1,892 3 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend, performance

Direzione di ricerca

Inizia esaminando gli scenari CodePen e le issue collegate relative a Intersection Observer, quindi segui come Image Prioritizer utilizza i dati degli elementi durante le fasi initialize e finalize. Definisci l'ambito di captureElementStyles, lo schema degli elementi computedStyle e le misure di salvaguardia delle prestazioni; il lavoro è completo quando i casi di visibilità e content-visibility possono essere distinti senza compromettere le prestazioni della pagina.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

[Plugin] Image Prioritizer [Plugin] Optimization Detective [Type] Enhancement

Sometimes the Intersection Observer doesn't provide all of the information needed in order to perform optimizations. For example, images which have visibility:hidden, display:none, or opacity:0 should in theory get fetchpriority=low when they are in the initial viewport per https://github.com/WordPress/performance/issues/1587, but these won't

Conversely, from https://github.com/WordPress/performance/issues/1308#issuecomment-2560430599, images which are inside of elements which have content-visibility:auto will have a zeroed-out boundingClientRect which Image Prioritizer then interprets as being in the initial viewport (since the boundingClientRect.top of 0 is less than viewport.height) and so they are getting fetchpriority=low when they should actually get loading=lazy.

These issues should perhaps have a way to efficiently query the computed style of certain elements to store their properties with the element in URL Metrics. There could be an async getComputedStyle function exported to the initialize and finalize async functions in extensions which could include some additional performance safeguards, like returning a Promise that involves requestAnimationFrame() or maybe even first requestIdleCallback(). Calling getComputedStyle() can trigger a layout calculation (reflow), so we need to be careful to not negatively impact the performance of the page.

I put together a Codepen that shows what Intersection Observer reports for various scenarios: https://codepen.io/westonruter/pen/zxYoNJP?editors=1111

Notice importantly that elements with visibility:hidden and opacity:0 are considered fully visible as far as Intersection Observer is concerned, leading to them not getting fetchpriority=low. And notice how the element with content-visibility:auto has a boundingClientRect with zeroed out values, leading it to not get loading=lazy by Image Prioritizer.

In addition to the possibility of a new JS API, we should extend the element schema to include a computedStyle object. In fact, let's say instead of getComputedStyle() there was a captureElementStyles() function passed to initialize and finalize. It could take two args: the XPath of the element and an array of the styles properties to capture from the computed style. This could then automatically extend the computedStyle object of the element. Since the computedStyle object would be a core property it would not be available for extendElementData() to override. Image Prioritizer should do the computed style capturing should be done during initialize, since we want to know whether an image is visible up front.

Lingua principale
PHP
Stelle
467
Fork
171
Merge medio
13h 21m
PR unite (30g)
32

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di WordPress/performance

Tutte le issue di WordPress/performance

Issue simili

Altre issue su PHP

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.