Hvorfor jeg skriver dette

Jeg driver noen nettsteder nå, og siden jeg startet opp har ytelsen min vært veldig opp og ned. Jeg har syntes det er direkte irriterende til tider. Alt ser ut til å fungere så bra for meg lokalt, men så sjekker jeg serveranalysen min, og jeg kan se at for visse land har hastigheten min vært forferdelig.

Det har alltid sett ut til å være det hellerCLSellerLCPdet har vært problemet for meg. Så jeg tenkte jeg skulle dele min erfaring og prøve å hjelpe andre med å finne ut av dette, spesielt hvis du går gjennom det samme. Eller kanskje du har hatt problemer med dette og har et unikt perspektiv eller løsning? Jeg vil gjerne høre om det.

IfølgeSøkemotorjournal, kan optimalisering av disse to beregningene forbedre nettstedets synlighet og brukertilfredshet betraktelig. Det hørtes bra ut i teorien, men å fikse dem har faktisk vært en annen historie. La meg lede deg gjennom det jeg har lært.

Hva er CLS og LCP, eksakt?

Før jeg går inn i mine egne kamper, la meg forklare hva disse faktisk er, for da jeg først så disse akronymene i Google Search Console, ante jeg ikke hva de betydde.

Kumulativt oppsettskift (CLS)måler hvor mye sideoppsettet ditt hopper rundt mens det lastes inn. Du vet når du er i ferd med å trykke på en knapp og hele siden skifter, så du klikker feil? Det er et CLS-problem. Det er utrolig frustrerende som bruker, og det viser seg at søkemotorer også straffer deg for det.

Største innholdsrike maling (LCP)måler hvor lang tid det tar før det største synlige elementet på siden din lastes inn. Vanligvis er det et heltebilde eller en stor tekstblokk. Hvis LCP er treg, stirrer de besøkende på en halvlastet side, og mange vil bare forlate.

Begge disse faller inn under GooglesKjernewebviktale, som direkte påvirker søkerangeringene dine. Så selv om innholdet ditt er strålende, kan dårlige CLS- og LCP-score holde deg tilbake.

Optimaliser nettstedet ditt for CLS og LCP

🖼️

Angi bildedimensjoner
Angi bredde og høyde for bilder

📢

Bruk annonser på en ansvarlig måte
Unngå uventet annonsestørrelse

⚡

Forhåndslast viktige ressurser
Sørg for at kritisk innhold lastes raskt

🔄

Minimer dynamisk innhold
Begrens innhold som endres under lasting

📊

Overvåk ytelsen regelmessig
Bruk verktøy for å spore CLS- og LCP-score

Mitt CLS mareritt

CLS var det første problemet jeg møtte. Sidene mine så fine ut for meg, men poengsummene mine var forferdelige. Etter mye graving fant jeg hovedskyldige:

Bilder uten dimensjoner:Jeg satte ikke inn bredde og høyde på bildene mine. Nettleseren hadde ingen anelse om hvor mye plass som skulle reserveres, så alt endret seg når bildene ble lastet inn.
Skrifter som lastes inn sent:Mine egendefinerte skrifter ble lastet inn etter at siden ble gjengitt, noe som førte til at all teksten min hoppet ettersom den nye skriften erstattet reserven. Denne var subtil, men den gikk opp.
Dynamisk innhold:Jeg hadde noen komponenter som injiserte innhold etter at siden ble lastet, og presset alt under dem ned.

Løsningen for de fleste av mine CLS-problemer var overraskende enkel. Jeg begynte å definere eksplisitte dimensjoner for alle bilder og medier. Jeg la til font-display swap i fontinnlastingen min, slik at reserven gjengis umiddelbart. Og jeg har reservert plass med CSS for alt innhold som lastes inn dynamisk.

Verktøy somGoogle PageSpeed Insightsvar til stor hjelp her. De viser deg nøyaktig hvilke elementer som forårsaker layoutskifter, slik at du ikke gjetter.

Så kom LCP-problemet

Akkurat da jeg trodde jeg hadde ordnet ting, minLCP scorerbegynte å flagge. Den frustrerende delen var at siden min lastet raskt for meg i Storbritannia, men analysene mine viste forferdelige hastigheter i andre land. Det er tingen med LCP - det avhenger sterkt av hvor brukerne dine er og hvor langt de er fra serveren din.

Hovedproblemene jeg fant var:

Store uoptimaliserte bilder:Heltebildene mine var alt for store. Jeg lastet opp bilder i full oppløsning uten å komprimere dem.
Serverresponstid:Uten et CDN ventet brukere langt fra serveren min i evigheter på det første svaret.
Gjengivelsesblokkerende JavaScript:Jeg hadde skript som ble lastet inn i hodet som blokkerte siden fra å gjengi til de var ferdige.

