Core/Dash-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 kyseessä (teksti vs. kuva), tämä ulottuvuus kertoo, miksi selain viivästytti sen lataamista.

Tämä on ensisijainen auditointityökalusi Load Delay -ongelmille. Se paljastaa, taisteleeko LCP-resurssisi kaistanleveydestä vai viivästytetäänkö sitä keinotekoisesti virheellisillä HTML-attribuuteilla.

Prioriteettihierarkia

Selain määrittää latausprioriteetin jokaiselle resurssille. Tämä ulottuvuus yhdistää LCP-elementin yhteen viidestä lataustilasta, järjestettynä tuhoisimmasta (Lazy Loaded) optimaalisimpaan (Text/High Priority).

Tausta: Kun käyttäjä palaa sivullesi "Back"- tai "Reload"-painikkeen kautta,  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ömän joukon "Not Preloaded" -tapahtumia dataasi.  Ja se on täysin hyväksyttävää!

1. Lazy Loaded 

Jos yli 10 % LCP-elementeistäsi päätyy tähän ryhmään, olet tunnistanut ongelman. Lazy loading -kuvat asetetaan jonoon paljon myöhemmin (hitaan DOM-jäsentimen toimesta, ei nopean preload-skannerin). loading="lazy" -attribuutti ohjeistaa selaimen odottamaan  latausta, kunnes asettelu on laskettu ja elementti on lähellä viewportia.

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

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

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

2. Not Preloaded

Tämä edustaa selaimen oletustoimintaa. Selain löysi kuvan HTML:stä alustavan jäsentämisen aikana, mutta sille ei annettu signaalia priorisoida sitä muiden kuvien edelle.

Vaikutus sivun nopeuteen riippuu verkkosivusi monimutkaisuudesta. LCP-kuva joutuu resurssien kilpailujonoon. Jos sivullasi on paljon skriptejä, fontteja, muita ei-laiskasti ladattavia kuvia tai tyylejä ladattavana, selain saattaa viivästyttää tämän kuvan lataamista, mikä kasvattaa Load Delayta.

3. Preloaded

Tämä osoittaa, että resurssi löydettiin dokumentin head-osiossa olevan <link rel="preload"> -tagin kautta. Tämä preload-linkki tarkoittaa käytännössä aikaista löytämistä, vaikka kuvaviittaus olisi haudattu syvälle DOM:iin tai piilotettu CSS-tiedostoon (taustakuva).

Preloading on tehokkain tapa pakottaa aikainen lataus, mutta se vaatii erillisen link-tagin 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 tekninen standardi. Selain ohjeistettiin fetchpriority="high" -attribuutin avulla käsittelemään 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: Tekstisolmu / SVG

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

Optimointi: Jos LCP:si on tässä kategoriassa mutta silti hidas, pullonkaula on yksinomaan Render Delay. Sinun on optimoitava Critical Rendering Path (CSS/JS-blokkaukset) tai fonttien latausstrategia (font-display: swap), koska ladattavaa kuvatiedostoa ei ole.

Työnkulku: Load Delay -optimointi

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

1. Eliminoi Lazy Loading: Suodata Lazy Loaded -kohdan 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-pohjissa, jotka soveltavat lazy loadingia globaalisti kaikkeen mediaan.
2. Siirry Fetchpriorityyn: Siirrä liikennettä kohdista Not Preloaded ja Preloaded kohtaan High fetchpriority. <link rel="preload"> -tagin korvaaminen fetchpriority="high" -attribuutilla siistii <head>-osiotasi ja sitoo prioriteettilogiikan suoraan komponenttiin.
3. Auditoi taustakuvat: Jos sinulla on paljon liikennettä kohdassa Not Preloaded ja LCP:si on taustakuva, selain löytää sen liian myöhään (vasta kun CSS on jäsennetty). Sinun on refaktoroitava tämä HTML <img> -tagiksi, jossa on fetchpriority="high", tai pakotettava Preload-otsikko.

Tekninen nyrkkisääntö

Jakaumatavoitteesi tälle ulottuvuudelle on tiukka:

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

Kaikki "Not Preloaded" -kohtaan putoava liikenne edustaa optimoimatonta tilaa, jossa luovutat resurssien priorisoinnin hallinnan selaimen oletusheuristiikalle.