Snelheidsauditor: ontdek wat je WordPress tegenhoudt

Sommige beheerders van WordPress sites zijn geobsedeerd door PageSpeed Insights of GTmetrix. Mijn advies, en dat van vele anderen die er veel meer over weten, is dat je die statistieken niet belangrijker moet maken dan ze zijn.

Als de waargenomen laadsnelheid goed is, is het niet nodig om alles "in het groen" te zetten. In veel gevallen is het zelfs contraproductief omdat je kunt vervallen in overoptimalisatie, of erger nog, je kunt uiteindelijk verschillende dingen verpesten in een poging om één ding te repareren.

Toch, of je nu een WPO liefhebber bent, een optimalisatie enthousiasteling of gewoon wilt proberen om de reactiesnelheid van je site te verbeteren, deze tools zijn bijna essentieel. Het probleem is dat ze "stilstaande beelden" bieden die afkomstig zijn van externe servers. Maar wat gebeurt er als u, als beheerder, door uw site bladert, wat gebeurt er met die advertenties die te laat laden of dat menu dat verspringt net wanneer u op het punt staat te klikken?

Oorsprong

Speed Auditor is geboren als antwoord op een persoonlijke behoefte aan verschillende eenvoudige maar krachtige lokale diagnostische tools. Het is geen optimalisatie plugin (het verandert niets in je code), het is een real-time auditing plugin.

Als je op zoek bent naar een goede, mogelijk de beste, betaalde plugin voor WPO, waarmee je wijzigingen en fijnafstellingen kunt maken, kijk dan eens naar Perfmatters. Als je daarentegen op zoek bent naar iets gratis en eenvoudigs, zonder dat je hoofd in de war raakt van instellingen en aanpassingen, maar met heel veel mogelijkheden, dan kun je WPO Rocket Tweaks van Fernando Tellado proberen, beschikbaar in de WordPress repository.

Als je niet weet wat een DOM-node of latency-metric is, maak je dan geen zorgen. Speed Auditor is ontworpen om je in één oogopslag inzicht te geven in je website:

• De slimme indicator: Er verschijnt een icoontje in je beheerbalk dat van kleur verandert. Als het groen is, is je LCP (de tijd die het kost om de belangrijkste dingen te zien) optimaal. Als het oranje of rood wordt, is er iets dat je aandacht nodig heeft.

• Audit terwijl je surft: Je hoeft niets ingewikkelds te configureren. Je activeert de plugin en terwijl je je berichten bekijkt, analyseert hij op de achtergrond of je afbeeldingen te zwaar zijn of dat je server traag reageert.
• Meer menselijke rapporten: Download met één klik een .txt-bestand dat je naar je ontwikkelaar kunt sturen of kunt opslaan om resultaten te vergelijken na het toepassen van wijzigingen.

Onder de motorkap

Versie 1.1.8 probeert wat diepte in de diagnostiek te brengen om tijd te besparen met het geklungel in de browserconsole.

• Nauwkeurige LCP identificatie: De plugin detecteert precies welk element (afbeelding of tekstblok) de Largest Contentful Paint heeft geactiveerd.
• DOM-diepteanalyse: Cruciaal om "te grote DOM" te voorkomen. Speed Auditor splitst het aantal knooppunten op per zone (Header, Content, Footer) en waarschuwt je als de nesting meer dan 15-20 niveaus bedraagt.
• Media latentiemonitor: Meet de werkelijke overdrachtstijd (Resource Timing API) van afbeeldingen. Als het downloaden van een afbeelding 500 ms duurt, markeert de plugin deze als kritiek.
• Nul impact op de server: Alle verwerking vindt plaats op de client (browser). Er zijn geen zware databasequery's of PHP-processen die de site vertragen.

De grote sprong. Binnenkort beschikbaar: Snelheidscontroleur 1.1.9 (met "Radar CLS")

Tot nu toe was Cumulative Layout Shift (CLS) een abstract cijfer in een rapport. Je wist dat er iets bewoog, maar je wist niet altijd wat. Zeer binnenkort, in versie 1.1.9, zal dit veranderen.

