Zakaj to pišem

Zdaj vodim nekaj spletnih mest in od začetka je moja uspešnost zelo visoka in slaba. Včasih se mi je zdelo naravnost nadležno. Zdi se, da mi lokalno vse deluje tako dobro, potem pa preverim analitiko svojega strežnika in vidim, da je bila moja hitrost za nekatere države grozna.

Vedno se je zdelo, da je bodisiCLSozLCPto je bilo zame vprašanje. Zato sem mislil, da bom delil svojo izkušnjo in poskušal pomagati drugim, da to ugotovijo, še posebej, če greš skozi isto stvar. Ali pa ste morda imeli s tem težave in imate edinstveno perspektivo ali rešitev? Rad bi slišal o tem.

Glede naDnevnik iskalnika, lahko optimizacija teh dveh meritev bistveno izboljša vidnost vašega spletnega mesta in zadovoljstvo uporabnikov. To je v teoriji zvenelo odlično, a dejansko popravljanje je bila druga zgodba. Naj vas popeljem skozi to, kar sem se naučil.

Kaj točno sta CLS in LCP?

Preden se lotim svojih težav, naj razložim, kaj to pravzaprav so, kajti ko sem prvič videl te kratice v Google Search Console, nisem imel pojma, kaj pomenijo.

Kumulativni premik postavitve (CLS)meri, koliko postavitev strani med nalaganjem skače. Veste, ko želite pritisniti gumb in se cela stran premakne, zato kliknete napačno stvar? To je problem CLS. Kot uporabnika je to neverjetno frustrirajoče in izkazalo se je, da vas tudi iskalniki za to kaznujejo.

Barvanje z največjo vsebino (LCP)meri, koliko časa traja, da se naloži največji vidni element na vaši strani. Običajno je to glavna slika ali velik del besedila. Če je vaš LCP počasen, bodo vaši obiskovalci strmeli v napol naloženo stran in mnogi bodo preprosto odšli.

Oboje spada pod GooglovoOsnovni spletni kazalniki, ki neposredno vplivajo na vašo uvrstitev pri iskanju. Tudi če je vaša vsebina odlična, vas lahko slabi rezultati CLS in LCP zadržijo.

Optimizirajte svoje spletno mesto za CLS in LCP

🖼️

Nastavite dimenzije slike
Določite širino in višino slik

📢

Oglase uporabljajte odgovorno
Izogibajte se nepričakovanemu spreminjanju velikosti oglasa

⚡

Vnaprej naložite pomembne vire
Zagotovite hitro nalaganje kritične vsebine

🔄

Zmanjšajte dinamično vsebino
Omejite vsebino, ki se spreminja med nalaganjem

📊

Redno spremljajte uspešnost
Uporabite orodja za sledenje rezultatom CLS in LCP

Moja CLS nočna mora

CLS je bila prva težava, na katero sem naletel. Moje strani so se mi zdele v redu, toda moji rezultati so bili grozni. Po dolgem kopanju sem našel glavne krivce:

Slike brez dimenzij:Svojim slikam nisem nastavljal širine in višine. Brskalnik ni imel pojma, koliko prostora naj rezervira, zato se je vse premaknilo, ko so se slike naložile.
Pisave se nalagajo pozno:Moje pisave po meri so se nalagale, ko je bila stran upodobljena, zaradi česar je vse moje besedilo skakalo, ko je nova pisava nadomestila nadomestno. Ta je bil subtilen, vendar je prispeval.
Dinamična vsebina:Imel sem nekaj komponent, ki so vbrizgale vsebino po nalaganju strani in potisnile vse pod njimi navzdol.

Rešitev večine mojih težav s CLS je bila presenetljivo preprosta. Začel sem definirati eksplicitne dimenzije za vse slike in medije. Nalaganju pisave sem dodal zamenjavo prikaza pisave, tako da se nadomestna različica takoj upodobi. S CSS sem rezerviral prostor za vse vsebine, ki se dinamično nalagajo.

Orodja, kot soGoogle PageSpeed Insightsbili tukaj v veliko pomoč. Natančno vam pokažejo, kateri elementi povzročajo premike v postavitvi, tako da ne ugibate.

Potem je prišlo do težave z LCP

Ravno ko sem mislil, da imam stvari urejene, mojRezultati LCPzačel označevati. Frustrirajoče je bilo, da se mi je spletno mesto hitro naložilo v Združenem kraljestvu, vendar je moja analitika pokazala strašne hitrosti v drugih državah. To je stvar LCP - močno je odvisno od tega, kje so vaši uporabniki in kako daleč so od vašega strežnika.

Glavne težave, ki sem jih našel, so bile:

Velike neoptimizirane slike:Slike mojih junakov so bile prevelike. Nalagal sem fotografije v polni ločljivosti, ne da bi jih stisnil.
Odzivni čas strežnika:Brez CDN so uporabniki daleč od mojega strežnika dolgo čakali na prvi odgovor.
JavaScript, ki blokira upodabljanje:V glavi sem imel naložene skripte, ki so blokirale upodabljanje strani, dokler se niso končale.

