Kodėl aš tai rašau

Dabar turiu kelias svetaines, o nuo pat pradžių mano veikla labai pakilo ir sumažėjo. Mane tai kartais tiesiog erzina. Man atrodo, kad viskas taip gerai lokaliai, bet tada patikrinu savo serverio analizę ir matau, kad tam tikrose šalyse mano greitis buvo baisus.

Visada atrodė, kad taip ir yraCLSarbaLCPman tai buvo problema. Taigi maniau, kad pasidalinsiu savo patirtimi ir pabandysiu padėti kitiems tai išsiaiškinti, ypač jei išgyvenate tą patį. O gal turėjote problemų dėl to ir turite unikalų požiūrį ar sprendimą? Norėčiau apie tai išgirsti.

PagalPaieškos sistemos žurnalas, optimizuodami šias dvi metrikas galite žymiai pagerinti jūsų svetainės matomumą ir vartotojų pasitenkinimą. Teoriškai tai skambėjo puikiai, bet iš tikrųjų jų taisymas buvo kitokia istorija. Leiskite man paaiškinti, ką sužinojau.

Kas tiksliai yra CLS ir LCP?

Prieš pradėdamas savo kovas, leiskite paaiškinti, kas tai iš tikrųjų yra, nes kai pirmą kartą pamačiau šiuos akronimus „Google Search Console“, net neįsivaizdavau, ką jie reiškia.

Kaupiamasis išdėstymo poslinkis (CLS)matuoja, kiek jūsų puslapio išdėstymas šokinėja jį įkeliant. Ar žinote, kai ruošiatės bakstelėti mygtuką ir pasislenka visas puslapis, taigi spustelite ne tą dalyką? Tai yra CLS problema. Tai nepaprastai varginantis vartotojas, ir pasirodo, kad paieškos sistemos jus taip pat baudžia už tai.

Didžiausias turinio dažymas (LCP)matuoja, kiek laiko užtrunka, kol įkeliamas didžiausias matomas jūsų puslapio elementas. Paprastai tai yra herojaus vaizdas arba didelis teksto blokas. Jei jūsų LCP yra lėtas, jūsų lankytojai žiūri į pusiau įkeltą puslapį ir daugelis tiesiog išeis.

Abu jie priklauso „Google“.Pagrindiniai interneto gyvybiniai rodikliai, kurios tiesiogiai veikia jūsų paieškos reitingą. Taigi, net jei jūsų turinys yra puikus, prasti CLS ir LCP balai gali jus sulaikyti.

Optimizuokite savo svetainę CLS ir LCP

🖼️

Nustatykite vaizdo matmenis
Nurodykite vaizdų plotį ir aukštį

📢

Skelbimus naudokite atsakingai
Venkite netikėto skelbimo dydžio keitimo

⚡

Iš anksto įkelkite svarbius išteklius
Užtikrinkite greitą kritinio turinio įkėlimą

🔄

Sumažinkite dinaminį turinį
Apriboti turinį, kuris keičiasi įkeliant

📊

Reguliariai stebėkite našumą
Naudokite įrankius CLS ir LCP balams sekti

Mano CLS košmaras

CLS buvo pirmoji problema, su kuria susidūriau. Mano puslapiai man atrodė gerai, bet mano rezultatai buvo baisūs. Daug kasinėjant radau pagrindinius kaltininkus:

Nuotraukos be matmenų:Savo atvaizduose nenustačiau pločio ir aukščio. Naršyklė neįsivaizdavo, kiek vietos rezervuoti, todėl viskas pasikeitė, kai vaizdai buvo įkelti.
Šriftai įkeliami vėlai:Mano pasirinktiniai šriftai buvo įkeliami po puslapio pateikimo, todėl visas tekstas šokinėjo, nes naujas šriftas pakeitė atsarginį šriftą. Tai buvo subtilu, bet pridėjo.
Dinaminis turinys:Turėjau keletą komponentų, kurie įkėlus puslapį įnešdavo turinį, nustumdami viską, kas yra žemiau.

Daugumos mano CLS problemų sprendimas buvo stebėtinai paprastas. Pradėjau apibrėžti aiškius visų vaizdų ir laikmenų matmenis. Prie šrifto įkėlimo pridėjau šrifto ekrano keitimo funkciją, todėl atsarginis variantas bus rodomas nedelsiant. Ir aš rezervavau vietą su CSS bet kokiam dinamiškai įkeliamam turiniui.

Įrankiai kaipGoogle PageSpeed Insightsčia buvo didžiulė pagalba. Jie tiksliai parodo, kurie elementai sukelia išdėstymo poslinkius, todėl nespėjate.

Tada kilo LCP problema

Kai tik maniau, kad viskas sutvarkyta, manoLCP balaipradėjo žymėti. Varginanti dalis buvo tai, kad mano svetainė JK man buvo greitai įkeliama, tačiau mano analizė parodė siaubingą greitį kitose šalyse. Taip yra dėl LCP – tai labai priklauso nuo to, kur yra jūsų vartotojai ir kaip toli jie yra nuo jūsų serverio.

Pagrindinės problemos, kurias radau:

Dideli neoptimizuoti vaizdai:Mano herojaus atvaizdai buvo per dideli. Įkėliau visos raiškos nuotraukas jų nesuglaudinusi.
Serverio atsako laikas:Be CDN, vartotojai toli nuo mano serverio laukė pirmojo atsakymo.
Atvaizdavimą blokuojantis JavaScript:Galvoje buvo įkeliami scenarijai, kurie blokavo puslapio pateikimą, kol jie nebus baigti.