De "Highlighter"-knop voor radar of Visual CLS wordt geïntroduceerd.

Stel je voor dat je een "radar"-modus activeert die rode vakken tekent over elk element dat beweegt terwijl je scrollt. Dit, wat sommige extensies al doen, met meer of minder succes, is altijd een zeer nuttig visueel hulpmiddel om te proberen die "overflows" op te vangen die soms aan het oog ontsnappen.

• Is het een AdSense-banner die je inhoud duwt? Je ziet het met een rood vakje. Je kunt hier dieper op dit probleem ingaan.
• Is het een afbeelding zonder gedefinieerde afmetingen? De radar vangt het op.
• Totale persistentie: Je kunt door je hele website bladeren met de radar aan; de plugin onthoudt dat je elke hoek visueel wilt blijven controleren.

Deze update zal ook een korte technische woordenlijst bevatten, die zal worden uitgebreid met tips en tutorials, die zullen worden geïntegreerd in je WordPress dashboard, zodat termen als ins, iframe of figure niet langer een mysterie zullen zijn.

Het idee is om zowel de respons van de analyse als de gegenereerde rapporten te verbeteren naarmate ik deze test in verschillende scenario's en als ik suggesties voor verbetering of waarschuwingen voor fouten ontvang.

Versie 1.1.8 is nu beschikbaar om je statistieken op te ruimen, en binnenkort zal 1.1.9 het nog gemakkelijker maken om de visuele stabiliteit van WordPress te herstellen. Als je het nu installeert, ontvang je de update binnenkort.

Hoe werkt het?

De code volgt deze drie stappen:

1. De PrestatieObserver

De browser (Chrome, Edge, Opera) heeft een native API genaamd Performance API. De plugin registreert een "watcher" genaamd PerformanceObserver die specifiek is geconfigureerd voor het invoertype met verschoven opmaak.

Elke keer dat er iets beweegt op het scherm nadat het in eerste instantie is geschilderd, genereert de browser een gebeurtenis. De plugin vangt die gebeurtenis op en haalt er twee belangrijke gegevens uit:

• De waarde van de offset: (Dat getal als 0,0145).
• Het element dat de boosdoener is: De browser vertelt de plugin precies welk HTML-knooppunt is verplaatst.

2. Het filter "Recente interactie

Hier probeert de plugin slim te zijn. Niet alle bewegingen zijn "slecht". Als je op een uitklapmenu klikt en de inhoud scrollt naar beneden, dan is dat een verwachte beweging van de gebruiker.

De plugin controleert een eigenschap genaamd hadRecentInput. Als je een toets hebt aangeraakt of geklikt in de laatste 500 ms, markeert de browser die beweging als "verwacht" en de plugin negeert het om valse positieven te voorkomen. Het detecteert alleen bewegingen die onverwacht optreden (zoals een advertentie die plotseling verschijnt).

3. Visuele weergave (de rode vakken)

Zodra de plugin het element heeft dat is verplaatst, komt het visuele gedeelte om de hoek kijken:

1. Coördinaten berekenen: Gebruikt een functie genaamd getBoundingClientRect() om uit te zoeken waar dat element zich op dat precieze moment op het scherm bevindt (pixel omhoog, pixel links).
2. Frame-injectie: Maak een div met absolute positie, een 2px rode rand en een zeer hoge z-index om bovenop alles te tekenen.
3. Het label: Voeg linksboven het rode vak een klein vakje toe met de naam van het label (ins, img, div) en de waarde van de geaccumuleerde CLS.

Waarom is dit beter dan een extern rapport?

Tools zoals PageSpeed detecteren CLS soms niet omdat ze niet naar beneden scrollen of niet wachten tot bepaalde advertenties zijn geladen.

Door persistentie te gebruiken, meet de plugin de CLS die is geaccumuleerd tijdens de daadwerkelijke browsersessie van de gebruiker. Als een element een beetje beweegt aan het begin en een beetje tijdens het scrollen, telt de plugin dit bij elkaar op en markeert het, waardoor je bij benadering het echte cijfer krijgt dat Google uiteindelijk zal zien in zijn"Chrome User Experience" (CrUX) rapport.