Joillakin WordPress-sivustojen ylläpitäjillä on pakkomielle PageSpeed Insightsista tai GTmetrixistä. Minun neuvoni ja monien muiden, jotka tietävät asiasta paljon enemmän, on, että näille mittareille ei pidä antaa suurempaa merkitystä kuin niillä on.
Jos koettu latausnopeus on hyvä, ei ole tarpeen laittaa kaikkea "vihreää". Monissa tapauksissa se on jopa haitallista, koska voit sortua ylioptimointiin, tai mikä vielä pahempaa, voit päätyä tuhoamaan eri asioita yrittäessäsi korjata yhtä asiaa.
Nämä työkalut ovat kuitenkin lähes välttämättömiä riippumatta siitä, oletko WPO:n harrastaja, optimoinnin harrastaja vai haluatko vain yrittää parantaa sivustosi reagointikykyä. Ongelmana on, että ne tarjoavat ulkoisilta palvelimilta otettuja "still-kuvia". Mutta mitä tapahtuu, kun sinä ylläpitäjänä selaat sivustoasi, entäpä mainokset, jotka latautuvat myöhässä, tai valikko, joka hyppää juuri silloin, kun olet aikeissa klikata sitä?
Alkuperä
Speed Auditor syntyi vastauksena henkilökohtaiseen tarpeeseen saada käyttöön useita yksinkertaisia mutta tehokkaita paikallisia diagnostiikkatyökaluja. Se ei ole optimointilaajennus (se ei muuta mitään koodissasi), vaan se on reaaliaikainen auditointilaajennus.
Jos etsit hyvää, mahdollisesti parasta WPO:n maksullista lisäosaa, jonka avulla voit tehdä muutoksia ja hienosäätöä, tutustu Perfmattersiin. Jos taas etsit jotain ilmaista ja yksinkertaista, joka ei saa päätäsi sekaisin asetusten ja säätöjen kanssa, mutta jossa on paljon mahdollisuuksia, voit kokeilla Fernando Telladon WPO Rocket Tweaksia, joka on saatavilla WordPress-tietovarastosta.
Jos et tiedä, mikä on DOM-solmu tai latenssimittari, älä huoli. Speed Auditor on suunniteltu auttamaan sinua ymmärtämään verkkosivustoasi yhdellä silmäyksellä:
- Älykäs indikaattori: Älykäs älykkyysosoitin: Hallintapalkkiin ilmestyy väriä vaihtava kuvake. Jos se on vihreä, LCP (aika, joka kuluu tärkeimpien asioiden näkemiseen) on optimaalinen. Jos se muuttuu oranssiksi tai punaiseksi, jokin asia vaatii huomiotasi.
- Tarkastus selatessasi: Sinun ei tarvitse konfiguroida mitään monimutkaista. Aktivoit lisäosan, ja samalla kun tarkistat viestejäsi, se toimii taustalla analysoiden, ovatko kuvasi liian raskaita tai onko palvelimesi reagoi hitaasti.
- Lisää ihmisraportteja: Voit ladata yhdellä napsautuksella .txt-tiedoston, jonka voit lähettää kehittäjälle tai tallentaa, jotta voit vertailla tuloksia muutosten soveltamisen jälkeen.
Konepellin alla
Versiossa 1.1.8 yritetään tarjota jonkin verran syvällistä diagnostiikkaa, joka säästää aikaa selaimen konsolin näpyttelyyn.
- Tarkka LCP-tunnistus: Laajennus tunnistaa tarkalleen, mikä elementti (kuva tai tekstilohko) laukaisi Largest Contentful Paintin.
- DOM-syvyysanalyysi: DOM-koon liiallisuuden välttämiseksi. Speed Auditor jakaa solmujen määrän vyöhykkeittäin (Header, Content, Footer) ja varoittaa, jos sisäkkäisyys ylittää 15-20 tasoa.
- Media Latency Monitor: Mittaa kuvien todellista siirtoaikaa (Resource Timing API). Jos kuvan lataaminen kestää 500 ms, lisäosa merkitsee sen kriittiseksi.
- Ei vaikutusta palvelimeen: Kaikki käsittely tapahtuu asiakkaan (selaimen) puolella. Sivustoa hidastavia raskaita tietokantakyselyjä tai PHP-prosesseja ei ole.
Suuri harppaus. Tulossa pian: 1.1.9 (tutka CLS:llä).
Tähän asti Cumulative Layout Shift (CLS) oli raportin abstrakti luku. Tiesit, että jokin liikkui, mutta et aina tiennyt, mikä. Hyvin pian, versiossa 1.1.9, tämä muuttuu.
Tutkan tai visuaalisen CLS:n "korostuspainike" on otettava käyttöön.
Kuvittele, että otat käyttöön "tutka"-tilan, joka piirtää punaisia laatikoita kaikkien elementtien päälle, jotka liikkuvat selauksen aikana. Tämä, jota jotkut laajennukset jo tekevät, enemmän tai vähemmän menestyksekkäästi, on aina erittäin hyödyllinen visuaalinen apuväline, jolla voi yrittää saada kiinni "ylivuodot", jotka joskus karkaavat silmistä.
- Onko se AdSense-banneri, joka työntää sisältöäsi? Näet sen punaisella laatikolla. Voit syventyä tähän ongelmaan täällä.
- Onko se kuva, jolla ei ole määriteltyjä mittoja? Tutka havaitsee sen.
- Täydellinen pysyvyys: Lisäosa muistaa, että haluat jatkaa visuaalista tarkastusta joka nurkassa.
Tämä päivitys sisältää myös lyhyen teknisen sanaston, jota laajennetaan sisältämään vinkkejä ja oppaita, jotka integroidaan WordPress-kojelautaan, jotta termit kuten ins, iframe tai figure eivät ole enää mysteeri.
Tarkoituksena on parantaa sekä analyysin vastetta että tuotettuja raportteja, kun testaan sitä eri skenaarioissa ja jos saan parannusehdotuksia tai varoituksia virheistä.
Versio 1.1.8 on nyt saatavilla metriikoiden siistimiseen, ja pian 1.1.9 tekee WordPressin visuaalisen vakauden korjaamisesta entistäkin helpompaa. Jos asennat sen nyt, saat päivityksen pian.
Miten se toimii?
Koodi noudattaa näitä kolmea vaihetta:
1. PerformanceObserver
Selaimella (Chrome, Edge, Opera) on natiivi API nimeltä Performance API. Lisäosa rekisteröi PerformanceObserver-nimisen "tarkkailijan", joka on määritetty erityisesti layout-shift-syöttötyyppiä varten.
Aina kun jokin liikkuu ruudulla sen jälkeen, kun se on alun perin maalattu, selain luo tapahtuman. Liitännäinen vangitsee tämän tapahtuman ja poimii kaksi keskeistä tietoa:
- Offsetin arvo: (Tämä luku on 0,0145).
- Syyllinen elementti: Selain kertoo laajennukselle tarkalleen, mitä HTML-solmua siirrettiin.
2. "Viimeaikaiset vuorovaikutukset" -suodatin
Tässä kohtaa lisäosa yrittää olla nokkela. Kaikki liikkeet eivät ole "huonoja". Jos napsautat pudotusvalikkoa ja sisältö vierii alaspäin, se on käyttäjän odotettu liike.
Lisäosa tarkistaa ominaisuuden nimeltä hadRecentInput. Jos olet koskettanut näppäintä tai napsauttanut viimeisten 500 ms:n aikana, selain merkitsee liikkeen "odotetuksi" ja lisäosa jättää sen huomiotta väärien hälytysten välttämiseksi. Se havaitsee vain odottamattomat liikkeet (kuten mainoksen ilmestymisen yhtäkkiä).
3. Visuaalinen renderöinti (punaiset laatikot)
Kun laajennuksella on siirretty elementti, visuaalinen osa tulee kuvaan:
- Koordinaattilaskenta: Käyttää funktiota nimeltä getBoundingClientRect() selvittääkseen, missä kyseinen elementti on ruudulla juuri sillä hetkellä (pikseli ylöspäin, pikseli vasemmalle).
- Kehyksen ruiskutus: Luo
div, jolla on absoluuttinen sijainti, 2px:n punainen kehys ja erittäin korkeaz-indeksija joka piirtyy kaiken päälle. - Etiketti: Otsikko: Lisää punaisen laatikon vasempaan yläkulmaan pieni laatikko, jossa on otsikon nimi (ins, img, div) ja kertyneen CLS:n arvo.
Miksi tämä on parempi kuin ulkoinen raportti?
Työkalut, kuten PageSpeed, eivät joskus havaitse CLS:ää, koska ne eivät vieritä sivun alareunaan tai eivät odota tiettyjen mainosten latautumista.
Laajennus mittaa pysyvyyttä käyttämällä CLS:ää, joka on kertynyt koko käyttäjän todellisen selausistunnon aikana. Jos elementti liikkuu hieman alussa ja hieman selatessa, lisäosa laskee sen yhteen ja korostaa sen, jolloin saat likimääräisen todellisen luvun, jonka Google lopulta näkee Chrome User Experience-raportissaan (CrUX).