KotBacklinkova študijakaže, imajo spletna mesta z dobrimi rezultati LCP opazno boljšo angažiranost in nižjo stopnjo obiskov ene strani. Ko sem začel odpravljati te težave, sem videl razliko v lastni analitiki.

Kaj je dejansko pomagalo mojemu LCP

Začel sem stiskati vse svoje slike in uporabljati format WebP, kjer je bilo to mogoče. Prav tako sem premaknil nebistvene skripte za asinhrono nalaganje ali pa jih v celoti odložil. Moja spletna mesta gostujejo na Vercelu, ki zame skrbi za veliko robnega omrežja, če pa uporabljate tradicionalno gostovanje, nastavitevCDNlahko veliko spremeni v mednarodnem prometu.

CDN shranjuje kopije vašega spletnega mesta na lokacijah po vsem svetu, tako da so obiskovalci postreženi od nekje bližje njim in ne iz vašega enega samega izvornega strežnika. Če opazite slabe hitrosti v določenih regijah, je to ena od prvih stvari, ki jih je vredno preučiti.

Moteč del - nikoli ni zares "popravljen"

Tukaj je tisto, o čemer vam nihče ne poveCLS in LCP. Ne popraviš jih enkrat in greš naprej. Vsakič, ko dodam novo funkcijo, novo sliko ali spremenim svojo postavitev, se lahko rezultati znova premaknejo. To je stalna stvar.

Imel sem tedne, ko je bilo v Google Search Console vse zeleno, potem pa dodam eno novo komponento in nenadoma je moj CLS spet označen. To je naravnost nadležno, vendar sem se zdaj naučil preveriti svoje osnovne spletne kazalnike po vsaki večji spremembi.

Vpliv CLS in LCP na uporabniško izkušnjo

0,1 sekunde

Uporabniška toleranca

32 %

Povečanje stopnje obiskov ene strani

Padec stopnje konverzije

Osnovni spletni kazalniki

Pomen uvrstitve SEO

Poročilo avtorjaFinančna znamkapoudarja, kako lahko počasna spletna mesta neposredno povzročijo izgubo prihodka. To je dovolj motivacija, da ostanete na vrhu, tudi ko se zdi dolgočasno.

Orodja, ki so mi najbolj pomagala

Če imate opravka z enakimi težavami, so tukaj orodja, ki jih dejansko uporabljam in se mi zdijo koristna:

Google Search Console:Tu sem prvič opazil svoje težave. Prikazuje vaše rezultate Core Web Vitals, razčlenjene po straneh, in vam natančno pove, čemu je treba posvetiti pozornost.
PageSpeed Insights:Vsako stran pregledam po tem, ko naredim spremembe. Daje konkretna, uporabna priporočila namesto nejasnih nasvetov.Shopifyjev vodnik za spletno delovanjeje tudi odličen spremljevalni vir.
Razširitev Web Vitals:Ta razširitev za Chrome prikazuje vaše CLS, LCP in druge meritve v realnem času, ko brskate po svojem spletnem mestu. Med razvojem ga imam nenehno vklopljenega.

Ko ugotovite svoje težave z zmogljivostjo, uporabite našeOrodje za razvrščanje z umetno inteligenco Iskanje Googleda preverite, ali vaše izboljšave dejansko pomenijo boljšo vidnost pri iskanju. Ni popravljanja rezultatov, če to ne pomaga vaši uvrstitvi.

Moj nasvet, če greste skozi to

Če je bila vaša uspešnost tako visoka in slaba kot moja, bi predlagal naslednje:

Ne bodite panični.Težave s CLS in LCP so neverjetno pogoste. Ne delate vsega narobe - te meritve so le občutljive.
Preverite svojo analitiko po državah.Vaše spletno mesto je lahko za vas hitro, drugje pa počasno za obiskovalce. CDN lahko to hitro reši.
Najprej popravi slike.Po mojih izkušnjah so neoptimizirane slike in manjkajoče dimenzije vzrok za večino težav s CLS in LCP.
Test po vsaki spremembi.Navadite se zagnati PageSpeed Insight vsakič, ko naredite pomembne posodobitve.
Bodite potrpežljivi.Posodobitev podatkov Google Search Console lahko traja nekaj dni ali tednov. Ne domnevajte, da vaši popravki ne delujejo samo zato, ker se nadzorna plošča še ni spremenila.

Še vedno se učim in se še ukvarjam s tem. Moji rezultati so boljši, kot so bili, vendar jih ne bi imenoval popolne. Če ste našli rešitve, ki so delovale za vas, resnično želim slišati o njih. Poskusite lahko tudi vizualizirati svoje podatke o uspešnosti z našimibrezplačen spletni izdelovalec grafikonovza spremljanje izboljšav skozi čas.

Bistvo je naslednje:CLS in LCPne izginejo. Pomembni so za SEO, pomembni so za uporabniško izkušnjo in če upravljate spletna mesta, kot jih jaz, vas bodo držala na trnih. Vendar jih je mogoče popraviti in vsaka izboljšava, ki jo naredite, je vredna tega.