Miks ma seda kirjutan

Ma haldan praegu mõnda veebisaiti ja algusest peale on mu jõudlus olnud väga tõusnud ja langenud. I have found it downright annoying at times. Tundub, et kohapeal töötab minu jaoks kõik nii hästi, kuid siis kontrollin oma serveri analüüsi ja näen, et teatud riikides on mu kiirus olnud kohutav.

Alati on tundunud, et see on kumbkiCLSvõiLCPsee on minu jaoks probleem olnud. Seetõttu mõtlesin, et jagan oma kogemust ja püüan aidata teistel sellest aru saada, eriti kui teil on sama asi. Või äkki on teil sellega probleeme olnud ja teil on ainulaadne vaatenurk või lahendus? Mulle meeldiks sellest kuulda.

VastavaltOtsingumootori ajakiri, võib nende kahe mõõdiku optimeerimine oluliselt parandada teie saidi nähtavust ja kasutajate rahulolu. See kõlas teoreetiliselt suurepäraselt, kuid tegelikult on nende parandamine olnud erinev lugu. Lubage mul tutvustada teile, mida olen õppinud.

Mis on CLS ja LCP täpselt?

Enne oma probleemidega tegelemist lubage mul selgitada, mis need tegelikult on, sest kui ma neid akronüüme Google'i otsingukonsoolis esimest korda nägin, ei teadnud ma, mida need tähendavad.

Kumulatiivne paigutuse nihe (CLS)mõõdab, kui palju teie lehe paigutus laadimise ajal hüppab. Kas teate, kui puudutate nuppu ja kogu leht nihkub, nii et klõpsate valet asja? See on CLS-i probleem. See on kasutajana uskumatult masendav ja selgub, et ka otsingumootorid karistavad teid selle eest.

Suurim sisuline värv (LCP)mõõdab, kui kaua kulub teie lehe suurima nähtava elemendi laadimiseks. Tavaliselt on see kangelase kujutis või suur tekstiplokk. Kui teie LCP on aeglane, vaatavad teie külastajad pooleldi laetud lehte ja paljud lahkuvad.

Mõlemad kuuluvad Google'i allaCore Web Vitals, mis mõjutavad otseselt teie asetust otsingus. Nii et isegi kui teie sisu on suurepärane, võivad kehvad CLS- ja LCP-skoorid teid tagasi hoida.

Optimeerige oma veebisait CLS-i ja LCP jaoks

🖼️

Määrake pildi mõõtmed
Määrake piltide laius ja kõrgus

📢

Kasutage reklaame vastutustundlikult
Vältige ootamatut reklaami suuruse muutmist

⚡

Eellaadige olulised ressursid
Tagada kriitilise sisu kiire laadimine

🔄

Minimeerige dünaamiline sisu
Piirake laadimise ajal muutuvat sisu

📊

Jälgige jõudlust regulaarselt
Kasutage CLS-i ja LCP-skooride jälgimiseks tööriistu

Minu CLS painaja

CLS oli esimene probleem, millega kokku puutusin. Minu lehed tundusid mulle head, kuid mu hinded olid kohutavad. Pärast pikka kaevamist leidsin peamised süüdlased:

Pildid ilma mõõtmeteta:Ma ei määranud oma piltidele laiust ja kõrgust. Brauseril polnud aimugi, kui palju ruumi reserveerida, nii et piltide laadimisel nihkus kõik.
Fontide laadimine hilineb:Minu kohandatud fondid laaditi pärast lehe renderdamist, mistõttu kogu mu tekst hüppas, kuna uus font asendas varufondi. See oli peen, kuid see andis kokku.
Dünaamiline sisu:Mul olid mõned komponendid, mis sisestasid sisu pärast lehe laadimist, lükates kõik nende all olevad asjad alla.

Enamiku minu CLS-i probleemide lahendus oli üllatavalt lihtne. Hakkasin määratlema kõigi piltide ja meediumide selgeid mõõtmeid. Lisasin fondi laadimisele fondikuva vahetuse, nii et varu renderdatakse kohe. Ja ma reserveerisin CSS-iga ruumi igasuguse dünaamiliselt laaditava sisu jaoks.

Tööriistad naguGoogle PageSpeed Insightsolid siin suureks abiks. They show you exactly which elements are causing layout shifts, so you are not guessing.

Siis tuli LCP probleem

Just siis, kui ma arvasin, et olen asjad korda saanud, muLCP hindedhakkas liputama. Masendav osa oli see, et mu sait laaditi Ühendkuningriigis minu jaoks kiiresti, kuid minu analüüs näitas teistes riikides kohutavat kiirust. See on LCP lugu – see sõltub suuresti sellest, kus teie kasutajad asuvad ja kui kaugel nad teie serverist on.

Peamised probleemid, mille leidsin, olid järgmised:

Suured optimeerimata pildid:Minu kangelasepildid olid liiga suured. Laadisin üles täiseraldusvõimega fotosid ilma neid tihendamata.
Serveri reageerimisaeg:Ilma CDN-ita ootasid minu serverist kaugel olevad kasutajad esimest vastust.
Renderdust blokeeriv JavaScript:Peas laaditi skripte, mis blokeerisid lehe renderdamise kuni selle lõpuni.

