Greičio auditorius: sužinokite, kas stabdo jūsų "WordPress

Kai kurie "WordPress" svetainių administratoriai yra apsėsti "PageSpeed Insights" arba "GTmetrix". Mano ir daugelio kitų, kurie apie tai išmano daug daugiau, patarimas yra toks, kad neturėtumėte suteikti šiems rodikliams daugiau svarbos, nei jie turi.

Jei suvokiamas įkėlimo greitis yra geras, nebūtina viską pateikti "žaliai". Daugeliu atvejų tai netgi duoda priešingą rezultatą, nes galite per daug optimizuoti arba, dar blogiau, bandydami ištaisyti vieną dalyką, galite sugadinti įvairius dalykus.

Vis dėlto, nesvarbu, ar esate WPO mėgėjas, ar optimizavimo entuziastas, ar tiesiog norite pabandyti pagerinti savo svetainės reakciją, šie įrankiai yra beveik būtini. Problema ta, kad jie siūlo iš išorinių serverių paimtus "nejudančius paveikslėlius". Tačiau kas atsitinka, kai jūs, kaip administratorius, naršote savo svetainę, ką daryti su tomis reklamomis, kurios vėluoja įkelti, arba meniu, kuris šokinėja kaip tik tada, kai ketinate spustelėti?

Kilmė

"Speed Auditor" atsirado kaip atsakas į asmeninį poreikį turėti keletą paprastų, bet galingų vietinių diagnostikos įrankių. Tai nėra optimizavimo įskiepis (jis nieko nekeičia jūsų kode), tai realaus laiko audito įskiepis.

Jei ieškote gero, galbūt geriausio, mokamo WPO įskiepio, su kuriuo galima atlikti pakeitimus ir smulkų derinimą, pažvelkite į Perfmatters. Kita vertus, jei ieškote ko nors nemokamo ir paprasto, dėl kurio nereikėtų sukti galvos dėl nustatymų ir koregavimų, bet kuris turėtų daug galimybių, galite išbandyti Fernando Tellado sukurtą " WPO Rocket Tweaks", kurį rasite "WordPress" saugykloje.

Jei nežinote, kas yra DOM mazgas arba vėlavimo metrika, nesijaudinkite. Greičio auditorius sukurtas taip, kad padėtų jums iš pirmo žvilgsnio suprasti savo svetainę:

• Išmanusis indikatorius: Administratoriaus juostoje atsiras spalvą keičianti piktograma. Jei ji yra žalia, jūsų LCP (laikas, per kurį galima pamatyti svarbiausius dalykus) yra optimalus. Jei ji tampa oranžinė arba raudona, į kažką reikia atkreipti dėmesį.

• Atlikite auditą naršydami: Jums nereikia konfigūruoti nieko sudėtingo. Įjungiate įskiepį ir, kol tikrinate įrašus, jis veikia fone ir analizuoja, ar jūsų paveikslėlių nėra per daug arba ar jūsų serveris reaguoja vangiai.
• Daugiau pranešimų apie žmones: Vienu paspaudimu atsisiųskite .txt failą, kurį galite nusiųsti kūrėjui arba išsaugoti, kad pritaikius pakeitimus galėtumėte palyginti rezultatus.

Po variklio dangčiu

1.1.8 versijoje bandoma pateikti šiek tiek gilesnę diagnostiką, kad būtų sutaupyta laiko naršyklės konsolėje.

• Tikslus LCP identifikavimas: Įskiepis tiksliai nustato, kuris elementas (paveikslėlis ar teksto blokas) sukėlė didžiausio turinio paveikslą.
• DOM giluminė analizė: Labai svarbu, kad būtų išvengta "per didelio DOM dydžio". "Speed Auditor" suskirsto mazgų skaičių pagal zonas (antraštė, turinys, apačia) ir įspėja, jei mazgų skaičius viršija 15-20 lygių.
• Žiniasklaidos delsos monitorius: Matuoja faktinį vaizdų perdavimo laiką (Resource Timing API). Jei vaizdas atsisiunčiamas per 500 ms, įskiepis jį pažymi kaip kritinį.
• Nulinis poveikis serveriui: Visas apdorojimas vyksta kliento (naršyklės) pusėje. Nėra didelių duomenų bazės užklausų ar PHP procesų, dėl kurių sulėtėtų svetainės veikimas.

Didelis šuolis. Jau netrukus: Greičio auditorius 1.1.9 (su "Radar CLS")

Iki šiol kaupiamasis išdėstymo poslinkis (CLS) buvo abstraktus skaičius ataskaitoje. Žinojote, kad kažkas juda, bet ne visada žinojote kas. Labai greitai, 1.1.9 versijoje, tai pasikeis.

