Miksi Kirjoitan Tämän

Ylläpidän nyt muutamia verkkosivustoja, ja suorituskykyni on ollut alusta lähtien hyvin nousujohteinen ja heikentynyt. Olen kokenut sen välillä todella ärsyttäväksi. Kaikki näyttää toimivan minulle paikallisesti niin hyvin, mutta sitten tarkistan palvelinanalytiikkani ja huomaan, että joissain maissa nopeus on ollut kauhea.

Se on aina näyttänyt olevan jokoCLStaiLCPse on ollut minulle ongelma. Joten ajattelin jakaa kokemukseni ja yrittää auttaa muita ymmärtämään tämän, varsinkin jos käyt läpi samaa. Tai ehkä sinulla on ollut ongelmia tämän kanssa ja sinulla on ainutlaatuinen näkökulma tai ratkaisu? Haluaisin mielelläni kuulla siitä.

MukaanHakukonepäiväkirja, näiden kahden mittarin optimointi voi parantaa merkittävästi sivustosi näkyvyyttä ja käyttäjätyytyväisyyttä. Se kuulosti hyvältä teoriassa, mutta itse asiassa niiden korjaaminen on ollut eri tarina. Anna minun käydä läpi, mitä olen oppinut.

Mitä CLS ja LCP tarkalleen ovat?

Ennen kuin pääsen omiin kamppailuihini, haluan selittää, mitä nämä todellisuudessa ovat, koska kun näin nämä lyhenteet ensimmäistä kertaa Google Search Consolessa, minulla ei ollut aavistustakaan, mitä ne tarkoittavat.

Kumulatiivinen ulkoasun muutos (CLS)mittaa kuinka paljon sivuasettelu hyppää ympäriinsä latautuessaan. Tiedätkö, kun aiot napauttaa painiketta ja koko sivu siirtyy, joten napsautat väärää asiaa? Se on CLS-ongelma. Se on uskomattoman turhauttavaa käyttäjänä, ja osoittautuu, että myös hakukoneet rankaisee sinua siitä.

Suurin sisältöä sisältävä maali (LCP)mittaa, kuinka kauan kestää, että sivusi suurin näkyvä elementti latautuu. Yleensä se on sankarikuva tai suuri tekstilohko. Jos LCP on hidas, vierailijasi tuijottavat puoliksi ladattua sivua, ja monet vain poistuvat.

Molemmat kuuluvat Googlen piiriinCore Web Vitals, jotka vaikuttavat suoraan hakusi sijoitukseen. Joten vaikka sisältösi on loistava, huonot CLS- ja LCP-pisteet voivat estää sinua.

Optimoi verkkosivustosi CLS:lle ja LCP:lle

🖼️

Aseta kuvan mitat
Määritä kuvien leveys ja korkeus

📢

Käytä mainoksia vastuullisesti
Vältä odottamattomia mainoksen koon muutoksia

⚡

Esilataa tärkeitä resursseja
Varmista, että tärkeä sisältö latautuu nopeasti

🔄

Minimoi dynaaminen sisältö
Rajoita sisältöä, joka muuttuu latauksen aikana

📊

Seuraa suorituskykyä säännöllisesti
Käytä työkaluja CLS- ja LCP-pisteiden seuraamiseen

Minun CLS painajainen

CLS oli ensimmäinen ongelma, johon törmäsin. Sivuni näyttivät minusta hyviltä, mutta tulokseni olivat kauheita. Pitkän kaivauksen jälkeen löysin pääsyylliset:

Kuvat ilman mittoja:En asettanut kuvilleni leveyttä ja korkeutta. Selaimella ei ollut aavistustakaan kuinka paljon tilaa varata, joten kaikki muuttui kuvien latautuessa.
Fontit latautuvat myöhässä:Omat kirjasimeni latautuivat sivun renderöinnin jälkeen, mikä sai kaiken tekstini hyppäämään, kun uusi fontti korvasi varakirjasimen. Tämä oli hienovarainen, mutta se lisäsi.
Dynaaminen sisältö:Minulla oli joitakin osia, jotka lisäsivät sisältöä sivun latautumisen jälkeen työntäen kaiken alla olevan alaspäin.

Useimpien CLS-ongelmieni korjaus oli yllättävän yksinkertainen. Aloin määritellä selkeät mitat kaikille kuville ja medialle. Lisäsin fontin-näytön vaihdon kirjasinten lataukseen, jotta varaosa hahmonnetaan välittömästi. Ja varasin tilaa CSS:llä kaikelle dynaamisesti latautuvalle sisällölle.

Työkalut kutenGoogle PageSpeed Insightsolivat suureksi avuksi täällä. Ne näyttävät tarkalleen, mitkä elementit aiheuttavat asettelun muutoksia, joten et arvaa.

Sitten tuli LCP-ongelma

Juuri kun luulin saaneeni asiat järjestykseenLCP-pisteetalkoi liputtaa. Turhauttavaa oli, että sivustoni latautui minulle nopeasti Isossa-Britanniassa, mutta analytiikkani osoitti kauheita nopeuksia muissa maissa. Tämä on asia LCP:ssä - se riippuu suuresti siitä, missä käyttäjät ovat ja kuinka kaukana he ovat palvelimestasi.

Tärkeimmät löytämäni ongelmat olivat:

Suuret optimoimattomat kuvat:Sankarikuvani olivat aivan liian suuria. Lähetin täyden resoluution kuvia pakkaamatta niitä.
Palvelimen vasteaika:Ilman CDN:ää käyttäjät kaukana palvelimestani odottivat ensimmäistä vastausta.
Renderöinnin estävä JavaScript:Päähän latautui komentosarjoja, jotka estivät sivua hahmontamasta, kunnes ne valmistuivat.

