Visiškai patenkinti "Google" neįmanoma. Jau seniai jos atsisakiau, nors yra problemų, kurias reikia spręsti, pavyzdžiui, CLS (Cumulative Layout Shift).
Kaupiamasis maketo poslinkis
Kaupiamasis išdėstymo poslinkis - tai kaupiamasis išdėstymo pokytis. Šis rodiklis svarbus, nes pagal jį analizuojamas vizualinis stabilumas ir dažnumas, kai lankytojai patiria netikėtų maketo pokyčių.
Trumpai tariant, jis matuoja bet kokį puslapio viršuje esančių elementų poslinkį krovimo metu.
Mažas CLS padeda užtikrinti, kad puslapis būtų malonus akiai, ir išvengti erzinančių judesių, dėl kurių skaitytojas gali prarasti svarbių navigacijos elementų matomumą ir (arba) padėtį.
Jei CLS neviršija 0,1 balo, laikoma, kad naudotojo patirtis yra gera, o iki 0,25 balo ją reikia pagerinti, ir nuo šios ribos ji laikoma bloga. Tai, kaip, manau, jau žinote, galima išmatuoti keliais būdais. Plačiausiai naudojamas " PageSpeed Insights".
Kaip pažymėta " Core Web Vitals" dokumentuose, blogą CLS gali sukelti įvairūs elementai, pavyzdžiui, nežinomų matmenų paveikslėlis ar vaizdo įrašas, šriftas, kuris rodomas didesnis arba mažesnis nei jo alternatyva, arba trečiosios šalies reklama, valdiklis ar animacijos efektas, kuris dinamiškai keičia dydį.
Paradoksalu, bet kai kurie elementai, kurie dažniausiai ištrina CLS, yra "Google Adsense" skelbimai. Ypač jei naudojate automatinių skelbimų parinktį, leidžiančią "Google" viską nuspręsti (nerekomenduojama, geriausia naudoti automatinius skelbimus tik rodyti kulkinius ir (arba) inkarinius skelbimus). Pasitaiko atvejų, kai jie net visiškai sugadina krovimo greitį.
Kaip nustatyti poslinkį
Štai čia ir yra klausimo esmė: ko tiksliai turime ieškoti ir kaip tai rasti? Na, bet ko, kas keičia dydį ir (arba) pakrovimo metu pasislenka.
Dabar, kai jau bandome išspręsti "Adsense" problemą, galime apžvelgti kitus elementus, kurie gali būti CLS riebumo priežastimi. Yra įvairių būdų, kaip tai padaryti, štai keletas iš jų.
Žvelgiant į
Pats paprasčiausias metodas - paprastas stebėjimas iš akies. Jei poslinkis pastebimas, jį pamatysite iš karto, tačiau būna ir mažiau pastebimų judesių, kuriuos reikia apžiūrėti atidžiau.
Paieškos konsolėje
GSC skiltyje "Geriausi žiniatinklio metrikos rodikliai" galite gauti URL adresų, kuriuose yra CLS ir LCP problemų, sąrašą ir atidžiau juos išnagrinėti vieną po kito.
Kaupiamasis maketo poslinkio derintuvas
"Cumulative Layout Shift Debugger" - tai svetainė, kurioje įvedate norimą analizuoti URL adresą ir sukuriamas animuotas GIF failas, kuriame rodomi visi mobiliosios ir darbalaukio versijų išdėstymo pakeitimai.
Šis "Chrome" inžinieriaus sukurtas įrankis yra vienas iš naudingiausių įrankių CLS problemoms rasti.
Jei didžioji dalis puslapio teksto yra paryškinta, tikėtina, kad dėl jūsų šriftų keičiasi išdėstymas.
Maketavimo poslinkio GIF generatorius
"Layout Shift GIF Generator" yra dar viena svetainė, kuri daro tą patį, ji sukuria gif su mobiliosios ir darbalaukio versijos poslinkiais. Galite ją išbandyti ir palyginti rezultatus. Kiekvieno įrankio matavimai visada šiek tiek skiriasi, todėl viename įrankyje galite rasti tai, ko kitas įrankis tam tikru metu negali parodyti arba neaptinka.
CLS vizualizatorius
Šis įrankis yra vienas paprasčiausių, tačiau su juo man pavyko užfiksuoti geriausius poslinkius.
"CLS Visualizer" yra labai naudingas plėtinys, kuris, kaip galima suprasti iš pavadinimo, padeda vizualizuoti puslapio kaupiamojo išdėstymo poslinkio metriką, tiksliai parodydamas, kurie elementai ir kaip keičiasi. Atkreipkite dėmesį, kad tai taip pat yra laboratorinis įrankis, kuris pateikia duomenis pagal jūsų įrenginį, naršyklę, ekrano skiriamąją gebą ar ryšio tipą.
Įjungus plėtinį, CLS matavimai bus rodomi sąraše, o spustelėjus kiekvieną iš jų, raudona spalva bus rodoma jį sukėlusio elemento animacija.
Dėl šio plėtinio daugelyje puslapių pasiekiau nulinį CLS lygį. Nors tai gali sukelti daugybė dalykų, todėl palikau jį įdiegtą, kad neskubėdamas peržiūrėčiau url adresus.
Iš to paties autoriaus gautas daug išsamesnis plėtinys " Core Web Vitals Visualizer ", kuris, kaip rodo jo pavadinimas, leidžia matyti "Core Web Vitals" matavimus.
Svetainės įkrovimo greičio keitimas naudojant "Chrome Dev Tools
"Chrome Dev Tools" siūlo įdomių galimybių, o viena iš naudingiausių, norint susipažinti su CLS, yra galimybė sumažinti puslapio įkėlimo dažnių juostos plotį, kad aiškiai matytumėte, kada keičiasi dizainas ir kurie elementai prie to prisideda.
Norėdami tai padaryti, naršyklėje atidarykite "Chrome Dev Tools", dešiniuoju pelės klavišu spustelėkite / apžiūrėkite savo svetainę ir skiltyje Tinklas raskite paveikslėlyje parodytą "Wifi" piktogramą, o šalia jos rasite išskleidžiamąjį langelį, kuriame galite pridėti pasirinktinį greitį.
Sukurkite naują profilį ir pridėkite 100 Kb arba mažiau, kad išbandytumėte jį "sulėtintai".
Dabar naršydami tokiu greičiu, kaip tada, kai internetas veikė sparčiai, daug lengviau nustatysite, kas gali kelti problemų kraunantis.
Atvaizdavimas
"Chrome Dev Tools" programoje "Layout Shift Regions" taip pat galite matyti mėlynai paryškintus išdėstymo pakeitimus, kai naršote puslapį realiuoju laiku.
Tai yra dizaino keitimo regionų aktyvavimo veiksmai:
Konsolėje ieškokite "Rendering" arba "rendering", jei ją turite anglų kalba.
Pažymėkite žymimąjį langelį "Rendering regions" ir visus kitus žymimuosius langelius, kuriuos norite išbandyti.
Dabar, kai naršysite puslapyje, maketo pakeitimai bus paryškinti mėlynai.
Su naršyklės plėtiniu
"Chrome" galite įdiegti plėtinį " CLS Checker - Journey Further " ir patikrinti visus URL adresus, kuriuose yra skyrybos ženklų. Be to, plėtinys pateikia užuominų raudonų etikečių pavidalu ir parodo elementų sąrašą bei jų sunaudojamą CLS. Spustelėjus "Toogle" išryškinamas atitinkamas elementas. Mano atveju, kadangi jau buvau išsprendęs "Adsense" reklamos problemą, rodomas tik vienas.
Webpagetest
Kita matavimo svetainė, kurioje galite atlikti testą tinklalapyje webpagetest.org ir pamatyti joje sukurtus vaizdo įrašus ir animuotus gifus.
Sustabdžius vaizdo įrašą lengviau rasti mažus poslinkius.
Atidžiau įsižiūrėję pamatysite, kad tiek meniu elementai, tiek antraštė ir tekstai yra šiek tiek pasislinkę į dešinę dėl, atrodo, pakeisto šrifto dydžio ir (arba) vietos, tačiau reklamos vieta virš antraštės jau yra rezervuota, todėl turinys žemyn nepersikelia. Problemą pavyko išspręsti šiek tiek sumažinus H1 dydį ir sutvarkius pridedamų tekstų apvyniojimą.
Bet tai jau kitas klausimas, dabar aptarsime skelbimų elgseną.
Skelbimų blokų laiko tarpsnių rezervavimo sprendimai
Ieškodamas geriausio ir greičiausio sprendimo radau, kad geriausias sprendimas buvo pridėti mažiausią aukščio vertę prie kiekvieno skelbimo bloko (div), kad būtų galima rezervuoti tą vietą ir išvengti slinkimo po pakrovimo.
Tačiau atrodo, kad nepakanka naudoti klasę, nurodančią į šią CSS savybę, bet taip pat reikia naudoti ID, skirtą apvalkalui. Atrodo, kad dėl nežinomų priežasčių "Google AdSense JavaScript" pašalina minimalaus aukščio direktyvas iš bet kurio tėvinio objekto. Tačiau jos nepašalinamos, jei CSS nukreipimui naudojamas ID.
Čia pateikiama santrauka ir išsamesnis paaiškinimas "Google" dokumentuose. Kadangi man šis sprendimas buvo varginantis, nes turėjau tikrinti visus blokus, ieškojau alternatyvos, kol radau tai, kas man tiko, t. y. " Ad Inserter". Tai buvo šie žingsniai.
Pritaikomų skelbimų keitimas į fiksuoto dydžio
Pirmiausia nustojau naudoti prisitaikančius skelbimų blokus. Pakeičiau visus blokus į fiksuoto dydžio.
Šis sprendimas turi būti išnagrinėtas ir įvertintas kiekvienu konkrečiu atveju.
Nors "Google" teigia, kad pritaikomieji skelbimai duoda daugiau pajamų (akivaizdu, kad dėl galimybės rodyti skirtingo dydžio skelbimus), tai yra gana elastinga ir gali skirtis priklausomai nuo skirtingų scenarijų. Jei pasirinksite populiariausius dydžius, skelbimai bus rodomi visada.
Išjungti dydžio optimizavimą
Nors blokai jau turi būti fiksuoto dydžio, turėtumėte išjungti parinktį, leidžiančią "Google" pačiai nustatyti mobiliųjų skelbimų dydį. Šią parinktį rasite "Adsense" administravimo skiltyje " Ads/Global Settings" (Skelbimai/Globaliniai nustatymai).
Taip išvengsime netikėtumų, jei paliksime kokį nors skelbimą, kurį įdėjome ranka. Bet kuriuo atveju tai, kad jie yra fiksuoto dydžio, nereiškia, kad jie nebereaguoja.
Rezervuokite vietą skelbimams naudodami "Ad Inserter
Manau, kad "Ad Inserter" yra geriausias skelbimų valdymo įskiepis, kurį netgi galima naudoti kitam turiniui pridėti.
Norėdami rezervuoti vietos kiekvienam skelbimui, tiesiog eikite į "Display" ir nustatykite kiekvieno bloko plotį ir aukštį arba tik aukštį.
Jei naudojate PRO versiją, taip pat galite išbandyti funkciją "Lazy Load", kuri taip pat padeda šiek tiek labiau sumažinti CLS.
Keletas pastabų
"Adsense" vietos rezervavimas turi trūkumų, kai skelbimai negali būti rodomi, nes jie nepateikiami tokio dydžio, arba bet kuriuo metu jūsų svetainėje nėra reklamuotojų, galite gauti tuščią vietą, kurios dydis atitinka rezervuotos vietos dydį.
"Ad Inserter" programoje tik serverio pusės intarpams galite tiesiogiai nustatyti aukštį naudodami pasirinktinį CSS kodą.
Atkreipkite dėmesį, kad skelbimo aukštis nustatomas pagal skelbimo kodą. Prisitaikantis skelbimo kodas gali nustatyti skelbimo aukštį pagal turimą vietą.
Kai kuriuose skelbimų tinkluose (pvz., "AdSense") taip pat gali būti rodomi skelbimai, kurie yra mažesni už turimą vietą. Bloko aukštis, kaip apibrėžta programoje "Ad Inserter", yra įterpto bloko aukštis, t. y. jį gaubiančio divo aukštis. Tai yra skelbimui skirta erdvė. Ją rezervuojant gali atsitikti taip:
- Jei reklamos aukštis sutampa su rezervuotos vietos aukščiu (bloko aukštis), dizainas nebus keičiamas ir tai neturės įtakos CLS.
- Jei reklamos aukštis yra didesnis nei rezervuotos vietos aukštis (bloko aukštis), gali būti, kad dizainas bus perkeltas žemyn, kad tilptų reklama, ir tai turės įtakos CLS.
- Jei reklamos aukštis yra mažesnis už rezervuotos vietos aukštį (bloko aukštį), po reklama bus tuščia vieta, tačiau išdėstymas nepasikeis ir neturės įtakos CLS.
Kai kurie skelbimų kodai, pavyzdžiui, "AdSense" prisitaikantis skelbimo kodas, gali pakeisti pagrindinių talpyklų aukštį. Tokiu atveju bloko aukštis bus perrašytas ir nebus taikomas.
Trumpai tariant, kai reikia skubiai išspręsti CLS problemas, kurias reikia išspręsti kuo mažiau keičiant dizainą, greičiausias variantas yra naudoti fiksuotus skelbimų dydžius, kai tik įmanoma.
Be to, kol tai darysite, galite įsitikinti, kad paveikslėliuose nėra trūkstamų matmenų, tai taip pat galima nustatyti įvairiais būdais. Keletas greitų ir paprastų būdų - naudoti Perfmatters ( įskiepis, kurį rekomenduoju) arba WP Rocket (abu mokami).
Arba " Litespeed Cache" įskiepį, jei tinklaraštį talpinate "Litespeed" serveryje.
Jei viskas vyko gerai, po kelių valandų CLS turėtų sumažėti lauko ataskaitose, o po kelių dienų - " PageSpeed Insights" laboratorijos ataskaitose.
