Speed Auditor: Finn ut hva som holder WordPress tilbake

Noen WordPress-nettstedsadministratorer er besatt av PageSpeed Insights eller GTmetrix. Mitt råd, og rådet fra mange andre som kan mye mer om dette, er at du ikke bør gi disse beregningene større betydning enn de har.

Hvis den opplevde innlastingshastigheten er god, er det ikke nødvendig å sette alt "i grønt". I mange tilfeller er det til og med kontraproduktivt, fordi du kan komme til å overoptimalisere, eller enda verre, du kan ende opp med å ødelegge forskjellige ting i forsøket på å fikse én ting.

Uansett om du er WPO-entusiast, optimaliseringsentusiast eller bare vil prøve å forbedre nettstedets responsivitet, er disse verktøyene nesten uunnværlige. Problemet er at de tilbyr "stillbilder" som er hentet fra eksterne servere. Men hva skjer når du som administrator surfer på nettstedet ditt? Hva med annonsene som lastes inn for sent, eller menyen som hopper akkurat når du skal til å klikke?

Opprinnelse

Speed Auditor ble født som et svar på et personlig behov for å ha flere enkle, men kraftige lokale diagnoseverktøy. Det er ikke en optimaliseringsplugin (den endrer ikke noe i koden din), men en sanntids revisjonsplugin.

Hvis du leter etter en god, muligens den beste, betalte plugin for WPO, som du kan gjøre endringer og finjusteringer med, kan du ta en titt på Perfmatters. Hvis du derimot leter etter noe gratis og enkelt, uten å få hodet i en vri med innstillinger og justeringer, men med mange muligheter, kan du prøve WPO Rocket Tweaks av Fernando Tellado, tilgjengelig i WordPress-depotet.

Hvis du ikke vet hva en DOM-node eller latenstidsmåling er, trenger du ikke bekymre deg. Speed Auditor er utviklet for å hjelpe deg med å forstå nettstedet ditt på et øyeblikk:

• Den smarte indikatoren: Et ikon som skifter farge, vises i adminlinjen. Hvis det er grønt, er LCP (tiden det tar å se de viktigste tingene) optimal. Hvis det blir oransje eller rødt, er det noe du må ta hensyn til.

• Revisjon mens du surfer: Du trenger ikke å konfigurere noe komplisert. Du aktiverer programtillegget, og mens du sjekker innleggene dine, analyserer det i bakgrunnen om bildene dine er for tunge eller om serveren din svarer tregt.
• Flere menneskelige rapporter: Med ett klikk kan du laste ned en .txt-fil som du kan sende til utvikleren din eller lagre for å sammenligne resultater etter at du har gjort endringer.

Under panseret

Versjon 1.1.8 forsøker å gi en dypere diagnostikk for å spare tid i nettleserkonsollen.

• Nøyaktig LCP-identifikasjon: Plugin-programmet oppdager nøyaktig hvilket element (bilde eller tekstblokk) som utløste Largest Contentful Paint.
• DOM-dybdeanalyse: Avgjørende for å unngå "DOM size excessive". Speed Auditor bryter ned antall noder etter soner (Header, Content, Footer) og advarer deg hvis hekkingen overstiger 15-20 nivåer.
• Media Latency Monitor: Måler den faktiske overføringstiden (Resource Timing API) for bilder. Hvis det tar 500 ms å laste ned et bilde, markerer programtillegget det som kritisk.
• Ingen innvirkning på serveren: All behandling skjer på klientsiden (nettleseren). Det er ingen tunge databaseforespørsler eller PHP-prosesser som gjør nettstedet tregere.

Det store spranget. Kommer snart: Speed Auditor 1.1.9 (med "Radar CLS")

Frem til nå har Cumulative Layout Shift (CLS) vært et abstrakt tall i en rapport. Du visste at noe beveget seg, men du visste ikke alltid hva. Snart, i versjon 1.1.9, vil dette endre seg.

Knappen "Highlighter" for radar eller Visual CLS skal innføres.

