CoreDash-ulottuvuus: LCP Priority

Ulottuvuus: Resurssi: LCP Priority

LCP Priority -ulottuvuus segmentoi suorituskykydataa sen perusteella, miten selain löysi ja priorisoi LCP-resurssin. Kun "Element Type" -ulottuvuus kertoo, mikä elementti on (teksti vs. kuva), tämä ulottuvuus kertoo, miksi selain viivästytti sen lataamista.

Tämä on ensisijainen auditointityökalusi Load Delay -viiveen tutkimiseen. Se paljastaa, taisteleeko LCP-resurssisi kaistanleveydestä vai viivästyttävätkö virheelliset HTML-attribuutit sen lataamista keinotekoisesti.

Prioriteettihierarkia

Selain määrittää latausprioriteetin jokaiselle resurssille. Tämä ulottuvuus kartoittaa LCP-elementin yhteen viidestä tietystä lataustilasta, jotka on järjestetty haitallisimmasta (Lazy Loaded) optimaalisimpaan (Text / High Priority).

Taustaa: Kun käyttäjä palaa sivullesi "Takaisin"- tai "Reload"-painikkeella, useimmat selaimet palauttavat hänet aiempaan pystysuuntaiseen sijaintiin. Jos tämä sijainti on foldin alapuolella, optimoitu Hero-kuvasi ei ole enää LCP. Sen sijaan selain mittaa nykyisen viewportin suurimman elementin. Tämä luo väistämättömiä "Not Preloaded" -tapahtumia tietoaineistoosi. Ja se on täysin normaalia!

1. Lazy Loaded

Jos yli 10 % LCP-elementeistäsi kuuluu tähän kategoriaan, olet löytänyt ongelman. Lazy loading -kuvat asetetaan jonoon paljon myöhemmin (hidas DOM-jäsennin eikä nopea preload-skanneri). loading="lazy" -attribuutti ohjeistaa selaimen odottamaan latausta, kunnes asettelu on laskettu ja elementti on lähellä viewportia.

Korjaus: Sinun on poistettava tämä loading-attribuutti. LCP-elementtiä ei saa koskaan ladata laiskasti (lazy-loaded).

<!-- VIRHEELLINEN -->
<img src="hero.jpg" loading="lazy" alt="Hero-kuva" />

<!-- OIKEA -->
<img src="hero.jpg" fetchpriority="high" alt="Hero-kuva" />

2. Not Preloaded

Tämä edustaa selaimen oletuskäyttäytymistä. Selain löysi kuvan HTML-koodista alkuperäisen jäsennyksen aikana, mutta sille ei annettu mitään merkkiä priorisoida sitä muiden kuvien edelle.

Vaikutus sivun nopeuteen riippuu verkkosivusi monimutkaisuudesta. LCP-kuva joutuu resurssien kilpailujonoon. Jos sivullasi on ladattavana monia skriptejä, fontteja, muita ei-lazy-kuvia tai tyylejä, selain saattaa viivästyttää tämän kuvan lataamista, mikä lisää Load Delay -viivettä.

3. Preloaded

Tämä osoittaa, että resurssi löydettiin dokumentin head-osiossa olevan <link rel="preload"> -tagin kautta. Tämä preload-linkki tarkoittaa periaatteessa varhaista löytämistä, vaikka viittaus kuvaan olisi haudattu syvälle DOM-puuhun tai piilotettu CSS-tiedostoon (taustakuva).

Preloading on tehokkain tapa pakottaa varhainen lataus. Preloading vaatii erillisen link-tagin ylläpitoa, jonka on vastattava kuvan URL-osoitetta täsmälleen. Jos ne eroavat toisistaan, resurssi ladataan kahdesti.

4. High fetchpriority

Tämä on nykyaikainen suunnittelustandardi. Selaimelle annettiin ohje fetchpriority="high" -attribuutin kautta käsitellä tätä nimenomaista kuvaa kriittisenä resurssina.

Strategia: Tämä on tavoitetila kuvapohjaiselle LCP:lle. Se viestii tärkeydestä suoraan elementissä, nostaen sen muiden resurssien edelle latausjonossa ilman manuaalisten preload-tagien ylläpitotaakkaa.

5. Not an Image

Tila: Text Node / SVG

LCP-elementti on tekstilohko (h1, p) tai SVG-koodia. Tämä on ihanteellinen arkkitehtoninen tila, koska tekstistä ei aiheudu lainkaan Load Delay -viivettä (se on jo mukana HTML-dokumentissa).

Optimointi: Jos LCP-elementtisi kuuluu tähän kategoriaan mutta on silti hidas, pullonkaulana on yksinomaan Render Delay. Sinun on optimoitava Critical Rendering Path (CSS/JS-blokit) tai fonttien latausstrategia (font-display: swap), sillä ladattavaa kuvatiedostoa ei ole.

Workflow: Load Delay -viiveen optimointi

Käytä tätä ulottuvuutta frontend-resurssistrategiasi vahvistamiseen.

1. Poista Lazy Loading: Suodata tilan Lazy Loaded mukaan. Jos tämä arvo on suurempi kuin 0 %, etsi komponentti, joka lisää loading="lazy" -attribuutin hero-kuvaan, ja poista se. Tämä on yleistä CMS-malleissa, jotka soveltavat lazy loadingia globaalisti kaikkiin medioihin.
2. Siirry Fetchpriorityyn: Siirrä liikennettä tiloista Not Preloaded ja Preloaded tilaan High fetchpriority. <link rel="preload"> -tagin korvaaminen fetchpriority="high" -attribuutilla siivoaa <head>-osiota ja kytkee prioriteettilogiikan suoraan komponenttiin.
3. Auditoi taustakuvat: Jos sinulla on paljon liikennettä tilassa Not Preloaded ja LCP-elementtisi on taustakuva, selain löytää sen liian myöhään (vasta CSS:n jäsennyksen jälkeen). Sinun on muutettava tämä HTML-koodin <img>-tagiksi, jossa on fetchpriority="high", tai pakotettava Preload-header.

Insinöörin peukalosääntö

Jakelutavoitteesi tälle ulottuvuudelle on tiukka:

• <10 % Lazy Loaded
• > 90 % High fetchpriority (kuva-LCP:ille)
• 100 % Not an image (teksti-LCP:ille)

Kaikki liikenne, joka kuuluu kategoriaan "Not Preloaded", edustaa optimoimatonta tilaa, jossa luovutat resurssien priorisoinnin hallinnan selaimen oletusheuristiikoille.