Dimensjon: Resource: Element Type LCP (lcpet)
Dimensjonen Element Type (LCP) (lcpet) kategoriserer noden for Largest Contentful Paint i en av fire arkitektoniske klasser: text, image, background-image, eller video.Mens dimensjonen Attribution Element peker ut den nøyaktige DOM-noden, dikterer dimensjonen Element Type din overordnede tekniske strategi. LCP er summen av fire tidsintervaller: TTFB, Load Delay, Load Time, og Render Delay. Element Type forteller deg hvilke av disse intervallene som skader poengsummen din, slik at du kan velge riktig optimaliseringsprotokoll uten å gjette.
Optimalisere Core Web Vitals etter LCP-elementtype
Etter å ha forbedret TTFB, som er uavhengig av LCP-elementtypen, bør du ta en annen tilnærming til å optimalisere LCP ved å se på din LCP-elementtype.
1. Tekst
Når CoreDash rapporterer tekst som Element Type, er båndbredde for statiske nettverksressurser sjelden flaskehalsen. Tekst ligger direkte i HTML-dokumentet, noe som betyr at innholdet er tilgjengelig umiddelbart etter den første serverresponsen (TTFB). Hvis din LCP er treg her, er problemet nesten utelukkende Render Delay.
For å fikse dette, fokuser helt på den kritiske renderingsstien (Critical Rendering Path). Nettleseren er sannsynligvis blokkert fra å tegne teksten av tunge CSS-beregninger eller synkron JavaScript i <head>. Sjekk i tillegg din strategi for lasting av fonter; hvis du ikke bruker font-display: swap eller optional, skjuler nettleseren teksten kunstig (FOIT) mens den venter på at fontfilen skal lastes ned.2. Bilde (<img>)
Denne typen utløser hele ressurspipelinen: oppdagelse, nedlasting og dekoding. I motsetning til tekst, er en bilde-LCP sterkt avhengig av Load Delay og Load Time. Her kjemper du mot fysikk og nettverksforsinkelse, så målet ditt er å gjøre ressursen lettere og oppdagbar raskere.
Optimalisering her krever streng ressursstyring. Sørg for at <img>-taggen finnes i den opprinnelige HTML-kilden (Server-Side Rendering) for å minimere Load Delay. Legg til fetchpriority="high" og fjern alle loading="lazy"-attributter, da disse forsinker nettleserens forespørsel. Til slutt takler du Load Time ved å servere neste generasjons formater (AVIF\/WebP) og bruke srcset for å hindre at mobile enheter laster ned filer i skrivebordsstørrelse.3. Bakgrunnsbilde
Denne klassifiseringen signaliserer en arkitektonisk ineffektivitet. Fordi bildet er definert i CSS (f.eks. background-image: url(...)), kan ikke nettleseren oppdage URL-en før den har lastet ned og analysert stilarkene dine fullstendig. Dette skaper en massiv Load Delay fordi Preload Scanneren i praksis er blind for ressursen.
Den eneste robuste tekniske løsningen er refaktorering. Flytt den visuelle ressursen fra CSS til en standard HTML <img>-tag for å eksponere URL-en for nettleseren umiddelbart. Hvis du ikke kan refaktorere koden, må du bruke <link rel="preload"> i dokumenthodet for å tvinge frem tidlig oppdagelse, selv om dette ofte er en vedlikeholdsbyrde sammenlignet med å bruke et innebygd bildeelement.
4. Video
Når LCP-elementet er en video, måler nettleseren tegnetiden til poster-bildet eller den første framen (hvis den spilles av automatisk). Dette fungerer på samme måte som bilde-typen, men er ofte tyngre på grunn av filstørrelsen på videoressurser.
Behandle dette strengt som en bildeoptimaliseringsoppgave. Sørg for at et lett poster-attributt er til stede i HTML-en, slik at nettleseren ikke trenger å laste ned videosegmenter for å rendre den første pikselen. Komprimer poster-bildet like aggressivt som du ville gjort med et standard LCP-bilde.Arbeidsflyt: finne LCP-problemer basert på LCP-elementtype
LCP-elementtypen er ikke statisk eller den samme for hver besøkende. Den endres ofte basert på brukerens enhet, noe som avslører fundamentale feil i responsivt design.
Bruk CoreDash-filteret for enhetsformfaktor for å sammenligne elementtyper mellom mobil og skrivebord. Du vil ofte finne at skrivebordsbrukere får en bilde-LCP (f.eks. et Hero-banner), mens mobilbrukere får en tekst-LCP. Dette bekrefter at ditt mobile CSS-oppsett skyver Hero-banneret under bretten eller skalerer det ned så mye at et avsnitt med tekst blir det "største" elementet.Hvis du optimaliserer hero-bildet for å forbedre mobil LCP i dette scenariet, kaster du bort krefter. Nettleseren teller ikke engang bildet. Du må enten justere oppsettet for å bringe bildet tilbake i hovedvisningen, eller flytte fokuset til å optimalisere tekstrendringen (fonter\/CSS) for mobilbrukere.[include]sidebarcoredash.html[\/include]