Miért Írom Ezt

Jelenleg néhány webhelyet vezetek, és a kezdetek óta a teljesítményem nagyon emelkedett és csökkent. Időnként kifejezetten idegesítőnek találtam. Úgy tűnik, minden nagyon jól működik nekem helyi szinten, de aztán megnézem a szerverem elemzését, és látom, hogy bizonyos országokban a sebességem szörnyű volt.

Mindig is annak tűntCLSvagyLCPnekem ez volt a gond. Ezért arra gondoltam, hogy megosztom a tapasztalataimat, és megpróbálok segíteni másoknak, hogy rájöjjenek erre, különösen, ha Ön is ugyanezen megy keresztül. Vagy esetleg volt gondja ezzel, és van egyedi perspektívája vagy megoldása? Szeretnék hallani róla.

SzerintSearch Engine Journal, e két mutató optimalizálása jelentősen javíthatja webhelye láthatóságát és felhasználói elégedettségét. Ez elméletben jól hangzott, de valójában a javításuk más történet. Hadd kísérjem végig, amit tanultam.

Mi a CLS és az LCP pontosan?

Mielőtt belevágnék a saját küzdelmeimbe, hadd magyarázzam el, mik is ezek valójában, mert amikor először láttam ezeket a betűszavakat a Google Search Console-ban, fogalmam sem volt, mit jelentenek.

Kumulatív elrendezéseltolás (CLS)azt méri, hogy az oldal elrendezése mennyit ugrik betöltés közben. Tudja, amikor megérint egy gombot, és az egész oldal eltolódik, tehát rosszra kattint? Ez egy CLS probléma. Ez felhasználóként hihetetlenül frusztráló, és kiderül, hogy a keresőmotorok is büntetik ezért.

Legnagyobb tartalmat tartalmazó festék (LCP)azt méri, hogy mennyi időbe telik az oldal legnagyobb látható elemének betöltése. Általában ez egy hőskép vagy egy nagy szövegtömb. Ha lassú az LCP-d, a látogatóid egy félig betöltött oldalt bámulnak, és sokan egyszerűen elmennek.

Mindkettő a Google alá tartozikCore Web Vitals, amelyek közvetlenül befolyásolják keresési helyezéseit. Tehát még ha a tartalom zseniális is, a gyenge CLS- és LCP-pontszámok visszatarthatják.

Optimalizálja webhelyét CLS-re és LCP-re

🖼️

Állítsa be a képméreteket
Adja meg a képek szélességét és magasságát

📢

Használja a hirdetéseket felelősségteljesen
Kerülje el a hirdetés váratlan átméretezését

⚡

Fontos források előtöltése
Biztosítsa a kritikus tartalom gyors betöltését

🔄

Minimalizálja a dinamikus tartalmat
Korlátozza a betöltés során változó tartalmat

📊

Rendszeresen figyelje a teljesítményt
Használjon eszközöket a CLS és LCP pontszámok nyomon követésére

CLS rémálom

A CLS volt az első probléma, amibe belefutottam. Az oldalaim jónak tűntek, de a pontszámaim szörnyűek voltak. Sok ásás után megtaláltam a fő bűnösöket:

Képek méret nélkül:Nem állítottam be szélességet és magasságot a képeimen. A böngészőnek fogalma sem volt, mennyi helyet foglaljon, így minden megváltozott, amint a képek betöltődnek.
A betűtípusok későn töltődnek be:Az egyéni betűtípusaim az oldal megjelenítése után töltődtek be, aminek következtében az összes szövegem ugrott, ahogy az új betűtípus váltotta fel a tartalékot. Ez finom volt, de összeadódott.
Dinamikus tartalom:Voltak olyan összetevőim, amelyek az oldal betöltése után tartalmat adtak be, és mindent lenyomtak alattuk.

A legtöbb CLS-problémám megoldása meglepően egyszerű volt. Elkezdtem meghatározni minden képhez és médiához explicit dimenziókat. Hozzáadtam a font-display cserét a betűtípus betöltéséhez, így a tartalék azonnal megjelenik. És CSS-szel lefoglaltam helyet minden dinamikusan betöltődő tartalom számára.

Olyan eszközök, mintGoogle PageSpeed Insightsnagy segítség volt itt. Pontosan megmutatják, mely elemek okozzák az elrendezés eltolódását, így nem találgat.

Aztán jött az LCP probléma

Épp amikor azt hittem, hogy el vannak intézve a dolgok, énLCP pontszámokzászlózni kezdett. A frusztráló rész az volt, hogy az Egyesült Királyságban gyorsan betöltődtem a webhelyem, de az elemzéseim szörnyű sebességet mutattak más országokban. Ez a helyzet az LCP-vel – ez nagyban függ attól, hogy a felhasználók hol vannak, és milyen messze vannak a szervertől.

A főbb problémák, amelyeket találtam:

Nagy, nem optimalizált képek:A hősképeim túl nagyok voltak. Teljes felbontású képeket töltöttem fel tömörítés nélkül.
Szerver válaszidő:CDN nélkül a szerveremtől távoli felhasználók sokáig vártak az első válaszra.
Renderelést blokkoló JavaScript:A fejben olyan szkriptek töltődtek be, amelyek blokkolták az oldal megjelenítését a befejezésig.

