Kāpēc Es Rakstu Šo

Tagad es pārvaldu dažas tīmekļa vietnes, un kopš sākuma mana veiktspēja ir ļoti uzlabojusies un kritusies. Man tas reizēm šķita kaitinoši. Šķiet, ka man lokāli viss darbojas tik labi, bet tad es pārbaudu sava servera analīzi un redzu, ka noteiktām valstīm mans ātrums ir bijis šausmīgs.

Vienmēr ir šķitis, ka tas ir vai nuCLSvaiLCPtā man ir bijusi problēma. Tāpēc es domāju, ka dalīšos savā pieredzē un mēģināšu palīdzēt citiem to noskaidrot, it īpaši, ja jūs piedzīvojat to pašu. Vai varbūt jums ir bijušas problēmas ar to un jums ir unikāla perspektīva vai risinājums? Es labprāt par to dzirdētu.

Saskaņā arMeklētājprogrammas žurnāls, optimizējot šos divus rādītājus, var ievērojami uzlabot jūsu vietnes redzamību un lietotāju apmierinātību. Teorētiski tas izklausījās lieliski, taču faktiski to labošana ir bijis cits stāsts. Ļaujiet man iepazīstināt jūs ar to, ko esmu iemācījies.

Kas tieši ir CLS un LCP?

Pirms sāku ķerties pie savām grūtībām, ļaujiet man paskaidrot, kas tie īsti ir, jo, kad pirmo reizi ieraudzīju šos akronīmus pakalpojumā Google Search Console, man nebija ne jausmas, ko tie nozīmē.

Kumulatīvā izkārtojuma maiņa (CLS)mēra, cik lielā mērā jūsu lapas izkārtojums tiek ielādēts. Vai jūs zināt, kad grasāties pieskarties pogai un visa lapa mainās, tāpēc noklikšķināt uz nepareizās lietas? Tā ir CLS problēma. Tas ir neticami kaitinoši kā lietotājs, un izrādās, ka meklētājprogrammas arī jūs par to soda.

Lielākā saturiskā krāsa (LCP)mēra, cik ilgs laiks nepieciešams, līdz tiek ielādēts jūsu lapas lielākais redzamais elements. Parasti tas ir varoņa attēls vai liels teksta bloks. Ja jūsu LCP ir lēns, jūsu apmeklētāji skatās uz puspielādētu lapu, un daudzi vienkārši pametīs.

Uz abiem attiecas GoogleGalvenās tīmekļa Vitals, kas tieši ietekmē jūsu meklēšanas rangu. Tātad, pat ja jūsu saturs ir izcils, slikti CLS un LCP rādītāji var jūs atturēt.

Optimizējiet savu vietni CLS un LCP

🖼️

Iestatiet attēla izmērus
Norādiet attēlu platumu un augstumu

📢

Izmantojiet reklāmas atbildīgi
Izvairieties no negaidītas reklāmas izmēru maiņas

⚡

Iepriekš ielādējiet svarīgus resursus
Nodrošiniet kritiskā satura ātru ielādi

🔄

Samaziniet dinamisko saturu
Ierobežojiet saturu, kas mainās ielādes laikā

📊

Regulāri uzraudzīt veiktspēju
Izmantojiet rīkus, lai izsekotu CLS un LCP rezultātus

Mans CLS murgs

CLS bija pirmā problēma, ar kuru es saskāros. Manas lapas man izskatījās labi, taču mani rezultāti bija briesmīgi. Pēc ilgas rakšanas es atradu galvenos vainīgos:

Attēli bez izmēriem:Es saviem attēliem neiestatīju platumu un augstumu. Pārlūkprogrammai nebija ne jausmas, cik daudz vietas rezervēt, tāpēc, kad attēli tika ielādēti, viss mainījās.
Fonti tiek ielādēti vēlu:Mani pielāgotie fonti tika ielādēti pēc lapas renderēšanas, kā rezultātā viss mans teksts pārlēca, jo jaunais fonts aizstāja rezerves fontu. Šis bija smalks, bet tas tika pievienots.
Dinamiskais saturs:Man bija daži komponenti, kas ievadīja saturu pēc lapas ielādes, nospiežot visu zem tām uz leju.

Labojums lielākajai daļai manu CLS problēmu bija pārsteidzoši vienkāršs. Es sāku noteikt precīzus izmērus visiem attēliem un medijiem. Es pievienoju fonta displeja maiņas funkciju savai fontu ielādei, lai atkāpšanās tiktu parādīta nekavējoties. Un es rezervēju vietu, izmantojot CSS, jebkuram saturam, kas tiek ielādēts dinamiski.

Tādi rīki kāGoogle PageSpeed Insightsšeit bija milzīgs palīgs. Tie precīzi parāda, kuri elementi izraisa izkārtojuma izmaiņas, tāpēc jums nav jāmin.

Tad radās LCP problēma

Tieši tad, kad es domāju, ka lietas ir sakārtotas, mansLCP rādītājisāka atzīmēt. Apgrūtinošākais bija tas, ka mana vietne Lielbritānijā man tika ielādēta ātri, taču citās valstīs mana analīze uzrādīja briesmīgu ātrumu. Tā ir lieta par LCP — tas lielā mērā ir atkarīgs no tā, kur atrodas jūsu lietotāji un cik tālu viņi atrodas no jūsu servera.

Galvenās problēmas, ko atradu, bija:

Lieli neoptimizēti attēli:Mani varoņu attēli bija pārāk lieli. Es augšupielādēju pilnas izšķirtspējas fotoattēlus, tos nesaspiežot.
Servera reakcijas laiks:Bez CDN lietotāji tālu no mana servera gaidīja pirmo atbildi.
Renderēšanu bloķējošs JavaScript:Manā galvā tika ielādēti skripti, kas bloķēja lapas renderēšanu, līdz tie tika pabeigti.