SomBacklinkos studieviser, har nettsteder med gode LCP-scores merkbart bedre engasjement og lavere fluktfrekvens. Når jeg begynte å fikse disse problemene, kunne jeg se forskjellen i mine egne analyser.

Hva som faktisk hjalp min LCP

Jeg begynte å komprimere alle bildene mine og bruke WebP-format der det var mulig. Jeg flyttet også ikke-essensielle skript for å laste inn asynkront eller utsatt dem helt. Mine nettsteder er vert på Vercel, som håndterer mye av edge-nettverket for meg, men hvis du bruker tradisjonell hosting, setter du opp enCDNkan utgjøre en stor forskjell for internasjonal trafikk.

Et CDN lagrer kopier av nettstedet ditt på steder rundt om i verden, slik at besøkende blir servert fra et sted som er nærmere dem i stedet for din enkeltopprinnelsesserver. Hvis du ser dårlige hastigheter i bestemte regioner, er det noe av det første som er verdt å se nærmere på.

Den irriterende delen - det er aldri virkelig "fikset"

Her er det ingen forteller deg omCLS og LCP. Du fikser dem ikke en gang og går videre. Hver gang jeg legger til en ny funksjon, et nytt bilde eller endrer layout, kan poengsummen endre seg igjen. Det er en pågående ting.

Jeg har hatt uker hvor alt er grønt i Google Search Console, og så legger jeg til en ny komponent og plutselig blir CLS-en min flagget igjen. Det er direkte irriterende, men jeg har lært å sjekke Core Web Vitals etter hver betydelig endring nå.

Innvirkning av CLS og LCP på brukeropplevelsen

0,1 sekunder

Brukertoleranse

32 %

Økning av fluktfrekvens

7 %

Konverteringsfrekvensfall

Kjernewebviktale

SEO-rangering betydning

En rapport avDen finansielle merkevarenfremhever hvordan trege nettsteder direkte kan føre til inntektstap. Det er motivasjon nok til å holde seg på toppen, selv når det føles kjedelig.

Verktøyene som har hjulpet meg mest

Hvis du har de samme problemene, her er verktøyene jeg faktisk bruker og finner nyttige:

Google Search Console:Det var her jeg først la merke til problemene mine. It shows your Core Web Vitals scores broken down by page and tells you exactly what needs attention.
PageSpeed Insights: I run every page through this after making changes. It gives specific, actionable recommendations rather than vague advice. Shopifys nettytelsesguideer også en flott følgeressurs.
Web Vitals-utvidelse:Denne Chrome-utvidelsen viser CLS, LCP og andre beregninger i sanntid mens du surfer på ditt eget nettsted. Jeg holder det på hele tiden under utviklingen.

Når du har identifisert ytelsesproblemene dine, bruk vårGoogle Search AI-rangeringsverktøyfor å sjekke om forbedringene dine faktisk fører til bedre søkesynlighet. Det er ingen vits å fikse poengsummer hvis det ikke hjelper på rangeringene dine.

Mitt råd hvis du går gjennom dette

Hvis ytelsen din har vært like opp og ned som min, vil jeg foreslå følgende:

Ikke få panikk.CLS- og LCP-problemer er utrolig vanlige. Du gjør ikke alt feil – disse beregningene er bare sensitive.
Sjekk statistikken din etter land.Nettstedet ditt kan være raskt for deg, men tregt for besøkende andre steder. En CDN kan løse dette raskt.
Rett opp bilder først.Etter min erfaring er uoptimaliserte bilder og manglende dimensjoner årsaken til de fleste CLS- og LCP-problemer.
Test etter hver endring.Ta for vanen med å kjøre PageSpeed Insights når du gjør betydelige oppdateringer.
Vær tålmodig.Det kan ta dager eller uker å oppdatere data fra Google Search Console. Ikke anta at rettelsene dine ikke fungerer bare fordi dashbordet ikke har endret seg ennå.

Jeg lærer fortsatt og arbeider fortsatt med dette. Poengsummene mine er bedre enn de var, men jeg vil ikke kalle dem perfekte. Hvis du har funnet løsninger som fungerte for deg, vil jeg oppriktig høre om dem. Du kan også prøve å visualisere ytelsesdataene dine med vårgratis online kartmakerå spore forbedringer over tid.

Hovedpoenget er dette:CLS og LCPgår ikke bort. De betyr noe for SEO, de betyr noe for brukeropplevelsen, og hvis du driver nettsteder som meg, vil de holde deg på tærne. Men de kan fikses, og hver forbedring du gjør er verdt det.