Speed Auditor: aflați ce vă împiedică WordPress-ul să funcționeze

Unii administratori de site-uri WordPress sunt obsedați de PageSpeed Insights sau GTmetrix. Sfatul meu, și al multor altora care știu mult mai multe despre asta, este că nu ar trebui să dați acestor metrici mai multă importanță decât au.

Dacă viteza de încărcare percepută este bună, nu este necesar să puneți totul "în verde". În multe cazuri, acest lucru este chiar contraproductiv, deoarece puteți cădea în supraoptimizare sau, mai rău, puteți ajunge să distrugeți diferite lucruri încercând să reparați un singur lucru.

Totuși, fie că sunteți un pasionat de WPO, un entuziast al optimizării sau doar doriți să încercați să îmbunătățiți capacitatea de reacție a site-ului dumneavoastră, aceste instrumente sunt aproape esențiale. Problema este că acestea oferă "imagini statice" preluate de pe servere externe. Dar ce se întâmplă atunci când tu, în calitate de administrator, navighezi pe site-ul tău, ce se întâmplă cu acele reclame care se încarcă cu întârziere sau cu acel meniu care sare exact când ești pe punctul de a face clic?

Origine

Speed Auditor s-a născut ca răspuns la o nevoie personală de a avea câteva instrumente de diagnosticare locale simple, dar puternice. Nu este un plugin de optimizare (nu modifică nimic în codul dvs.), este un plugin de auditare în timp real.

Dacă sunteți în căutarea unui plugin plătit bun, posibil cel mai bun, pentru WPO, cu care să faceți modificări și reglaje fine, aruncați o privire la Perfmatters. Dacă, pe de altă parte, sunteți în căutarea a ceva gratuit și simplu, fără să vă încurcați capul cu setările și ajustările, dar cu o mulțime de posibilități, puteți încerca WPO Rocket Tweaks de Fernando Tellado, disponibil în depozitul WordPress.

Dacă nu știți ce este un nod DOM sau o metrică de latență, nu vă faceți griji. Speed Auditor este conceput pentru a vă ajuta să înțelegeți site-ul dvs. dintr-o privire:

• Indicatorul inteligent: În bara dvs. de administrare va apărea o pictogramă care își schimbă culoarea. Dacă este verde, LCP-ul dvs. (timpul necesar pentru a vedea cele mai importante lucruri) este optim. Dacă devine portocaliu sau roșu, ceva necesită atenția dvs.

• Auditați în timp ce navigați: Nu trebuie să configurați nimic complex. Activați pluginul și, în timp ce vă verificați postările, acesta lucrează în fundal analizând dacă imaginile dvs. sunt prea grele sau dacă serverul dvs. răspunde lent.
• Rapoarte mai umane: Cu un singur clic, descărcați un fișier .txt pe care îl puteți trimite dezvoltatorului dvs. sau salva pentru a compara rezultatele după aplicarea modificărilor.

Sub capotă

Versiunea 1.1.8 încearcă să ofere o anumită profunzime a diagnosticelor pentru a economisi timp de manipulare în consola browserului.

• Identificarea precisă a LCP: Pluginul detectează exact elementul (imagine sau bloc de text) care a declanșat pictura cu cel mai mare conținut.
• Analiza adâncimii DOM: Crucial pentru a evita "DOM size excessive". Speed Auditor împarte numărul de noduri pe zone (Header, Content, Footer) și vă avertizează dacă cuibăritul depășește 15-20 de niveluri.
• Monitor de latență media: Măsoară timpul real de transfer (Resource Timing API) al imaginilor. Dacă o imagine are nevoie de 500 ms pentru a fi descărcată, pluginul o marchează ca fiind critică.
• Impact zero asupra serverului: Toate procesările au loc pe partea de client (browser). Nu există interogări grele ale bazei de date sau procese PHP care să încetinească site-ul.

Marele salt. În curând: Speed Auditor 1.1.9 (cu "Radar CLS")

Până acum, Cumulative Layout Shift (CLS) era o cifră abstractă într-un raport. Știai că ceva se mișcă, dar nu știai întotdeauna ce. Foarte curând, în versiunea 1.1.9, acest lucru se va schimba.