NaguBacklinko uurimusnäitab, on heade LCP-skooridega saitidel märgatavalt parem seotus ja madalam põrkemäär. Kui hakkasin neid probleeme lahendama, nägin erinevust oma analüüsis.

Mis tegelikult aitas minu LCP-d

Hakkasin kõiki pilte tihendama ja võimalusel WebP-vormingut kasutama. Samuti teisaldasin mittevajalikud skriptid asünkroonseks laadimiseks või lükkasin need täielikult edasi. Minu saite hostitakse Vercelis, mis haldab minu jaoks paljusid äärevõrgu asju, kuid kui kasutate traditsioonilist hostimist, seadistageCDNvõib rahvusvahelises liikluses oluliselt mõjutada.

CDN salvestab teie saidi koopiad erinevatesse kohtadesse üle maailma, nii et külastajaid teenindatakse kuskilt neile lähemalt, mitte teie ühest lähteserverist. Kui näete teatud piirkondades halba kiirust, on see üks esimesi asju, mida tasub uurida.

Ärritav osa – seda pole kunagi tegelikult "parandatud"

Siin on see, millest keegi teile ei räägiCLS ja LCP. Te ei paranda neid üks kord ja liigute edasi. Iga kord, kui lisan uue funktsiooni, uue pildi või muudan paigutust, võivad hinded uuesti nihkuda. See on käimasolev asi.

Mul on olnud nädalaid, mil Google'i otsingukonsoolis on kõik roheline, ja siis lisan ühe uue komponendi ja järsku märgitakse mu CLS uuesti lipuga. See on lausa tüütu, kuid olen nüüd õppinud oma põhiveebi elutähtsaid näitajaid pärast iga olulist muudatust kontrollima.

CLS-i ja LCP mõju kasutajakogemusele

0,1 sekundit

Kasutaja sallivus

32%

Põrkemäära tõus

Konversioonikursi langus

Core Web Vitals

SEO edetabeli tähtsus

Aruanne autoriltFinantsbrändrõhutab, kuidas aeglased veebisaidid võivad otseselt tulu kaotada. See on piisav motivatsioon, et sellega kursis hoida, isegi kui see tundub tüütu.

Tööriistad, mis on mind kõige rohkem aidanud

Kui teil on samad probleemid, siis siin on tööriistad, mida ma tegelikult kasutan ja millest olen abiks.

Google'i otsingukonsool:Siin märkasin esimest korda oma probleeme. See näitab teie Core Web Vitalsi hindeid lehtede kaupa ja ütleb teile täpselt, mis vajab tähelepanu.
PageSpeed Insights:Pärast muudatuste tegemist jooksen selle igal lehel läbi. See annab pigem konkreetseid, teostatavaid soovitusi kui ebamääraseid nõuandeid.Shopify veebi jõudlusjuhendon ka suurepärane kaasressurss.
Laiendus Web Vitals:See Chrome'i laiendus näitab teie CLS-i, LCP-i ja muid mõõdikuid reaalajas, kui sirvite oma saiti. Hoian seda arenduse ajal pidevalt peal.

Kui olete oma jõudlusprobleemid tuvastanud, kasutage meieGoogle'i otsingu AI reitingutööriistet kontrollida, kas teie täiustused toovad kaasa parema otsingu nähtavuse. Pole mõtet hindeid fikseerida, kui see teie paremusjärjestust ei aita.

Minu nõuanne, kui te selle läbi elate

Kui teie esitus on olnud sama kõrge kui minu oma, soovitaksin siin järgmist:

Ära paanitse.CLS-i ja LCP-probleemid on uskumatult levinud. Te ei tee kõike valesti – need mõõdikud on lihtsalt tundlikud.
Kontrollige oma analüüsi riigiti.Teie sait võib teie jaoks olla kiire, kuid mujal külastajate jaoks aeglane. CDN suudab selle kiiresti lahendada.
Parandage esmalt pildid.Minu kogemuse kohaselt on optimeerimata pildid ja puuduvad mõõtmed enamiku CLS-i ja LCP-probleemide põhjuseks.
Testige pärast iga muudatust.Võtke harjumus käitada PageSpeed Insightsi alati, kui teete olulisi värskendusi.
Ole kannatlik.Google'i otsingukonsooli andmete värskendamiseks võib kuluda päevi või nädalaid. Ärge arvake, et teie parandused ei tööta lihtsalt seetõttu, et armatuurlaud pole veel muutunud.

Ma alles õpin ja tegelen sellega. Minu hinded on paremad kui nad olid, kuid ma ei nimetaks neid täiuslikuks. Kui olete leidnud lahendused, mis teie jaoks töötasid, tahan tõesti neist kuulda. Samuti võite proovida oma toimivusandmeid meie abil visualiseeridatasuta veebigraafikute koostajatäiustuste jälgimiseks aja jooksul.

Lõpptulemus on järgmine:CLS ja LCPei kao kuhugi. Need on olulised SEO jaoks, need on olulised kasutajakogemuse jaoks ja kui juhite veebisaite nagu mina, hoiavad need teid kursil. Kuid need on parandatavad ja iga teie tehtud parandus on seda väärt.