Core/Dash -ulottuvuus: LCP Priority

Ulottuvuus: Resurssi: LCP Priority

LCP Priority -ulottuvuus segmentoi suorituskykytiedot sen perusteella, miten selain löysi ja priorisoi LCP-resurssin. Vaikka "Element Type" -ulottuvuus kertoo, mikä elementti on (Teksti vs. Kuva), tämä ulottuvuus kertoo, miksi selain viivytti sen lataamista.

Tämä on ensisijainen auditointityökalusi latausviiveelle (Load Delay). Se paljastaa, taisteleeko LCP-resurssisi kaistanleveydestä vai viivästyttävätkö virheelliset HTML-attribuutit sitä keinotekoisesti.

Prioriteettihierarkia

Selain määrittää latausprioriteetin jokaiselle resurssille. Tämä ulottuvuus yhdistää LCP-elementin yhteen viidestä tietystä lataustilasta, järjestettynä tuhoisimmasta (Lazy Loaded) optimaalisimpaan (Teksti/Korkea prioriteetti).

Tausta: Kun käyttäjä palaa sivullesi "Takaisin"- tai "Päivitä"-painikkeella, useimmat selaimet palauttavat hänet edelliseen pystysuuntaiseen sijaintiinsa. Jos tämä sijainti on näkyvän alueen alapuolella, optimoitu Hero-kuvasi ei ole enää LCP. Sen sijaan selain mittaa nykyisen näkymän suurimman elementin. Tämä luo väistämättömän joukon "Not Preloaded" -tapahtumia tietojoukkoosi. Ja se on täysin normaalia!

1. Lazy Loaded

Jos yli 10 % LCP-elementeistäsi esiintyy tässä ryhmässä, olet löytänyt ongelman. Laiskasti ladattavat kuvat lisätään jonoon paljon myöhemmin (hidas DOM-jäsennin eikä nopea esilatausskanneri). loading="lazy" -attribuutti ohjaa selainta odottamaan latauksen kanssa, kunnes asettelu (layout) on laskettu ja elementti on lähellä näkyvää aluetta.

Ratkaisu: Sinun on poistettava tämä latausattribuutti. LCP-elementtiä ei tulisi koskaan ladata laiskasti.

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

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

2. Not Preloaded

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

Vaikutus sivuston nopeuteen riippuu verkkosivusi monimutkaisuudesta. LCP-kuva joutuu resurssien kilpailujonoon. Jos sivullasi on paljon ladattavia skriptejä, fontteja, muita ei-laiskasti ladattavia kuvia tai tyylejä, selain saattaa viivyttää tämän kuvan lataamista, mikä lisää latausviivettä (Load Delay).

3. Preloaded

Tämä osoittaa, että resurssi löydettiin dokumentin head-osiossa olevan <link rel="preload"> -tunnisteen kautta. Nämä esilatauslinkit tarkoittavat pohjimmiltaan varhaista löytämistä, vaikka kuvaviittaus olisi haudattu syvälle DOM:iin tai piilotettu CSS-tiedostoon (taustakuva).

Esilataus on tehokkain tapa pakottaa varhainen lataus, mutta esilataus vaatii erillisen linkkitunnisteen ylläpitämistä, jonka on vastattava kuvan URL-osoitetta täsmälleen. Jos ne eroavat toisistaan, lataat resurssin kahdesti.

4. High fetchpriority

Tämä on nykyaikainen suunnittelustandardi. Selainta ohjeistettiin fetchpriority="high" -attribuutilla käsittelemään tätä tiettyä kuvaa kriittisenä resurssina.

Strategia: Tämä on tavoitetila kuvapohjaiselle LCP:lle. Se viestii tärkeydestä suoraan elementissä, nostaen sen muiden latausjonossa olevien resurssien yläpuolelle ilman manuaalisten esilataustunnisteiden ylläpitotaakkaa.

5. Not an Image

Tila: Tekstisolmu / SVG

LCP-elementti on tekstilohko (h1, p) tai raaka SVG. Tämä on ihanteellinen arkkitehtuurinen tila, koska teksti ei aiheuta lainkaan latausviivettä (Load Delay) (se on jo olemassa HTML-dokumentissa).

Optimointi: Jos LCP on tässä kategoriassa mutta silti hidas, pullonkaulana on yksinomaan renderöintiviive (Render Delay). Sinun on optimoitava kriittinen renderöintipolkusi (CSS/JS-esto) tai fonttien latausstrategiasi (font-display: swap), koska ladattavaa kuvatiedostoa ei ole.

Työnkulku: Latausviiveen (Load Delay) optimointi

Käytä tätä ulottuvuutta frontendin resurssistrategiasi vahvistamiseen.

1. Eliminoi laiska lataus (Lazy Loading): Suodata Lazy Loaded -tilan mukaan. Jos tämä arvo on yli 0 %, etsi komponentti, joka lisää loading="lazy" -attribuutin hero-kuvaan ja poista se. Tämä on yleistä CMS-malleissa, jotka soveltavat laiskaa latausta globaalisti kaikkeen mediaan.
2. Siirry käyttämään Fetchprioritya: Siirrä liikennettä Not Preloaded- ja Preloaded -tiloista High fetchpriority -tilaan. Korvaamalla <link rel="preload"> -tunnisteen fetchpriority="high" -attribuutilla siistit <head> -osiosi ja sidot prioriteettilogiikan suoraan komponenttiin.
3. Auditoi taustakuvat: Jos sinulla on paljon liikennettä Not Preloaded -tilassa ja LCP on taustakuva, selain löytää sen liian myöhään (vasta CSS:n jäsentämisen jälkeen). Sinun on refaktoroitava tämä HTML:n <img> -tunnisteeksi, jolla on fetchpriority="high", tai pakotettava Preload-otsikko.

Tekninen nyrkkisääntö

Jakautumatavoitteesi tälle ulottuvuudelle on tiukka:

• <10% Lazy Loaded
• > 90% High fetchpriority (kuvapohjaisille LCP:ille)
• 100% Not an image (tekstipohjaisille LCP:ille)

Kaikki "Not Preloaded" -tilaan osuva liikenne edustaa optimoimatonta tilaa, jossa luovutat resurssiprioriteetin hallinnan selaimen oletusheuristiikalle.