Mõned WordPressi saidi administraatorid on PageSpeed Insightsi või GTmetrixi kinnisideeks. Minu ja paljude teiste, kes teavad sellest palju rohkem, nõuanne on, et te ei tohiks anda nendele mõõdikutele suuremat tähtsust, kui neil on.
Kui tajutav laadimiskiirus on hea, ei ole vaja kõike "rohelisse" panna. Paljudel juhtudel on see isegi kahjulik, sest võite sattuda üle optimeerimisse või, mis veelgi hullem, võite ühe asja parandamise eesmärgil hävitada erinevaid asju.
Siiski, olenemata sellest, kas olete WPO aficionado, optimeerimise entusiast või soovite lihtsalt proovida parandada oma saidi reageerimisvõimet, on need tööriistad peaaegu hädavajalikud. Probleemiks on see, et nad pakuvad välisserveritest võetud "seisvaid pilte". Aga mis juhtub siis, kui teie kui administraator sirvite oma saiti, kuidas on lood nende reklaamidega, mis laadivad hilja või menüü, mis hüppab just siis, kui te kavatsete klõpsata?
Päritolu
Speed Auditor sündis vastusena isiklikule vajadusele omada mitmeid lihtsaid, kuid võimsaid kohalikke diagnostikavahendeid. See ei ole optimeerimisplugin (see ei muuda midagi teie koodis), see on reaalajas auditeeriv plugin.
Kui otsite head, võib-olla parimat WPO tasulist pluginat, millega teha muudatusi ja peenhäälestusi, vaadake Perfmatters. Kui aga otsite midagi tasuta ja lihtsat, ilma et teil oleks vaja seadistuste ja kohandustega vaeva näha, kuid mille võimalused on suured, siis võite proovida Fernando Tellado WPO Rocket Tweaks 'i, mis on saadaval WordPressi repositooriumis.
Kui te ei tea, mis on DOM-sõlm või latentsuse mõõdik, ärge muretsege. Speed Auditor on loodud selleks, et aidata teil oma veebisaidi mõistmist ühe pilguga:
- Nutikas näitaja: Värvi muutev ikoon ilmub teie haldusribale. Kui see on roheline, on teie LCP (aeg, mis kulub kõige olulisemate asjade nägemiseks) optimaalne. Kui see muutub oranžiks või punaseks, vajab miski teie tähelepanu.
- Auditeerige sirvimise ajal: Te ei pea midagi keerulist seadistama. Te aktiveerite selle plugina ja samal ajal, kui te oma postitusi kontrollite, töötab see taustal ja analüüsib, kas teie pildid on liiga rasked või kas teie server reageerib aeglaselt.
- Rohkem inimaruandeid: Ühe klõpsuga saate alla laadida .txt-faili, mille saate saata oma arendajale või salvestada, et võrrelda tulemusi pärast muudatuste rakendamist.
Kapoti all
Versioon 1.1.8 püüab pakkuda mõningast diagnostika sügavust, et säästa aega brauseri konsooliga tegelemiseks.
- Täpne LCP tuvastamine: Plugin tuvastab täpselt, milline element (pilt või tekstiplokk) käivitas suurima sisuga värvimise.
- DOM sügavusanalüüs: DOMi liigse suuruse vältimiseks. Speed Auditor jaotab sõlmede arvu tsoonide kaupa (Header, Content, Footer) ja hoiatab teid, kui pesastumine ületab 15-20 taset.
- Media Latency Monitor: Mõõdab piltide tegelikku ülekandeaega (Resource Timing API). Kui pildi allalaadimine võtab 500 ms, märgib plugin selle kriitiliseks.
- Null mõju serverile: Kogu töötlemine toimub kliendi (brauseri) poolel. Ei ole raskeid andmebaasi päringuid ega PHP-protsesse, mis aeglustavad saidi tööd.
Suur hüpe. Varsti tulemas: Speed Auditor 1.1.9 (koos "Radar CLS").
Siiani oli kumulatiivne paigutusnihe (CLS ) abstraktne näitaja aruandes. Te teadsite, et midagi liigub, kuid te ei teadnud alati, mis. Väga varsti, versioonis 1.1.9, muutub see.
Kasutusele võetakse radari või visuaalse CLSi "Highlighter" nupp.
Kujutage ette, et aktiveerite "radarirežiimi", mis joonistab punased kastid iga liikuva elemendi kohale, kui te kerite. See, mida mõned laiendused juba teevad, enam-vähem edukalt, on alati väga kasulik visuaalne abivahend, et püüda kinni need "ülevoolud", mis mõnikord silma eest ära jäävad.
- Kas see on AdSense'i bänner, mis surub teie sisu? Näete seda punase kastiga. Selle probleemiga saab süveneda siin.
- Kas see on määratletud mõõtmeteta pilt? Radar püüab seda.
- Täielik püsivus: Plugin mäletab, et soovite visuaalselt auditeerida iga nurgatagust.
See uuendus sisaldab ka lühikest tehnilist sõnastikku, mida laiendatakse nõuannete ja õpetustega, mis integreeritakse teie WordPressi armatuurlauale, nii et mõisted nagu ins, iframe või joonis ei ole enam saladus.
Mõte on parandada nii analüüsi reageerimist kui ka genereeritud aruandeid, kui ma seda erinevates stsenaariumides katsetan ja kui ma saan parandusettepanekuid või hoiatusi vigade kohta.
Versioon 1.1.8 on nüüd saadaval, et korrastada oma mõõdikuid, ja varsti teeb versioon 1.1.9 veelgi lihtsamaks WordPressi visuaalse stabiilsuse parandamise. Kui installite selle praegu, saate uuenduse peagi kätte.
Kuidas see toimib?
Kood järgib neid kolme sammu:
1. PerformanceObserver
Brauseril (Chrome, Edge, Opera) on algupärane API nimega Performance API. Plugin registreerib "vaatleja" nimega PerformanceObserver, mis on konfigureeritud spetsiaalselt layout-shift sisenditüübi jaoks.
Iga kord, kui miski liigub ekraanil pärast selle esialgset värvimist, genereerib brauser sündmuse. Plugin püüab seda sündmust ja võtab välja kaks põhilist andmestikku:
- nihke väärtus: (See number on 0,0145).
- Süüdlane element: Brauser ütleb pluginale täpselt, millist HTML-sõlme liigutati.
2. Filter "Hiljutine suhtlus"
Siinkohal püüab plugin olla nutikas. Mitte kõik käigud ei ole "halvad". Kui klõpsate rippmenüüs ja sisu kerib alla, siis on see kasutaja poolt oodatud liigutus.
Plugin kontrollib omadust hadRecentInput. Kui olete viimase 500 ms jooksul klahvi puudutanud või klõpsanud, märgib brauser selle liikumise "oodatuks" ja plugin ignoreerib seda, et vältida valepositiivseid tulemusi. See tuvastab ainult ootamatult toimuvad liigutused (näiteks ootamatult ilmuv reklaam).
3. Visuaalne kujutamine (punased kastid)
Kui pluginil on teisaldatud element, tuleb mängu visuaalne osa:
- Koordinaatide arvutamine: Kasutab funktsiooni getBoundingClientRect(), et leida, kus see element on ekraanil täpselt sel hetkel (piksel üles, piksel vasakule).
- Raami süstimine: Looge
divabsoluutse positsiooniga, 2px punase raamiga ja väga kõrgez-indeksiga, et joonistada kõige peale. - Silt: Lisage punane kast vasakusse ülaossa väike kast, kus on märgistuse nimi (ins, img, div) ja kogunenud CLS-i väärtus.
Miks on see parem kui väline aruanne?
Tööriistad nagu PageSpeed ei suuda mõnikord CLS-i tuvastada, sest nad ei keri allapoole või ei oota teatud reklaami laadimist.
Plugin mõõdab püsivust kasutades CLS-i, mis on kogunenud kogu kasutaja tegeliku sirvimisseansi jooksul. Kui element liigub alguses veidi ja kerimisel veidi, liidab plugin selle kokku ja toob selle esile, andes teile kõige ligikaudsema tegeliku näitaja, mida Google lõpuks oma"Chrome User Experience" (CrUX) aruandes näeb.