Tenk deg at du aktiverer en "radar"-modus som tegner røde bokser over alle elementer som beveger seg mens du blar. Dette, som noen utvidelser allerede gjør, med mer eller mindre suksess, er alltid et veldig nyttig visuelt hjelpemiddel for å prøve å fange opp de "overløpene" som noen ganger unnslipper øyet.

• Er det et AdSense-banner som pusher innholdet ditt? Du ser det med en rød boks. Du kan gå dypere inn i dette problemet her.
• Er det et bilde uten definerte dimensjoner? Radaren vil fange det opp.
• Total utholdenhet: Du vil kunne bla gjennom hele nettstedet ditt med radaren på; plugin-modulen vil huske at du vil fortsette å visuelt overvåke hvert hjørne.

Denne oppdateringen vil også inneholde en kort teknisk ordliste, som vil bli utvidet til å omfatte tips og veiledninger, som vil bli integrert i WordPress-dashbordet ditt, slik at begreper som ins, iframe eller figure ikke lenger vil være et mysterium.

Tanken er å forbedre både responsen i analysen og rapportene som genereres, etter hvert som jeg tester den i ulike scenarier og mottar forslag til forbedringer eller advarsler om feil.

Versjon 1.1.8 er nå tilgjengelig for å rydde opp i beregningene dine, og snart vil 1.1.9 gjøre det enda enklere å fikse den visuelle stabiliteten i WordPress. Hvis du installerer den nå, vil du motta oppdateringen i løpet av kort tid.

Hvordan fungerer det?

Koden følger disse tre trinnene:

1. PerformanceObserver

Nettleseren (Chrome, Edge, Opera) har et eget API kalt Performance API. Utvidelsesprogrammet registrerer en "Watcher" kalt PerformanceObserver som er spesifikt konfigurert for inndatatypen layout-shift.

Hver gang noe beveger seg på skjermen etter at det først har blitt malt, genererer nettleseren en hendelse. Plugin-modulen fanger opp denne hendelsen og henter ut to viktige data:

• Verdien av forskyvningen: (Dette tallet er 0,0145).
• Det skyldige elementet: Nettleseren forteller plugin-modulen nøyaktig hvilken HTML-node som ble flyttet.

2. Filteret "Nylig interaksjon"

Det er her programtillegget prøver å være smart. Ikke alle bevegelser er "dårlige". Hvis du klikker på en rullegardinmeny og innholdet ruller nedover, er det et forventet trekk fra brukerens side.

Utvidelsesprogrammet sjekker en egenskap som heter hadRecentInput. Hvis du har trykket på en tast eller klikket i løpet av de siste 500 ms, markerer nettleseren denne bevegelsen som "forventet", og programtillegget ignorerer den for å unngå falske positiver. Den oppdager bare bevegelser som oppstår uventet (for eksempel en annonse som plutselig dukker opp).

3. Visuell gjengivelse (de røde boksene)

Når programtillegget har elementet som er flyttet, kommer den visuelle delen inn i bildet:

1. Beregning av koordinater: Bruker en funksjon som heter getBoundingClientRect() for å finne ut hvor elementet befinner seg på skjermen i det nøyaktige øyeblikket (piksel opp, piksel til venstre).
2. Rammeinjeksjon: Lag en div med absolutt posisjon, en 2px rød kant og en veldig høy z-indeks for å tegne på toppen av alt.
3. Etiketten: Legg til en liten boks øverst til venstre i den røde boksen med navnet på etiketten (ins, img, div) og verdien av den akkumulerte CLS-en.

Hvorfor er dette bedre enn en ekstern rapport?

Verktøy som PageSpeed oppdager noen ganger ikke CLS fordi de ikke skroller til bunnen eller ikke venter på at visse annonser skal lastes inn.

Ved å bruke utholdenhet måler plugin-modulen CLS akkumulert gjennom hele brukerens faktiske nettleserøkt. Hvis et element beveger seg litt i begynnelsen og litt når du blar, legger programtillegget det sammen og fremhever det, noe som gir deg det mest omtrentlige reelle tallet som Google vil ende opp med å se i sin"Chrome User Experience" (CrUX)-rapport.