KutenBacklinkon tutkimusnäyttää, sivustoilla, joilla on hyvät LCP-pisteet, on huomattavasti parempi sitoutuminen ja alhaisemmat poistumisprosentit. Kun aloin korjata näitä ongelmia, huomasin eron omassa analytiikassani.

Mikä todella auttoi LCP:täni

Aloin pakata kaikkia kuviani ja käyttää WebP-muotoa mahdollisuuksien mukaan. Siirsin myös ei-välttämättömät skriptit latautumaan asynkronisesti tai lykkäsin niitä kokonaan. Sivustojani isännöi Vercel, joka hoitaa minulle paljon reunaverkkoasioita, mutta jos käytät perinteistä isännöintiä, määritäCDNvoi olla suuri merkitys kansainväliselle liikenteelle.

CDN tallentaa kopiot sivustostasi eri puolilla maailmaa, joten vierailijoita palvellaan jostain lähemmäsltä palvelimeltasi. Jos näet huonoja nopeuksia tietyillä alueilla, se on yksi ensimmäisistä tarkastelun arvoisista asioista.

Ärsyttävä osa - sitä ei koskaan todella "korjattu"

Tässä on se, mistä kukaan ei kerro sinulleCLS ja LCP. Et korjaa niitä kerran ja jatka eteenpäin. Aina kun lisään uuden ominaisuuden, uuden kuvan tai vaihdan asettelua, pisteet voivat muuttua uudelleen. Se on jatkuva asia.

Minulla on ollut viikkoja, jolloin kaikki on vihreää Google Search Consolessa, ja sitten lisään yhden uuden komponentin, ja yhtäkkiä CLS-ni on jälleen merkitty. Se on suorastaan ärsyttävää, mutta olen oppinut tarkistamaan Core Web Vitals -tietoni jokaisen merkittävän muutoksen jälkeen.

CLS:n ja LCP:n vaikutus käyttökokemukseen

0,1 sekuntia

Käyttäjän toleranssi

32 %

Poistumisprosentin nousu

7 %

Muuntokurssin lasku

Core Web Vitals

SEO-sijoituksen merkitys

Raportti kirjoittajaltaTalousbrändikorostaa, kuinka hitaat verkkosivustot voivat suoraan johtaa tulojen menetykseen. Se on tarpeeksi motivaatiota pysyä sen päällä, vaikka se tuntuu tylsältä.

Välineet, jotka ovat auttaneet minua eniten

Jos käsittelet samoja ongelmia, tässä ovat työkalut, joita käytän ja joista olen apua:

Google Search Console:Tässä huomasin ensimmäisen kerran ongelmani. Se näyttää Core Web Vitals -pisteesi sivuittain eriteltynä ja kertoo tarkalleen, mikä vaatii huomiota.
PageSpeed Insights:Käyn tämän jokaisen sivun läpi muutosten tekemisen jälkeen. Se antaa konkreettisia, toteutettavissa olevia suosituksia epämääräisten neuvojen sijaan.Shopifyn verkkosuorituskykyopason myös loistava kumppaniresurssi.
Web Vitals -laajennus:Tämä Chrome-laajennus näyttää CLS-, LCP- ja muut mittasi reaaliajassa, kun selaat omaa sivustoasi. Pidän sitä jatkuvasti päällä kehityksen aikana.

Kun olet tunnistanut suorituskykyongelmasi, käytä meidänGoogle Search AI ranking työkalutarkistaaksesi, johtavatko parannukset parempaan haun näkyvyyteen. Ei ole mitään järkeä vahvistaa pisteitä, jos se ei auta sijoitustasi.

Minun neuvoni, jos käyt tämän läpi

Jos suorituksesi on ollut yhtä hyvä kuin minun, suosittelen seuraavaa:

Älä hätäänny.CLS- ja LCP-ongelmat ovat uskomattoman yleisiä. Et tee kaikkea väärin – nämä mittarit ovat vain herkkiä.
Tarkista analytiikkasi maittain.Sivustosi saattaa olla nopea sinulle, mutta hidas vierailijoille muualla. CDN voi ratkaista tämän nopeasti.
Korjaa kuvat ensin.Kokemukseni mukaan optimoimattomat kuvat ja puuttuvat mitat ovat syynä useimpiin CLS- ja LCP-ongelmiin.
Testaa jokaisen muutoksen jälkeen.Ota käyttöön PageSpeed Insights aina, kun teet merkittäviä päivityksiä.
Ole kärsivällinen.Google Search Consolen tietojen päivittäminen voi kestää päiviä tai viikkoja. Älä oleta, että korjauksesi eivät toimi vain siksi, että kojelautaa ei ole vielä muutettu.

Opin edelleen ja käsittelen tätä edelleen. Pisteeni ovat paremmat kuin ne olivat, mutta en sanoisi niitä täydellisiksi. Jos olet löytänyt sinulle toimivia ratkaisuja, haluan todella kuulla niistä. Voit myös yrittää visualisoida suorituskykytietosi meidän avullammeilmainen online-kaaviontekijäseurata parannuksia ajan myötä.

Lopputulos on tämä:CLS ja LCPeivät mene pois. Niillä on merkitystä hakukoneoptimoinnin kannalta, niillä on merkitystä käyttökokemuksen kannalta, ja jos käytät verkkosivustoja kuten minä, ne pitävät sinut varpaillasi. Mutta ne ovat korjattavissa, ja jokainen tekemäsi parannus on sen arvoista.