Se introduce butonul "Highlighter" pentru radar sau CLS vizual.

Imaginați-vă activarea unui mod "radar" care desenează casete roșii peste orice element care se mișcă în timp ce defilați. Acest lucru, pe care unele extensii îl fac deja, cu mai mult sau mai puțin succes, este întotdeauna un ajutor vizual foarte util pentru a încerca să prindă acele "revărsări" care scapă uneori ochiului.

• Este un banner AdSense care vă promovează conținutul? Îl veți vedea cu o casetă roșie. Puteți aprofunda această problemă aici.
• Este o imagine fără dimensiuni definite? Radarul o va detecta.
• Persistență totală: Veți putea să navigați pe întregul dvs. site cu radarul activat; pluginul își va aminti că doriți să continuați să verificați vizual fiecare colț.

Această actualizare va include, de asemenea, un scurt glosar tehnic, care va fi extins pentru a include sfaturi și tutoriale, care vor fi integrate în tabloul de bord WordPress, astfel încât termeni precum ins, iframe sau figure nu vor mai fi un mister.

Ideea este de a îmbunătăți atât răspunsul analizei, cât și rapoartele generate pe măsură ce o testez în diferite scenarii și dacă primesc sugestii de îmbunătățire sau avertismente de erori.

Versiunea 1.1.8 este acum disponibilă pentru a vă ordona metricile, iar în curând, 1.1.9 va face și mai ușoară repararea stabilității vizuale a WordPress. Dacă o instalați acum, veți primi actualizarea în scurt timp.

Cum funcționează?

Codul urmează acești trei pași:

1. PerformanceObserver

Browserul (Chrome, Edge, Opera) are un API nativ numit Performance API. Pluginul înregistrează un "observator" numit PerformanceObserver configurat special pentru tipul de intrare layout-shift.

De fiecare dată când ceva se mișcă pe ecran după ce a fost pictat inițial, browserul generează un eveniment. Plugin-ul captează acest eveniment și extrage două date cheie:

• Valoarea decalajului: (Acest număr este 0,0145).
• Elementul vinovat: Browserul spune pluginului exact care nod HTML a fost mutat.

2. Filtrul "Interacțiune recentă"

Acesta este momentul în care pluginul încearcă să fie inteligent. Nu toate mișcările sunt "rele". Dacă faceți clic pe un meniu derulant și conținutul se derulează în jos, aceasta este o mișcare așteptată de către utilizator.

Pluginul verifică o proprietate numită hadRecentInput. Dacă ați atins o tastă sau ați făcut clic în ultimii 500 ms, browserul marchează această mișcare ca fiind "așteptată", iar pluginul o ignoră pentru a evita falsurile pozitive. Acesta detectează doar mișcările care apar în mod neașteptat (cum ar fi apariția bruscă a unei reclame).

3. Redarea vizuală (casetele roșii)

Odată ce pluginul are elementul care a fost mutat, intră în joc partea vizuală:

1. Calcularea coordonatelor: Utilizează o funcție numită getBoundingClientRect() pentru a afla unde se află elementul respectiv pe ecran în acel moment precis (pixel sus, pixel stânga).
2. Injectarea cadrului: Creați un div cu poziție absolută, o margine roșie de 2px și un z-index foarte mare, pentru a atrage totul deasupra.
3. Eticheta: Adăugați o casetă mică în stânga sus a casetei roșii cu numele etichetei (ins, img, div) și valoarea CLS acumulată.

De ce este acesta mai bun decât un raport extern?

Instrumente precum PageSpeed uneori nu reușesc să detecteze CLS deoarece nu defilează până la sfârșit sau nu așteaptă încărcarea anumitor reclame.

Plugin-ul, utilizând persistența, măsoară CLS-ul acumulat de-a lungul sesiunii reale de navigare a utilizatorului. Dacă un element se mișcă puțin la început și puțin la defilare, pluginul îl adună și îl evidențiază, oferindu-vă cea mai aproximativă cifră reală pe care Google va ajunge să o vadă în raportul său"Chrome User Experience" (CrUX).