Ātruma auditors: noskaidrojiet, kas kavē jūsu WordPress darbību

Daži WordPress vietņu administratori ir apsēsti ar PageSpeed Insights vai GTmetrix. Mans padoms un daudzu citu cilvēku, kuri par to zina daudz vairāk, padoms ir tāds, ka nevajadzētu piešķirt šiem mērījumiem lielāku nozīmi, nekā tiem ir.

Ja uztveramais ielādes ātrums ir labs, nav nepieciešams visu ievietot "zaļā krāsā". Daudzos gadījumos tas ir pat neproduktīvi, jo varat nonākt pārmērīgā optimizācijā vai, vēl ļaunāk, mēģinot labot vienu lietu, varat sabojāt dažādas lietas.

Tomēr neatkarīgi no tā, vai esat WPO cienītājs, optimizācijas entuziasts vai vienkārši vēlaties uzlabot vietnes reaģēšanas spēju, šie rīki ir gandrīz nepieciešami. Problēma ir tā, ka tie piedāvā "nekustīgus attēlus", kas ņemti no ārējiem serveriem. Bet kas notiek, kad jūs kā administrators pārlūkojat savu vietni, kas notiek ar tām reklāmām, kuras ielādējas novēloti, vai ar izvēlni, kas lec tieši tad, kad jūs gatavojaties noklikšķināt?

Izcelsme

Ātruma auditors radās, reaģējot uz personīgo vajadzību pēc vairākiem vienkāršiem, bet jaudīgiem vietējiem diagnostikas rīkiem. Tas nav optimizācijas spraudnis (tas neko nemaina jūsu kodā), tas ir reālā laika audita spraudnis.

Ja meklējat labu, iespējams, labāko, WPO maksas spraudni, ar kuru veikt izmaiņas un precīzu regulēšanu, apskatiet Perfmatters. Savukārt, ja jūs meklējat kaut ko bezmaksas un vienkāršu, kas nelauza galvu ar iestatījumiem un pielāgojumiem, bet piedāvā plašas iespējas, varat izmēģināt Fernando Tellado izstrādāto WPO Rocket Tweaks, kas pieejams WordPress repozitorijā.

Ja nezināt, kas ir DOM mezgls vai latentuma rādītājs, neuztraucieties. Ātruma auditors ir izstrādāts tā, lai palīdzētu jums izprast jūsu vietni no pirmā acu uzmetiena:

• Gudrais indikators: Administratora joslā parādīsies ikona, kas maina krāsu. Ja tā ir zaļa, jūsu LCP (laiks, kas nepieciešams, lai redzētu svarīgākās lietas) ir optimāls. Ja tā kļūst oranžā vai sarkanā krāsā, kaut kam jāpievērš jūsu uzmanība.

• Veiciet revīziju, kamēr pārlūkojat: Jums nav jākonfigurē nekas sarežģīts. Jūs aktivizējat spraudni, un, kamēr jūs pārbaudāt savus ierakstus, tas darbojas fonā, analizējot, vai jūsu attēli ir pārāk smagi vai vai jūsu serveris reaģē lēni.
• Vairāk ziņojumu par cilvēkiem: Ar vienu klikšķi lejupielādējiet .txt failu, ko varat nosūtīt izstrādātājam vai saglabāt, lai salīdzinātu rezultātus pēc izmaiņu veikšanas.

Zem motora pārsega

Versijā 1.1.8 ir mēģināts nodrošināt padziļinātu diagnostiku, lai ietaupītu pārlūkprogrammas konsoles darbību.

• Precīza LCP identifikācija: Šis spraudnis precīzi nosaka, kurš elements (attēls vai teksta bloks) ir izraisījis lielāko satura attēlu.
• DOM dziļuma analīze: Lai izvairītos no "pārmērīga DOM izmēra". Speed Auditor sadalīs mezglu skaitu pa zonām (Header, Content, Footer) un brīdinās, ja to skaits pārsniedz 15-20 līmeņus.
• Media Latency Monitor: mēra attēlu faktisko pārsūtīšanas laiku (Resource Timing API). Ja attēla lejupielāde aizņem 500 ms, spraudnis to atzīmē kā kritisku.
• Nulles ietekme uz serveri: Visa apstrāde notiek klienta (pārlūkprogrammas) pusē. Nav smagu datubāzes vai PHP procesu, kas palēnina vietnes darbību.

Lielais lēciens. Drīzumā: Ātruma auditors 1.1.9 (ar "Radar CLS")

Līdz šim kumulatīvais izkārtojuma nobīde (CLS) bija abstrakts skaitlis ziņojumā. Jūs zinājāt, ka kaut kas pārvietojas, bet ne vienmēr zinājāt, kas tieši. Pavisam drīz 1.1.9. versijā tas mainīsies.

