Zašto ovo pišem

Sada vodim nekoliko web-mjesta i otkad sam počeo, moj je učinak bio vrlo uspon i pad. Ponekad mi je to stvarno smetalo. Čini se da mi sve dobro funkcionira lokalno, ali onda provjerim analitiku svog poslužitelja i vidim da je za određene zemlje moja brzina užasna.

Oduvijek se činilo da je i jedno i drugoCLSiliLCPto je bio problem za mene. Pa sam pomislio da bih podijelio svoje iskustvo i pokušao pomoći drugima da shvate ovo, pogotovo ako i vi prolazite kroz istu stvar. Ili ste možda imali problema s ovim i imate jedinstvenu perspektivu ili rješenje? Volio bih čuti o tome.

PremaČasopis tražilice, optimizacija ove dvije metrike može značajno poboljšati vidljivost vaše stranice i zadovoljstvo korisnika. To je zvučalo sjajno u teoriji, ali njihovo popravljanje zapravo je druga priča. Dopustite da vas provedem kroz ono što sam naučio.

Što su točno CLS i LCP?

Prije nego što se upustim u vlastite probleme, dopustite mi da objasnim što su to zapravo, jer kada sam prvi put vidio te kratice u Google Search Consoleu, nisam imao pojma što znače.

Kumulativni pomak izgleda (CLS)mjeri koliko izgled vaše stranice skače dok se učitava. Znate kada želite dodirnuti gumb i cijela se stranica pomakne, pa kliknete pogrešnu stvar? To je CLS problem. To je nevjerojatno frustrirajuće kao korisnika, a pokazalo se da vas tražilice također kažnjavaju zbog toga.

Slikanje najvećeg sadržaja (LCP)mjeri koliko je vremena potrebno za učitavanje najvećeg vidljivog elementa na vašoj stranici. Obično je to glavna slika ili veliki blok teksta. Ako je vaš LCP spor, vaši posjetitelji bulje u napola učitanu stranicu i mnogi će jednostavno otići.

Oba potpadaju pod GoogleTemeljni web pokazatelji, koji izravno utječu na vaše rangiranje u pretraživanju. Dakle, čak i ako je vaš sadržaj briljantan, loši CLS i LCP rezultati mogu vas kočiti.

Optimizirajte svoju web stranicu za CLS i LCP

🖼️

Postavite dimenzije slike
Odredite širinu i visinu slika

📢

Koristite oglase odgovorno
Izbjegnite neočekivanu promjenu veličine oglasa

⚡

Učitaj unaprijed važne resurse
Osigurajte brzo učitavanje kritičnog sadržaja

🔄

Minimizirajte dinamički sadržaj
Ograničite sadržaj koji se mijenja tijekom učitavanja

📊

Redovito pratite izvedbu
Koristite alate za praćenje CLS i LCP rezultata

Moja CLS noćna mora

CLS je bio prvi problem na koji sam naišao. Moje su mi stranice izgledale dobro, ali rezultati su bili užasni. Nakon dosta kopanja, pronašao sam glavne krivce:

Slike bez dimenzija:Nisam postavljao širinu i visinu na svojim slikama. Preglednik nije imao pojma koliko prostora treba rezervirati, pa se sve promijenilo nakon što su se slike učitale.
Fontovi se kasno učitavaju:Moji prilagođeni fontovi učitavali su se nakon renderiranja stranice, uzrokujući da sav moj tekst skače jer je novi font zamijenio rezervni. Ovaj je bio suptilan, ali je dodao.
Dinamički sadržaj:Imao sam neke komponente koje su ubacivale sadržaj nakon učitavanja stranice, gurajući sve ispod sebe prema dolje.

Rješenje za većinu mojih CLS problema bilo je iznenađujuće jednostavno. Počeo sam definirati eksplicitne dimenzije za sve slike i medije. Dodao sam zamjenu prikaza fonta svom učitavanju fonta tako da se zamjena odmah renderira. I rezervirao sam prostor s CSS-om za svaki sadržaj koji se dinamički učitava.

Alati poputGoogle PageSpeed Insightsbili su od velike pomoći ovdje. Oni vam točno pokazuju koji elementi uzrokuju pomake izgleda, tako da ne nagađate.

Zatim je došao problem s LCP-om

Baš kad sam mislio da sam sredio stvari, mojLCP rezultatipočeo označavati. Frustrirajuće je bilo to što mi se moja stranica brzo učitavala u Ujedinjenom Kraljevstvu, ali moja je analitika pokazala užasne brzine u drugim zemljama. To je stvar kod LCP-a - uvelike ovisi o tome gdje su vaši korisnici i koliko su udaljeni od vašeg poslužitelja.

Glavni problemi koje sam otkrio bili su:

Velike neoptimizirane slike:Slike mojih junaka bile su prevelike. Prenosio sam fotografije pune rezolucije bez kompresije.
Vrijeme odgovora poslužitelja:Bez CDN-a, korisnici koji su bili daleko od mog poslužitelja godinama su čekali na prvi odgovor.
JavaScript koji blokira prikaz:U glavi su mi se učitavale skripte koje su blokirale renderiranje stranice dok ne završe.

