Kaip rasti ir išspręsti maketo poslinkius naudojant „Chrome DevTools“

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.

Keturi „Google“ paieškos rezultatai "chai arbatos latte" kurie rodo „Core Web Vitals“ balus.  Paskutinių paveikslėlyje pateiktų rezultatų suminis išdėstymo poslinkio balas yra 1

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“.

Mobiliojo puslapio greičio įžvalgų ataskaita, kurioje rodomas receptų puslapis, kurio bendras išdėstymo poslinkio rezultatas yra 0,255

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į.

Tinklalapis, kurio kairėje prisegtas „DevTools“.  „DevTools“ yra atidarytas skirtuke „Elementai“.

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.

Kairėje atidarytas tinklalapis su „DevTools“.  Pasirinkta mobilioji emuliacija, todėl rodomas mobiliųjų įrenginių išskleidžiamasis meniu.

Dabar pereikime prie „DevTools“ skirtuko „Našumas“. Įsitikinkite, kad pasirinkote ekrano kopijas.

Tinklalapis su „DevTools“ atidarytas skirtuke „Našumas“.  Pasirinktas radijo mygtukas Ekrano kopijos.

„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.

Našumo profilis, rodomas „Chrome DevTools“

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į.

Pirmojo išdėstymo poslinkio suvestinės skirtukas.  Vertė "turėjo naujausią indėlį" yra "taip"

Š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.

Antroji puslapio išdėstymo poslinkio suvestinė

Š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.

Trečioji išdėstymo poslinkio suvestinė, kurioje rodomas bendrasis rezultatas - 0,2368.  The "susijęs mazgas" kintamojo vertė yra "span.tagline"

Š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.

„DevTools“ skirtuke Elementai bus paryškintas elementas „span.tagline“, rodantis puslapio elementą dešinėje

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.

„DevTools“ skirtukas Elementai, rodantis skirtuką „Apskaičiuoti stiliai“ div.wprm-receptų fragmentams

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.

„DevTools“ skirtuke „Elementai“, kuriame rodomi .wprm-receptų-fragmentų stiliai, dabar yra min-height: 200px

Kaip tai veikia mūsų išdėstymo poslinkį? Elemento „span.tagline“ poslinkis nebeegzistuoja.

O kaip bus su balais iš mūsų laboratorijos duomenų?

Puslapio greičio įžvalgos ataskaita apie atnaujintą kodą per ngrok.io su kaupiamuoju maketo balu 0,031

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.

„Page Speed ​​Insights“ ataskaita apie produktų kategorijos puslapį, kurio bendras išdėstymo balas yra 0,83

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.

„DevTools“ skirtukas „Elementai“, rodantis minimalų aukštį: 23 taškų CSS deklaraciją elemente span.stamped-product-reviews-badge

Vėlgi su viena CSS deklaracija mums pavyko išspręsti maketo poslinkį. The CLS pagerėjo iki 0,029 nuo 0,83!

Puslapio greičio įžvalgų ataskaita apie atnaujintą produktų kategorijos puslapį per „ngrok“ su kaupiamu maketo poslinkio balu 0,029

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!

Parašykite komentarą

El. pašto adresas nebus skelbiamas. Būtini laukeliai pažymėti *

Patarimai

Mokymai Statybininkams

Mokymai statybininkams: Svarbiausi aspektai Mokymai statybininkams – tai neatsiejama profesinio tobulėjimo dalis, padedanti ne tik įgyti naujų įgūdžių, bet ir stiprinti esamas kompetencijas. Atsiradus naujoms technologijoms bei statybų reglamentų pokyčiams, specialistai privalo nuolat atnaujinti savo žinias. Kodėl svarbūs mokymai statybininkams? Statybininkai dirba itin dinamiškoje ir atsakomybės reikalaujančioje srityje, kurioje saugumas, kokybė ir efektyvumas yra pagrindiniai […]

Read More
Patarimai

Kaip pasiruošti sklandžiam kraustymuisi Kauno mieste?

Kraustymasis gali būti vienas iš labiausiai stresą keliančių gyvenimo įvykių. Jei gyvenate Kaune ir planuojate persikraustyti, svarbu pasiruošti iš anksto ir apgalvoti visas detales. Šiame straipsnyje pateiksime praktinius patarimus, kaip pasiruošti sklandžiam kraustymuisi, kad viskas vyktų kuo paprasčiau. Taip pat aptarsime, kaip krovinių pervežimas Kaune gali palengvinti šį procesą. 1. Planuokite iš anksto 1.1. Sudarykite […]

Read More
Patarimai

Sklypo Projektavimas: Ką Būtina Žinoti?

Projektuojant sklypą, labai svarbu atsižvelgti į daugybę aspektų – nuo sklypo ypatybių iki asmeninių poreikių. Tai gali būti sudėtingas ir ilgalaikis procesas, tačiau kruopštus planavimas užtikrina, kad sklypas taps patogia ir estetiška erdve. Žemiau apžvelgsime pagrindinius etapus ir veiksnius, kuriuos reikia įvertinti. Pagrindiniai Sklypo Projektavimo Etapai 1. Sklypo Analizė ir Įvertinimas Pirmasis žingsnis yra atlikti […]

Read More