Įvedamas radaro arba vizualiojo CLS "paryškintuvo" mygtukas.

Įsivaizduokite, kad įjungtas "radaro" režimas, kuris brėžia raudonus langelius virš bet kokio elemento, kuris juda slinkdamas. Tai, ką kai kurie plėtiniai daugiau ar mažiau sėkmingai jau daro, visada yra labai naudinga vaizdinė pagalba, kai bandoma užfiksuoti tuos "perteklius", kurie kartais užbėga už akių.

• Ar tai "AdSense" reklaminis skydelis, kuriame pateikiamas jūsų turinys? Jį pamatysite raudoname langelyje. Šią problemą galite gilintis čia.
• Ar tai vaizdas be apibrėžtų matmenų? Radaras jį užfiksuos.
• Visiškas atkaklumas: Įskiepis įsimins, kad norite ir toliau vizualiai tikrinti kiekvieną kampelį.

Į šį atnaujinimą taip pat bus įtrauktas trumpas techninis žodynėlis, kuris bus papildytas patarimais ir vadovėliais, integruotais į "WordPress" prietaisų skydelį, todėl tokie terminai kaip ins, iframe ar figūra nebebus paslaptis.

Norima pagerinti analizės atsaką ir parengtas ataskaitas, kai ją išbandysiu pagal skirtingus scenarijus ir jei gausiu pasiūlymų dėl patobulinimų ar įspėjimų apie klaidas.

Dabar galima naudoti 1.1.8 versiją, kad sutvarkytumėte savo metrikas, o netrukus pasirodys 1.1.9 versija, kuri leis dar lengviau ištaisyti "WordPress" vizualinį stabilumą. Jei ją įdiegsite dabar, atnaujinimą gausite netrukus.

Kaip tai veikia?

Kodą sudaro šie trys žingsniai:

1. PerformanceObserver

Naršyklėje ("Chrome", "Edge", "Opera") yra vietinė API, vadinama našumo API. Įskiepyje užregistruojamas "stebėtojas", vadinamas PerformanceObserver, specialiai sukonfigūruotas išdėstymo poslinkio įvesties tipui.

Kiekvieną kartą, kai ekrane kas nors juda po to, kai jis buvo iš pradžių nutapytas, naršyklė sukuria įvykį. Įskiepis fiksuoja šį įvykį ir išgauna du pagrindinius duomenis:

• Poslinkio vertė: (Šis skaičius yra 0,0145).
• Kaltininkas elementas: Naršyklė įskiepiui tiksliai nurodo, kuris HTML mazgas buvo perkeltas.

2. Filtras "Naujausia sąveika"

Šioje vietoje įskiepis bando būti protingas. Ne visi ėjimai yra "blogi". Jei spustelėjote išskleidžiamąjį meniu ir turinys nuslinko žemyn, tai yra tikėtinas naudotojo žingsnis.

Įskiepis tikrina savybę hadRecentInput. Jei per paskutines 500 ms palietėte klavišą arba spustelėjote mygtuką, naršyklė šį judesį pažymi kaip tikėtiną, o įskiepis jį ignoruoja, kad būtų išvengta klaidingų teigiamų rezultatų. Jis aptinka tik netikėtai atsiradusius judesius (pvz., staiga pasirodžiusį skelbimą).

3. Vizualinis vaizdavimas (raudoni langeliai)

Kai įskiepiai turi perkeltą elementą, prasideda vaizdinė dalis:

1. Koordinačių skaičiavimas: Naudojama funkcija getBoundingClientRect(), kad būtų nustatyta, kurioje ekrano vietoje tuo metu yra elementas (pikseliu aukštyn, pikseliu į kairę).
2. Rėmo įpurškimas: Sukurkite div su absoliučia pozicija, 2px raudonu apvadu ir labai dideliu z indeksu, kad būtų galima piešti ant visko.
3. Etiketė: Pridėkite nedidelį langelį raudonojo langelio viršuje kairėje, kuriame būtų nurodytas etiketės pavadinimas (ins, img, div) ir sukaupto CLS vertė.

Kodėl tai geriau nei išorės ataskaita?

Tokie įrankiai kaip "PageSpeed" kartais neaptinka CLS, nes jie nenuslenka į apačią arba nelaukia, kol bus įkelti tam tikri skelbimai.

Įskiepis, naudodamas pastovumą, matuoja CLS, sukauptą per visą naudotojo naršymo sesiją. Jei elementas šiek tiek juda pradžioje ir šiek tiek slinkdamas, įskiepis tai susumuoja ir paryškina, todėl gaunamas apytikslis realus skaičius, kurį "Google" galiausiai pateiks"Chrome User Experience"(CrUX) ataskaitoje.