KaoBacklinkova studijapokazuje, stranice s dobrim LCP rezultatima imaju osjetno bolji angažman i niže stope napuštanja početne stranice. Nakon što sam počeo rješavati te probleme, mogao sam vidjeti razliku u svojoj analitici.

Što je zapravo pomoglo mom LCP-u

Počeo sam komprimirati sve svoje slike i koristiti WebP format gdje je to bilo moguće. Također sam premjestio nebitne skripte da se učitavaju asinkrono ili sam ih u potpunosti odgodio. Moja web-mjesta nalaze se na Vercelu, koji obrađuje mnoge stvari rubne mreže za mene, ali ako ste na tradicionalnom hostingu, postavljanjeCDNmože napraviti veliku razliku za međunarodni promet.

CDN pohranjuje kopije vaše stranice na lokacijama diljem svijeta, tako da se posjetitelji poslužuju s mjesta koje im je bliže, a ne s vašeg izvornog poslužitelja. Ako vidite loše brzine u određenim regijama, to je jedna od prvih stvari koje vrijedi razmotriti.

Iritantni dio - nikada nije stvarno "popravljen"

Evo o čemu vam nitko ne govoriCLS i LCP. Ne popravljate ih jednom i idete dalje. Svaki put kad dodam novu značajku, novu sliku ili promijenim svoj izgled, rezultati se mogu ponovno promijeniti. To je stalna stvar.

Imao sam tjedne kada je sve bilo zeleno u Google Search Consoleu, a onda sam dodao jednu novu komponentu i odjednom je moj CLS ponovno označen. To je stvarno iritantno, ali sada sam naučio provjeravati svoje osnovne web pokazatelje nakon svake značajne promjene.

Utjecaj CLS-a i LCP-a na korisničko iskustvo

0,1 sekunda

Tolerancija korisnika

32%

Povećanje stope napuštanja početne stranice

Pad stope konverzije

Temeljni web pokazatelji

Važnost SEO rangiranja

Izvješće autoraFinancijski brandnaglašava kako spore web stranice mogu izravno dovesti do gubitka prihoda. To je dovoljna motivacija da nastavimo s tim, čak i kada se čini zamornim.

Alati koji su mi najviše pomogli

Ako se i vi suočavate s istim problemima, evo alata koje ja zapravo koristim i koje smatram korisnima:

Google Search Console:Tu sam prvi put primijetio svoje probleme. Prikazuje vaše rezultate Core Web Vitals raščlanjene po stranici i govori vam točno na što treba obratiti pozornost.
PageSpeed Insights:Prolazim kroz ovo svaku stranicu nakon što sam napravio izmjene. Daje konkretne, djelotvorne preporuke, a ne nejasne savjete.Shopifyjev vodič za web performansetakođer je izvrstan popratni resurs.
Proširenje Web Vitals:Ovo Chromeovo proširenje prikazuje vaše CLS, LCP i druge metrike u stvarnom vremenu dok pregledavate vlastitu web stranicu. Držim ga stalno uključenim tijekom razvoja.

Nakon što identificirate probleme s izvedbom, upotrijebite našGoogle Search AI alat za rangiranjekako biste provjerili pretvaraju li se vaša poboljšanja u bolju vidljivost pretraživanja. Nema smisla popravljati rezultate ako to ne pomaže vašem poretku.

Moj savjet ako prolazite kroz ovo

Ako je vaša izvedba bila uspona i pada kao moja, evo što bih predložio:

Ne paničarite.Problemi s CLS-om i LCP-om nevjerojatno su česti. Ne radite sve krivo - ove su metrike samo osjetljive.
Provjerite svoju analitiku po zemlji.Vaša web stranica može biti brza za vas, ali spora za posjetitelje drugdje. CDN to može brzo riješiti.
Prvo popravi slike.Prema mom iskustvu, neoptimizirane slike i dimenzije koje nedostaju uzrok su većine problema s CLS i LCP.
Testirajte nakon svake promjene.Steknite naviku pokretanja PageSpeed Insighta kad god napravite značajna ažuriranja.
Budite strpljivi.Ažuriranje podataka Google Search Consolea može potrajati danima ili tjednima. Nemojte pretpostavljati da vaši popravci ne rade samo zato što se nadzorna ploča još nije promijenila.

Još uvijek učim i još se nosim s tim. Moji su rezultati bolji nego što su bili, ali ne bih ih nazvao savršenima. Ako ste pronašli rješenja koja su vam odgovarala, iskreno želim čuti o njima. Također možete pokušati vizualizirati svoje podatke o izvedbi s našimbesplatni mrežni alat za izradu grafikonaza praćenje poboljšanja tijekom vremena.

Zaključak je sljedeći:CLS i LCPne odlaze. Važni su za SEO, važni su za korisničko iskustvo, a ako upravljate web stranicama poput mene, držat će vas na oprezu. Ali oni se mogu popraviti i svako poboljšanje koje napravite je vrijedno toga.