The first teaser image of a tag index or page list is lazy while it is in view

Aperta Adatta ai principianti
  • Qualcosa non va?
#698 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
75/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
javascript
Ambito
frontend, performance

Direzione di ricerca

Leggi l’implementazione di sizeImages() e le modifiche in #684 e #672 per capire come vengono impostati gli attributi di caricamento delle immagini. Verifica come viene selezionata la prima immagine dopo l’header negli indici dei tag e negli elenchi di pagine, poi controlla che venga caricata eager mentre le immagini successive mantengono il caricamento lazy. Il lavoro è completato quando la prima immagine teaser non ha più loading="lazy" e le immagini sottostanti mantengono il comportamento attuale.

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

Descrizione

Component: User interface Impact: Low Level: Easy Pagetype: Peer reviewed article Type: Bug Value: Visitors

With #684 (#681), the images of a page get loading="lazy" except the first, which is in view. The featured image of an article teaser, in a tag index or page list, is rendered with loading="lazy" already (#672). sizeImages() keeps attributes that are set, so on a tag index the first teaser image, at the top of the content, is lazy too.

The browser then waits for layout before it fetches the image that is usually the Largest Contentful Paint. Lighthouse reports "LCP request discovery" and "Largest Contentful Paint image was lazily loaded".

On a test copy of a site, about 150 images in view were lazy, mostly the first teaser image of a tag index.

Fix: sizeImages() removes loading="lazy" from the first image after the header, so it loads at once whoever set it. The images below it keep their lazy loading.

🤖 Generated with Claude Code

Lingua principale
JavaScript
Stelle
5
Fork
9
Merge medio
18h 49m
PR unite (30g)
13

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

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 PlanBCode/hypha

Tutte le issue di PlanBCode/hypha

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.