KaipBacklinko studijarodo, svetainės, turinčios gerus LCP balus, turi žymiai didesnį įsitraukimą ir mažesnius atmetimo rodiklius. Kai pradėjau taisyti šias problemas, pamačiau skirtumą savo analizėje.

Kas iš tikrųjų padėjo mano LCP

Pradėjau glaudinti visus vaizdus ir, kur įmanoma, naudoti WebP formatą. Taip pat perkėliau neesminius scenarijus, kad jie būtų įkeliami asinchroniškai, arba visiškai juos atidėjau. Mano svetainės yra priglobtos „Vercel“, kuri už mane tvarko daugelį pažangaus tinklo dalykų, bet jei naudojate tradicinį prieglobą, nustatykiteCDNgali labai pakeisti tarptautinį eismą.

CDN saugo jūsų svetainės kopijas įvairiose pasaulio vietose, todėl lankytojai aptarnaujami iš kažkur arčiau jų, o ne iš jūsų vieno šaltinio serverio. Jei tam tikruose regionuose matote blogą greitį, tai yra vienas iš pirmųjų dalykų, į kurį verta atkreipti dėmesį.

Erzinanti dalis – ji niekada „nepataisoma“

Štai apie ką jums niekas nepasakojaCLS ir LCP. Vieną kartą jų nepataisysite ir judėkite toliau. Kiekvieną kartą, kai pridedu naują funkciją, naują vaizdą arba pakeičiau išdėstymą, balai vėl gali pasikeisti. Tai nuolatinis dalykas.

Turėjau savaites, kai „Google Search Console“ viskas yra žalia, tada pridedu vieną naują komponentą ir staiga mano CLS vėl pažymėta. Tai labai erzina, bet dabar išmokau patikrinti savo pagrindinius žiniatinklio duomenis po kiekvieno reikšmingo pakeitimo.

CLS ir LCP įtaka vartotojo patirčiai

0,1 sekundės

Vartotojo tolerancija

32 %

Atmetimo rodiklio padidėjimas

7 %

Konversijos kurso kritimas

Pagrindiniai interneto gyvybiniai rodikliai

SEO reitingo svarba

Pranešimą pateikėFinansinis prekės ženklaspabrėžia, kaip lėtos svetainės gali tiesiogiai prarasti pajamas. Tai yra pakankama motyvacija, kad galėtum neatsilikti nuo to, net kai tai atrodo nuobodu.

Priemonės, kurios man padėjo labiausiai

Jei susiduriate su tomis pačiomis problemomis, štai įrankius, kuriuos iš tikrųjų naudoju ir manau, kad jie yra naudingi:

Google Search Console:Čia aš pirmą kartą pastebėjau savo problemas. Jame rodomi jūsų „Core Web Vitals“ balai, suskirstyti pagal puslapius, ir tiksliai nurodoma, į ką reikia atkreipti dėmesį.
„PageSpeed Insights“:Atlikęs pakeitimus, peržiūriu kiekvieną puslapį. Jame pateikiamos konkrečios, įgyvendinamos rekomendacijos, o ne neaiškūs patarimai.„Shopify“ žiniatinklio našumo vadovastaip pat yra puikus pagalbinis šaltinis.
Web Vitals plėtinys:Šis „Chrome“ plėtinys rodo jūsų CLS, LCP ir kitą metriką realiuoju laiku, kai naršote savo svetainę. Kurdamas jį nuolat naudoju.

Nustatę našumo problemas, naudokite mūsųGoogle Search AI reitingavimo įrankiskad patikrintumėte, ar jūsų patobulinimai iš tikrųjų pagerina paieškos matomumą. Nėra prasmės fiksuoti balus, jei tai nepadeda jūsų reitingams.

Mano patarimas, jei tai išgyvenate

Jei jūsų pasirodymas buvo toks pat aukštesnis ir mažesnis kaip ir mano, aš siūlyčiau štai ką:

Nepanikuoju.CLS ir LCP problemos yra neįtikėtinai dažnos. Jūs nedarote visko neteisingai – šie rodikliai yra tiesiog jautrūs.
Patikrinkite savo analizę pagal šalį.Jūsų svetainė gali būti greita jums, bet lėta lankytojams kitur. CDN gali greitai išspręsti šią problemą.
Pirmiausia pataisykite vaizdus.Mano patirtis rodo, kad neoptimizuoti vaizdai ir trūkstami matmenys yra daugelio CLS ir LCP problemų priežastis.
Išbandykite po kiekvieno pakeitimo.Įpraskite paleisti „PageSpeed Insights“, kai atliekate svarbių atnaujinimų.
Būkite kantrūs.„Google Search Console“ duomenų atnaujinimas gali užtrukti kelias dienas ar savaites. Nemanykite, kad jūsų pataisymai neveikia tik todėl, kad prietaisų skydelis dar nepasikeitė.

Aš vis dar mokausi ir vis dar su tuo susiduriu. Mano rezultatai geresni nei buvo, bet nepavadinčiau jų tobulais. Jei radote jums tinkamų sprendimų, tikrai noriu apie juos išgirsti. Taip pat galite pabandyti vizualizuoti savo našumo duomenis naudodami mūsųNemokamas internetinis diagramų kūrėjasstebėti patobulinimus laikui bėgant.

Esmė tokia:CLS ir LCPneišeina. Jie svarbūs SEO, naudotojų patirčiai, o jei kursite tokias svetaines kaip aš, jos padės jums atsigauti. Tačiau juos galima pataisyti, ir kiekvienas jūsų atliktas patobulinimas yra vertas.