Ievieš radara vai vizuālā CLS "izgaismotāja" pogu.

Iedomājieties, ka tiek aktivizēts "radara" režīms, kas zīmē sarkanus lodziņus virs jebkura elementa, kas pārvietojas ritināšanas laikā. Tas, ko daži paplašinājumi ar lielākiem vai mazākiem panākumiem jau dara, vienmēr ir ļoti noderīgs vizuāls palīglīdzeklis, lai mēģinātu noķert tos "pārplūdumus", kas dažkārt paslīd garām acīm.

• Vai tas ir AdSense baneris, kas virza jūsu saturu? To redzēsiet ar sarkanu lodziņu. Jūs varat padziļināti izpētīt šo problēmu šeit.
• Vai tas ir attēls bez definētiem izmēriem? Radars to uztvers.
• Kopējā noturība: Spraudnis atcerēsies, ka vēlaties turpināt vizuāli pārbaudīt katru stūri.

Šajā atjauninājumā būs iekļauts arī īss tehniskais glosārijs, kas tiks paplašināts, iekļaujot padomus un pamācības, kuras tiks integrētas WordPress paneļa vadības panelī, lai tādi termini kā ins, iframe vai skaitlis vairs nebūtu noslēpums.

Ideja ir uzlabot gan analīzes reakciju, gan ģenerētos ziņojumus, jo es to testēju dažādos scenārijos un ja saņemu ieteikumus par uzlabojumiem vai brīdinājumus par kļūdām.

Tagad ir pieejama versija 1.1.8, lai sakārtotu jūsu metriku, un drīzumā ar versiju 1.1.9 būs vēl vieglāk uzlabot WordPress vizuālo stabilitāti. Ja instalējat to tagad, atjauninājumu saņemsiet drīzumā.

Kā tas darbojas?

Kods ir veidots, ievērojot šos trīs soļus:

1. PerformanceObserver

Pārlūkprogrammai (Chrome, Edge, Opera) ir izstrādāts API ar nosaukumu Performance API. Šis spraudnis reģistrē "vērotāju", ko sauc par PerformanceObserver un kas ir īpaši konfigurēts izkārtojuma maiņas ieejas tipam.

Katru reizi, kad ekrānā kaut kas pārvietojas pēc tam, kad tas sākotnēji ir uzkrāsots, pārlūkprogramma ģenerē notikumu. Šis spraudnis šo notikumu fiksē un iegūst divus galvenos datus:

• Nobīdes vērtība: (Šis skaitlis ir 0,0145).
• Vainīgais elements: Pārlūkprogramma precīzi norāda spraudnim, kurš HTML mezgls ir pārvietots.

2. Filtrs "Nesena mijiedarbība"

Šeit spraudnis cenšas būt gudrs. Ne visi gājieni ir "slikti". Ja noklikšķināt uz nolaižamās izvēlnes un saturs ritinās uz leju, tas ir paredzams lietotāja solis.

Šis spraudnis pārbauda īpašību hadRecentInput. Ja pēdējo 500 ms laikā esat pieskāries taustiņam vai klikšķinājis, pārlūkprogramma šo kustību atzīmē kā "paredzamu", un spraudnis to ignorē, lai izvairītos no viltus pozitīviem signāliem. Tas konstatē tikai negaidītas kustības (piemēram, pēkšņi parādījušos reklāmu).

3. Vizuālais attēlojums (Sarkanie lodziņi)

Kad spraudnim ir pievienots pārvietotais elements, sākas vizuālā daļa:

1. Koordinātu aprēķins: Izmantojot funkciju getBoundingClientRect(), tiek noskaidrots, kur šis elements atrodas uz ekrāna konkrētajā brīdī (pikseļi uz augšu, pikseļi pa kreisi).
2. Rāmja injekcija: Izveidojiet div ar absolūtu pozīciju, 2px sarkanu robežu un ļoti augstu z-indeksu, lai zīmētu virs visa.
3. Etiķete: Pievienojiet nelielu lodziņu sarkanā lodziņa augšējā kreisajā pusē ar etiķetes nosaukumu (ins, img, div) un uzkrātā CLS vērtību.

Kāpēc tas ir labāk nekā ārējs ziņojums?

Tādi rīki kā PageSpeed dažkārt nespēj noteikt CLS, jo tie neslīd līdz apakšai vai negaida, kamēr tiek ielādētas noteiktas reklāmas.

Šis spraudnis, izmantojot noturību, mēra CLS, kas uzkrāts visā lietotāja pārlūkošanas sesijas laikā. Ja kāds elements nedaudz pārvietojas sākumā un nedaudz, ritinot, spraudnis to saskaita un izceļ, tādējādi iegūstot aptuvenu reālo skaitli, ko Google galu galā redzēs savā"Chrome User Experience" (CrUX) ziņojumā.