KāBacklinko pētījumsrāda, vietnēm ar labiem LCP rādītājiem ir ievērojami labāka iesaistīšanās un zemāks atlēcienu līmenis. Kad sāku novērst šīs problēmas, es redzēju atšķirību savā analīzē.

Kas patiesībā palīdzēja manam LCP

Es sāku saspiest visus savus attēlus un pēc iespējas izmantot WebP formātu. Es arī pārvietoju nebūtiskus skriptus, lai ielādētu asinhroni vai atliktu tos pilnībā. Manas vietnes tiek mitinātas vietnē Vercel, kas manā vietā apstrādā lielu daļu no malas tīkla lietām, taču, ja izmantojat tradicionālo mitināšanu, iestatietCDNvar būtiski mainīt starptautisko satiksmi.

CDN glabā jūsu vietnes kopijas vietās visā pasaulē, tāpēc apmeklētāji tiek apkalpoti no kaut kur tuvāk viņiem, nevis no jūsu viena izcelsmes servera. Ja konkrētos reģionos novērojat sliktu ātrumu, tā ir viena no pirmajām lietām, kurai vērts pievērst uzmanību.

Kaitinošā daļa — tā nekad nav īsti "labota"

Lūk, par ko neviens jums nestāstaCLS un LCP. Jūs tos vienreiz neizlabojat un virzāties tālāk. Katru reizi, kad pievienoju jaunu līdzekli, jaunu attēlu vai mainu izkārtojumu, rezultāti var atkal mainīties. Tā ir nepārtraukta lieta.

Man ir bijušas nedēļas, kad Google Search Console viss ir zaļš, un tad es pievienoju vienu jaunu komponentu, un pēkšņi mans CLS atkal tiek atzīmēts. Tas ir ļoti kaitinoši, taču tagad esmu iemācījies pārbaudīt savu galveno tīmekļa Vitals pēc katrām būtiskām izmaiņām.

CLS un LCP ietekme uz lietotāju pieredzi

0,1 sekunde

Lietotāja tolerance

32%

Atlēcienu līmeņa paaugstināšana

Reklāmguvumu līmeņa kritums

Galvenās tīmekļa Vitals

SEO ranga nozīme

Ziņojums noFinanšu zīmolsuzsver, cik lēnas vietnes var tieši izraisīt ieņēmumu zudumu. Tā ir pietiekama motivācija, lai saglabātu to, pat ja tas šķiet nogurdinoši.

Rīki, kas man ir palīdzējuši visvairāk

Ja jūs saskaraties ar tām pašām problēmām, tālāk ir norādīti rīki, kurus es faktiski izmantoju un kuri man šķiet noderīgi.

Google Search Console:Šeit es pirmo reizi pamanīju savas problēmas. Tas parāda jūsu Core Web Vitals rādītājus, kas sadalīti pa lapām, un precīzi norāda, kam jāpievērš uzmanība.
PageSpeed Insights:Pēc izmaiņu veikšanas es pārlaidu šo katru lapu. Tas sniedz konkrētus, praktiskus ieteikumus, nevis neskaidrus padomus.Shopify tīmekļa veiktspējas rokasgrāmatair arī lielisks palīgresurss.
Web Vitals paplašinājums:Šis Chrome paplašinājums reāllaikā parāda jūsu CLS, LCP un citus rādītājus, kad pārlūkojat savu vietni. Es to pastāvīgi turu ieslēgtu izstrādes laikā.

Kad esat identificējis veiktspējas problēmas, izmantojiet mūsuGoogle meklēšanas AI ranžēšanas rīkslai pārbaudītu, vai jūsu uzlabojumi patiešām nodrošina labāku meklēšanas redzamību. Nav jēgas noteikt punktu skaitu, ja tas nepalīdz jūsu klasifikācijai.

Mans padoms, ja jūs to darāt

Ja jūsu sniegums ir bijis tikpat augsts un zemāks kā mans, es ieteiktu tālāk norādīto.

Neļauties panikai.CLS un LCP problēmas ir neticami izplatītas. Jūs nedarāt visu nepareizi — šie rādītāji ir vienkārši jutīgi.
Pārbaudiet savu analīzi pēc valsts.Jūsu vietne var būt ātra jums, bet lēna apmeklētājiem citur. CDN to var ātri atrisināt.
Vispirms labojiet attēlus.Mana pieredze liecina, ka lielāko daļu CLS un LCP problēmu izraisa neoptimizēti attēli un trūkstošie izmēri.
Pārbaudiet pēc katras izmaiņas.Iemācieties palaist PageSpeed Insights ikreiz, kad veicat nozīmīgus atjauninājumus.
Esiet pacietīgs.Google Search Console datu atjaunināšana var ilgt vairākas dienas vai nedēļas. Nedomājiet, ka jūsu labojumi nedarbojas tikai tāpēc, ka informācijas panelis vēl nav mainīts.

Es joprojām mācos un joprojām ar to nodarbojos. Mani rādītāji ir labāki nekā tie bija, bet es tos nesauktu par perfektiem. Ja esat atradis risinājumus, kas jums noderēja, es patiesi vēlos par tiem dzirdēt. Varat arī mēģināt vizualizēt savus veiktspējas datus, izmantojot mūsubezmaksas tiešsaistes diagrammu veidotājslai izsekotu uzlabojumiem laika gaitā.

Apakšējā līnija ir šāda:CLS un LCPneiet prom. Tie ir svarīgi gan SEO, gan lietotāju pieredzei, un, ja jūs pārvaldāt tādas vietnes kā es, tās jums palīdzēs. Bet tie ir labojami, un katrs jūsu veiktais uzlabojums ir tā vērts.