
Ar jūsų svetainė yra pasirengusi, kad „Core Web Vitals“ būtų pridėta prie puslapio patirties paieškos signalų? Nuo pat paskelbimo aš sutikau daugybę išteklių ir įrankių, skirtų patobulinti jūsų pagrindinius žiniatinklio gyvybinius ženklus (CWV). Vis tik labai nedaug įrankių pateikia išsamią informaciją apie vieno iš trijų pagrindinių „Web Vitals“ signalų atpažinimą ir patobulinimą: regėjimo stabilumas, taip pat žinomas kaip kaupiamasis išdėstymo poslinkis (CLS). Kaip paaiškino „Google“, „išdėstymas keičiasi bet kuriuo metu, kai matomas elementas keičia savo padėtį iš vieno pateikto kadro į kitą“. CLS matuoja visų netikėtų išdėstymo poslinkių tam tikrame puslapyje poveikį.
Dažnas pavyzdys, naudojamas parodyti CLS ir kaip jį ištaisyti, yra skelbimai. Kadangi skelbimai dažnai pateikiami iš trečiųjų šalių svetainių, jie įkeliami po puslapio turinio blokų ir naršymo elementų, nustumdami turinį žemyn arba į vieną pusę, kai pagaliau jie rodomi. Jei jūsų svetainėje nėra skelbimų turinio blokų, vis dėlto jūs nenusileisite CLS! Pažvelkime, kaip nustatyti, kurie elementai sukelia prastą CLS, ir kaip išspręsti išdėstymo poslinkius.
Puslapių su prasta CLS paieška
Nustatykite išdėstymo poslinkius
Mes turime keletą galimybių rasti puslapius su prasta CLS, remiantis laboratorijos duomenimis arba tikru vartotojo stebėjimu, dar vadinamu lauko duomenimis. Svarbu atkreipti dėmesį į jų skirtumą.
Laboratorijos duomenis galima gauti iš „Lighthouse“, „Page Speed Insights“ (PSI) ir „Chrome DevTools“. Čia kaip pavyzdžius naudosiu PSI ir „Chrome DevTools“, bet man labiau patinka puslapių ataskaitas vykdyti masiškai naudojant PSI API su mūsų „Google“ skaičiuoklių programų scenarijumi arba „Screaming Frog“.
Lauko duomenis galite gauti iš „Chrome“ naudotojo patirties (CrUX) ataskaitos. Šie duomenys skatina CWV metriką „Google Search Console“; „Speed Data Insights“ laukų duomenys; ir patogus „Chrome“ plėtinys „Core SERP Vitals“ iš defaced.dev. Atitinkamas puslapis per pastarąsias 28 dienas turėjo turėti „pakankamą skaičių skirtingų pavyzdžių, kurie pateiktų reprezentatyvų, anoniminį URL našumo vaizdą“, kad būtų galima generuoti šiuos duomenis iš „Google“. „Google“ Johnas Muelleris rekomenduoja naudoti laboratorijos duomenis, kad būtų galima nedelsiant stebėti. Nors naudosiu „Core SERP Vitals“ plėtinį, kad galėčiau rasti puslapius, kuriems gali prireikti CLS pagalbos, man reikės laboratorijos duomenų, kad galėčiau palyginti neatidėliotinus pakeitimus. Žemiau pateiktoje ekrano kopijoje galite pamatyti, kad šie du gali labai skirtis.
Naudodamas „Chrome“ plėtinį „Core SERP Vitals“ (ir ieškodamas mėgstamiausio karšto gėrimo), radau kelis galimus kandidatus, kaip pagerinti maketo pakeitimus. Paskutinis pavaizduotas rezultatas rodo 1,0 CLS.
Plėtinyje naudojami lauko duomenys, bet man reikia pažvelgti į laboratorijos duomenis, kad galėčiau juos paveikti. Aš paleisiu URL PSI įrankyje
norėdami pamatyti, ką rodo laboratorijos duomenys.
„Core SERP Vitals“ naudoja mobiliuosius duomenis, kuriuos PSI ataskaitos lauko duomenų skiltyje galite pamatyti, kaip rezultatas yra 1. Nors laboratorijos duomenų balas nėra toks aukštas kaip lauko duomenų, didesnis nei 0,25 balas vis tiek laikomas „prastu“.
Našumo ataskaitos vykdymas „Chrome DevTools“
Dabar, kai turime puslapį, kuriame galima įvertinti išdėstymo pokyčius, atidarykime „Chrome DevTools“.
Įkelkite URL į „Chrome“. Dešiniuoju pelės mygtuku spustelėkite puslapį ir pasirinkite „Tikrinti“. Tai atvers „DevTools“ skirtuką Elementai. Mes naudojame mobiliuosius duomenis, todėl turime nurodyti „DevTools“ imituoti mobilųjį įrenginį. Padarykite tai pasirinkdami piktogramą, esančią įrankių meniu kairėje, vaizduojančią planšetinį kompiuterį ir mobilųjį įrenginį.
Faktinio tinklalapio viršuje pasirinkite „iPhone X“, kad kadruose būtų rodoma daugiau. Rėmeliai padės pamatyti, kas keičiasi, todėl didesnis peržiūros langas leis pamatyti daugiau.
Dabar pereikime prie „DevTools“ skirtuko „Našumas“. Įsitikinkite, kad pasirinkote ekrano kopijas.
„Web Vitals“ parinktis buvo pridėta prie „DevTools“ naudojant „Chrome 88“, tačiau „Chrome 84“ pridėti maketo poslinkio duomenys pateikia mums daugiau informacijos. Pamatysite, kad našumo ataskaita gali atrodyti didžiulė keliuose skyriuose, todėl nesinaudosiu „Web Vitals“ parinktimi. Rekomenduočiau „DevTools“ iššokti į savo langą, pasirinkus trijų sukrautų taškų piktogramą, esančią „DevTools“ įrankių juostos dešinėje.
Pradėkite naują našumo įrašą paspausdami perkėlimo mygtuką arba „Ctrl“ + „Shift“ + E („Windows“). Šis įrašas užtruks kelias sekundes, kol bus iš naujo įkelta ir parengta ataskaita. Atsiras iššokantis langas, nurodantis, kas vyksta ir kiek laiko tai trunka. Kai jis bus baigtas, „Performance“ skirtukas atrodys labai spalvingas ir, kaip jau minėjau anksčiau, šiek tiek pribloškiantis.
Veiklos ataskaitos informacijos supratimas
Pirmiausia norime sutelkti dėmesį į ataskaitos patirties skyrių, kuriame parodomi išdėstymo poslinkiai raudonais blokais. Kai pasirenkate konkretų išdėstymo poslinkio bloką, lango „Našumas“ apačioje pateiktame skirtuke „Santrauka“ bus pateikta išsami informacija apie poslinkį.
Šis pirmasis išdėstymo poslinkis nereikėtų jaudintis. Atminkite, kad CLS yra balų suma, pagrįsta netikėta pamainomis. Šis išdėstymo poslinkis rodo, kad vartotojo įvestis yra priežastis, dėl kurios pasikeitė. Laukiami vartotojo įvesties pokyčiai į CLS neskaičiuojami.
Šis antrasis išdėstymo poslinkis yra netikėtas – galime pasakyti, nes jo reikšmė yra „ne“ kintamajam „neseniai buvo įvestas“. Kai šis pokytis prisideda prie CLS balo tik 0,004, tai nėra per daug problemiška. CLS yra bendra suma, taigi, jei jų būtų keli, turėtume jas išspręsti.
Šis pastarasis išdėstymo poslinkio blokas yra tas, kuriame sutelksime savo pastangas. Mes matome, kad vien tai prisideda prie CLS 0,23, priskiriant jį 0,1–0,25 „tobulinimo poreikių“ diapazonui. „DevTools“ skirtuke „Elementai“ pasirinkite elementą „Susijęs mazgas“. Tai padarę, mes galėsime pamatyti, kas buvo perkelta.
Dabar, kai žinome, kad keičiasi žymos egzempliorius „Natūralaus gyvenimo ir tikro maisto paprastumo užtikrinimas“, skirtuke „Našumas“ galime patikrinti savo rėmus, kad sužinotume, kas nutiko.
Perkelkite ekrano šliaužiklį, kad „priartintumėte“ šį našumo profilio skyrių. Tegul priartinta dalis prasideda prieš pat išdėstymo poslinkio bloką. Jei turite pelės ratuką, galite jį naudoti ir priartindami. Tada galite nuvilkti žymeklį ant rėmelių, esančių našumo profilio viršuje, kad pamatytumėte, kas nutiko perkeliant žymos eilutę. Užuomina: jei susijęs maketas jūsų išdėstymo poslinkyje yra „žemiau matomos ribos“, galite slinkti žemyn iki elemento ir pakartotinai paleisti našumo profilį, kad jį užfiksuotumėte rėmeliuose.
Peržiūrėjus ekrano kopijas, paaiškėja, kad mygtukų blokas pastumia žymos eilutę šio išdėstymo poslinkio metu.
Išdėstymo poslinkių taisymas
Norėdami tai išspręsti, turiu suprasti, kas vyksta su tuo mygtukų bloku, todėl juos apžiūrėsiu skirtuke Elementai.
Kadangi skirtuke „Apskaičiuoti stiliai“ „aukštis“ yra nepermatomas, žinome, kad aukštis iš tikrųjų nėra tiesiogiai taikomas elementui; Vietoj to, tai nustatoma pagal juose esančių mygtukų aukštį.
Užuot pasikliaudamas atskiromis mygtukų apkrovomis nustatydamas šio elemento aukštį, aš pridėsiu minimalų aukštį ir pamatysiu, kaip tai veikia pakrovimo ir išdėstymo poslinkį.
Kad galėčiau koduoti šį pakeitimą, turiu į redagavimo priemonę įsitraukti visą svetainės HTML, atlikti atnaujinimus vietoje ir tada savo vietinius failus turiu viešame serveryje, kad PSI galėtų jį pasiekti, kad galėčiau išbandyti poveikį CLS . Paskutinė to dalis įmanoma „ngrok“ dėka. Jei norite sužinoti, kaip nustatyti „ngrok“, „Google“ turi puikią mokymo programą. Turėsite išmanyti komandinės eilutės naudojimą, todėl peržiūrėkite mano patarimus.
Pažvelkime į mano atnaujintą tinklalapį. Stiliuose galite pamatyti, kad elemente div.wprm-receptas-fragmentai dabar yra mažiausias 200 taškų aukštis.
Kaip tai veikia mūsų išdėstymo poslinkį? Elemento „span.tagline“ poslinkis nebeegzistuoja.
O kaip bus su balais iš mūsų laboratorijos duomenų?
Mes nuėjome iš CLS balas nuo 0,255 iki 0,031 pakeitus vieną CSS deklaraciją! Pastaba: kita našumo metrika atrodys visiškai kitokia nei pirminė PSI ataskaita, nes tai yra vietinis serveris.
Manote, kad man tiesiog pasisekė, ar kad šis procesas veikia tik tam tikrų tipų svetainėse? Ėmiausi to paties proceso ir pritaikiau jį elektroninės prekybos svetainėje.
Laboratorijos duomenys šiame čai arbatos kategorijos puslapyje prasidėjo nuo 0,83 CLS.
Naudodamas tą patį našumo ataskaitos maketo poslinkių tikrinimo procesą radau, kad apžvalgos žvaigždės sukelia poslinkį, kaip parodyta toliau pateiktame vaizdo įraše.
Prie elementų pridėjau minimalų aukštį su „stamped-product-reviews-badge“ klase.
Vėlgi su viena CSS deklaracija mums pavyko išspręsti maketo poslinkį. The CLS pagerėjo iki 0,029 nuo 0,83!
Nors šie du pavyzdžiai buvo pataisyti nustatant minimalų elementų aukštį, kita dažna išdėstymo poslinkio priežastis yra žiniatinklio šriftai, kurie gali pakeisti turinio blokų aukštį arba plotį, kai jie yra taikomi tų blokų tekstui. Mūsų elektroninės prekybos klientas turėjo blogą CLS dėl interneto šriftų įkėlimo. Keli mūsų atlikti patobulinimai, dėl kurių jų CLS pateko į gerą diapazoną:
Net jei neturite kodavimo žinių, kad išspręstumėte šiuos išdėstymo poslinkius, skirkite laiko, kad geriau susipažintumėte su našumo ataskaita. Jei galiu tai padaryti per dvi nepažįstamas svetaines per porą dienų, įsivaizduokite, ką galite patobulinti iki gegužės! Tiesą sakant, abi šios svetainių pavyzdys jau atnaujino šiuos elementus, nes aš pradėjau tirti ir rašyti šį įrašą. Jei jie tai sugeba, tai galite padaryti ir jūs!