MintBacklinko tanulmányaműsorok, a jó LCP-pontszámmal rendelkező webhelyek észrevehetően jobb elköteleződést és alacsonyabb visszafordulási arányt mutatnak. Miután elkezdtem javítani ezeket a problémákat, láttam a különbséget a saját elemzésemben.

Mi segített az LCP-mnek

Elkezdtem tömöríteni az összes képet, és ahol lehetséges, WebP formátumot használtam. A nem alapvető szkripteket is áthelyeztem az aszinkron betöltéshez, vagy teljesen elhalasztottam őket. Webhelyeim a Vercelen vannak tárolva, amely sok peremhálózati dolgot kezel számomra, de ha hagyományos tárhelyet használ, állítson be egyCDNnagy változást hozhat a nemzetközi forgalom szempontjából.

A CDN a webhely másolatait a világ különböző pontjain tárolja, így a látogatókat a hozzájuk közelebb eső helyekről szolgálják ki, nem pedig az egyetlen kiindulási szerverről. Ha bizonyos régiókban rossz sebességet tapasztal, ez az egyik első dolog, amit érdemes megvizsgálni.

A bosszantó rész – igazából sosem „javított”

Itt van az, amiről senki sem mesélCLS és LCP. Nem javítja ki őket egyszer, és továbblép. Minden alkalommal, amikor új funkciót, új képet adok hozzá, vagy megváltoztatom az elrendezésemet, a pontszámok ismét eltolódhatnak. Ez egy folyamatban lévő dolog.

Voltak olyan heteim, amikor minden zöld a Google Search Console-ban, majd hozzáadok egy új összetevőt, és hirtelen a CLS-em ismét meg van jelölve. Kifejezetten bosszantó, de megtanultam, hogy minden jelentős változás után ellenőrizzem az alapvető webes vitaljaimat.

A CLS és az LCP hatása a felhasználói élményre

0,1 másodperc

Felhasználói tolerancia

32%

A visszafordulási arány növelése

Konverziós ráta csökkenése

Core Web Vitals

SEO rangsor fontossága

BeszámolóA pénzügyi márkarávilágít arra, hogy a lassú webhelyek közvetlenül bevételkieséshez vezethetnek. Ez elég motiváció ahhoz, hogy a tetején maradjon, még akkor is, ha fárasztónak tűnik.

Az eszközök, amelyek a legtöbbet segítettek nekem

Ha ugyanazokkal a problémákkal küzd, itt vannak az általam használt és hasznos eszközök:

Google Search Console:Itt vettem észre először a problémáimat. Megjeleníti a Core Web Vitals pontszámait oldalak szerinti bontásban, és pontosan megmondja, hogy mire kell figyelni.
PageSpeed Insights:Minden oldalt végigfuttatok ezen a változtatások után. Konkrét, megvalósítható ajánlásokat ad homályos tanácsok helyett.A Shopify webes teljesítmény-útmutatójaegyben nagyszerű társ erőforrás.
Web Vitals bővítmény:Ez a Chrome-bővítmény valós időben jeleníti meg az Ön CLS-, LCP- és egyéb mutatóit, miközben Ön saját webhelyén böngészik. Fejlesztés közben folyamatosan bekapcsolva tartom.

Miután azonosította a teljesítményproblémákat, használja a miGoogle Search AI rangsoroló eszközannak ellenőrzésére, hogy a fejlesztések valóban jobb keresési láthatóságot eredményeznek-e. Nincs értelme a pontszámok rögzítésének, ha ez nem segíti a helyezéseket.

Tanácsom, ha ezen mész keresztül

Ha az Ön teljesítménye olyan volt, mint az enyém, a következőket javaslom:

Ne essen pánikba.A CLS és LCP problémák hihetetlenül gyakoriak. Nem csinálsz mindent rosszul – ezek a mutatók csak érzékenyek.
Ellenőrizze az elemzést országok szerint.Lehet, hogy webhelye gyors az Ön számára, de lassú a másutt látogatók számára. A CDN ezt gyorsan meg tudja oldani.
Először javítsa ki a képeket.Tapasztalataim szerint az optimalizálatlan képek és a hiányzó méretek okozzák a legtöbb CLS- és LCP-problémát.
Minden változtatás után tesztelje.Szokjon bele a PageSpeed Insights használatába, amikor jelentős frissítéseket hajt végre.
Légy türelmes.A Google Search Console-adatok frissítése napokig vagy hetekig tarthat. Ne feltételezze, hogy a javítások csak azért nem működnek, mert az irányítópult még nem változott.

Még mindig tanulok és foglalkozom ezzel. A pontszámaim jobbak, mint voltak, de nem nevezném tökéletesnek. Ha olyan megoldást talált, amely bevált az Ön számára, őszintén szeretnék hallani róluk. Megpróbálhatja megjeleníteni teljesítményadatait is a mi segítségévelingyenes online diagramkészítőhogy nyomon kövessék a fejlődést az idő múlásával.

A lényeg a következő:CLS és LCPnem mennek el. Számítanak a SEO szempontjából, a felhasználói élmény szempontjából, és ha olyan webhelyeket futtatsz, mint én, akkor azok a lábujjakon fognak tartani. De javíthatók, és minden fejlesztés megéri.