WordPress optimaliseren: zo analyseer je jouw website in 7 seconden

Jan Hornung
9 Min.
Met deze tips en onze Cheat Sheet kun je jouw WordPress pagina's in slechts 7 seconden analyseren en zelfs nog beter dan Google PageSpeed Insights
Laatst bijgewerkt op

Als u wilt WordPress optimaliseren, zijn sommige maatregelen glashelder, bekend en bewezen effectief. Maar zelfs zogenaamd grondig geoptimaliseerde pagina's hebben vaak nog potentieel. Daarom is het de moeite waard om verder te kijken dan de horizon van Google PageSpeed Insightsen Co. Omdat veel prestatietools echte data-goudmijn leverenn, die een zeer uitgebreide analyse mogelijk maken - als je weet waar je naar moet zoeken. Ik laat je vandaag zeven tips zien, waardoor de analysee in slechts 7 seconden.

Eenvoudige prestatietools zoals Google's Test mijn site of Google PageSpeed Insights Het resultaat is dat de tool in eerste instantie een lijst met aanbevolen acties zal opleveren. Om te beginnen kan dit wel eens goed zijn. Als u uw WordPress maar efficiënt toezicht houden op projecten en WordPress U moet vroeg of laat een prestatietool gebruiken die ook de laadtijd van uw pagina weergeeft en u precies laat zien hoe uw blog, uw winkel, uw bedrijfspagina zich gedraagt bij het laden.

Dit omvat bijvoorbeeld Koninkrijk, GTMetrix of Webpagina test. Deze zorgen vaak voor een zogenaamde Watervaldiagram met. Deze ietwat omvangrijke datasets worden door veel gebruikers nauwelijks opgemerkt. Maar als je professioneel met WordPress ze werkt, moet je begrijpen hoe ze werken. Want: Er is geen enkele andere gegevensbron die u laat zien hoe snel uw site laadt, hoe goed uw hoster is, hoe efficiënt uw site laadt en waar de bouwplaatsen van uw site zich bevinden.

En met een beetje oefening kunt u elke pagina in één oogopslag en in (handgestopte) 7 seconden analyseren 😉.

Hoe doe je dat? Vandaag laat ik het je stap voor stap zien!

e-boek: Meet de prestaties van uw site als een professional

WordPress optimaliseren: Zonder een watervaldiagram kras je alleen maar op het oppervlak.

Misschien vraag je het je nu af: Wat is al die ophef? Er zijn geweldige prestatietools die mij al alle belangrijke optimaliseringsmaatregelen laten zien. Bovendien is het meestal toch beperkt tot de volgende punten:

Tuurlijk, als je deze punten hebt verduidelijkt en geoptimaliseerd, heb je een zeer goede basis gecreëerd voor een echt snelle site. Daarom worden deze redenen (terecht) behandeld in alle gidsen voor goede prestaties.

Bijvoorbeeld

En ook met de meest frequente Laadtijdremmen van -pagina'WordPress s deze redenen komen altijd bovendrijven.

Onze ervaring met honderden systematische prestatieanalyses met webpage-tests en uitgebreide sitecontroles toont echter aan: zelfs in zogenaamd "grondig geoptimaliseerde" pagina'WordPress s zijn er steeds weer prestatievalkuilen te vinden. En dit is precies waar het watervaldiagram helpt. Omdat het iets speciaals kan doen: het laat zien hoe uw pagina wordt geladen, welke elementen worden geladen en hoe snel het geheel zich voltrekt.

Zo krijgt u toegang tot de dataschat

Alle goede prestatieanalyses leveren ook watervaldiagrammen op. Als je bijvoorbeeld de Pingdom Tools gebruikt, hoef je alleen maar ver genoeg naar beneden te scrollen.

WordPress  koninkrijk waterval optimaliseren
Met de Pingdom Tools moet je eerst een beetje scrollen om bij het watervaldiagram te komen. De overeenkomstige sectie hier heet File Requests. Webpagetest en GT-Metrix hebben elk hun eigen tabbladen voor de diagrammen.

Maar om al deze informatie goed te krijgen, moet u begrijpen hoe u watervaldiagrammen correct kunt lezen.

Hoe de watervaldiagrammen correct te lezen

Door de geconcentreerde informatiedichtheid zijn watervaldiagrammen niet precies bekend om hun helderheid. In feite hoef je maar vier dingen te weten om de gegevens te begrijpen:

  1. De tijd is uitgezet op de X-as.
    De watervaldiagrammen zijn chronologisch opgebouwd: De X-as laat u precies zien wanneer een element begint te laden en hoe lang het duurt om te laden. Het is deze chronologische structuur die een watervaldiagram zo waardevol maakt. Want zo kunt u precies zien waar de laadtijd verloren gaat en met welke processen u moet beginnen om uw laadsnelheid te optimaliseren.
  2. Elk HTTP-verzoek wordt geregistreerd op de Y-as.
    Voor de meeste watervaldiagrammen kunt u op de elementen op de Y-as klikken om extra informatie over de elementen te krijgen.
  3. Een legende laat zien welk type grondstof wordt geladen.
    Webpage-test markeert HTML, CSS, afbeeldingen, Flash, etc. in kleur, Pingdom gebruikt hiervoor symbolen.
  4. Een extra codeersysteem geeft informatie over hoe individuele verzoeken worden uitgevoerd - bijvoorbeeld hoe lang het duurt om verbinding te maken met de server of of dat er gebruik wordt gemaakt van HTTPS.
WordPress optimaliseren: zo analyseer je jouw website in 7 seconden
WordPress  het optimaliseren van de gebieden van een watervaldiagram
In deze figuur vindt u de vier hierboven beschreven gebieden.

WordPress te optimaliseren met de 7 seconden-analyse

Het is nu dus duidelijk hoe je een watervaldiagram leest - maar welke conclusies kun je daaruit trekken?

In de prestatie-analyse hebben we 7 seconden Analyse bewezen: Het diagram geeft u in één oogopslag informatie over zeven belangrijke factoren voor de laadsnelheid. Deze zeven hacks helpen u precies te begrijpen hoe en hoe snel uw website wordt weergegeven. En ze laten zien waar er mogelijkheden zijn om ze sneller te maken, om problemen op te lossen of om ze verder te verbeteren.

Noot:

Overigens zullen we in onze voorbeelden altijd verwijzen naar de watervaldiagrammen van Webpagetest, omdat we deze tool eigenlijk altijd gebruiken, ongeacht of dit handmatig of automatisch gebeurt.

Tip 1: Grootte is belangrijk

Hoe langer de waterval is (d.w.z. hoe meer elementen er op de Y-as worden verwijderd), hoe meer aanvragen er moeten worden verwerkt en hoe langzamer de pagina's worden geladen. Toch hoeft een lange waterval niet per se slecht te zijn. Er zijn functies en externe middelen die u gewoonweg niet kunt of wilt missen. Bij ons is bijvoorbeeld de live chat zo'n hulpmiddel. Het laden van het chatprogramma vertraagt onze site natuurlijk. Maar de snelle ondersteuning via chat is een centraal onderdeel van onze hosting. PluginDus we kunnen niet zonder.

Ook zorgt HTTP/2 ervoor dat alleen al het aantal verzoeken niet meer dezelfde betekenis heeft als een paar jaar geleden.

Want met de nieuwe webstandaard kunnen aanvragen gelijktijdig worden verwerkt in plaats van na elkaar zoals voorheen. Bovendien stuurt de server uit voorzorg HTML-bestanden naar de browser onder HTTP/2. De nieuwe standaard compenseert dus de nadelen die kunnen voortvloeien uit een groot aantal HTTP-verzoeken. Om te kunnen profiteren van HTTP/2 moet uw webpagina echter worden geladen via HTTPS, d.w.z. via een SSL-certificaat ...orde.

In ieder geval heeft de ervaring geleerd dat er geen direct verband bestaat tussen de lengte van een waterval en de werkelijke laadsnelheid. Tenminste tot een bepaalde limiet: Met meer dan 100 aanvragen in de meeste gevallen zijn er Besparingspotentieel.

Als uw website deze drempel overschrijdt, moet u uw HTTP-verzoeken nader bekijken. Onze homepage bijvoorbeeld, laadt met meer dan 130 HTTP-verzoeken. Er is hier dus potentieel voor optimalisatie.

Als uw waterval meer dan 100 verzoeken bevat, kijk dan goed welke u kunt missen.

Tip 2: Detecteer de oplaadtijd

De maximale waarde op uw X-as is essentieel voor het analyseren van de laadsnelheid: hier kunt u zien hoeveel tijd er voorbij gaat tot uw website volledig is weergegeven. Hoe kleiner deze waarde is, hoe beter.

Als de maximale waarde van uw X-as hoger is dan 10, moet u zeker rekening houden met de laadsnelheid van uw pagina.

De totale laadtijd van uw pagina moet minder dan 10 seconden bedragen.

Tip #3: Detecteer de waargenomen laadtijd

De meeste gebruikers geven er niet veel om welke waarden analysetools uitspugen. Het enige wat voor hen telt is: hoe snel het laden van de pagina's aanvoelt.

Voor u als werfleider is het daarom belangrijk om dit gevoel van snelheid zoveel mogelijk te verbeteren. Dit kunt u bereiken door middel van optimale caching, boven-de-voudige optimalisatie of - als uw klanten zich in het buitenland bevinden - door gebruik te maken van een Content Delivery Network (CDN).

Gelukkig leert men deze vilten laadtijd ook heel goed kennen aan de hand van watervaldiagrammen. Voor zover wij weten is de Webpagetest de enige gratis tool die gebruikt kan worden tussen technisch gezien laadtijd en de gepercipieerd door de gebruiker De oplaadtijd is anders.

Het hele diagram geeft de - minder belangrijke - technische laadtijd weer. De waargenomen laadtijd is verborgen tussen de blauwe en groene lijnen in het diagram.

De groene lijn geeft aan wanneer het eerste visuele element van de webpagina wordt geladen (dit wordt het "Start Render" punt genoemd). De blauwe lijn geeft aan wanneer de gebruiker de pagina als volledig geladen waarneemt - op dit punt neemt de kans op interactie met de pagina aanzienlijk toe. Deze twee lijnen moeten zo ver mogelijk naar links en zo dicht mogelijk bij elkaar liggen.

WordPress  het optimaliseren van het in kaart brengen van de waargenomen laadtijd
Het oranje gebied toont de fase waarin geen zichtbare inhoud wordt weergegeven. Tot het einde van deze fase ziet de bezoeker alleen een witte pagina. Het blauwe gebied markeert de tijdspanne tussen Start Render en Load Time, waarin de bezoeker een zichtbaar weergaveproces kan waarnemen (bijvoorbeeld een zandloper). Beide vormen samen de waargenomen laadtijd.

Webpagina test is het enige instrument dat je die gegevens kan geven. Van het Pingdom Tools of GTMetrix is dit ons niet bekend. Deze regel is dus alleen van toepassing als u Gebruik van webpagina's:

De groene lijn moet na ongeveer 2 tot 3 seconden verschijnen, de blauwe lijn op zijn laatst na 7 seconden.

Tip #4: HTTP/2 vs. HTTP/1

HTTP/2 biedt een doorslaggevend voordeel ten opzichte van HTTP/1: met de nieuwere webstandaard laden pagina's veel sneller. Naast een SSL-certificaat bent u echter ook afhankelijk van uw hoster om u deze dienst aan te bieden. Veel exploitanten van locaties weten echter niet zeker of dit ook daadwerkelijk het geval is.

Een van de grootste voordelen van HTTP/2 is de gelijktijdige verwerking van meerdere aanvragen. En dat zie je duidelijk in je watervaldiagram. Aangezien de verzoeken chronologisch worden verwerkt, beginnen meerdere balken op hetzelfde punt op de X-as wanneer HTTP/2 wordt gebruikt.

WordPress   het laadgedrag van een WordPress  -Pagina met en zonder HTTP/2
Links het typische laadgedrag van een WordPress pagina zonder HTTP/2. De individuele HTTP-verzoeken worden achter elkaar uitgevoerd. Rechts ziet u hoe dezelfde pagina zich gedraagt met HTTP/2: De individuele verzoeken worden hier tegelijkertijd geladen.

Laad enkele verzoeken parallel, uw pagina zal draaien met HTTP/2.

Tip 5: herken foto's die te groot zijn

In ongeveer 30 procent van de websites die we analyseren, vinden we nog steeds potentieel in termen van beeldgrootte. En dit, hoewel de meeste webmasters ervan uitgaan dat ze er al het beste van gemaakt hebben.

Afbeeldingen zijn - naar onze ervaring - de belangrijkste factor voor de laadtijd van de pagina's na de caching. Voor elke afbeelding die u in de backend uploadt, worden WordPress automatisch een heleboel andere bestanden, de thumbnails of de uitgelichte afbeeldingen, aangemaakt. De juiste compressie van deze bestanden is een van de meest effectieve manieren om de grootte en dus de laadsnelheid van uw pagina te verminderen.

Hoe u uw foto's kunt optimaliseren laat u bijvoorbeeld zien hoe u deze kunt optimaliseren:

In het watervaldiagram kunnen afbeeldingen snel worden geïdentificeerd met behulp van de legenda: Webpagetest toont ze met paarse balken, Pingdom met een icoon. Alleen GTMetrix labelt afbeeldingen niet apart. In ieder geval: Als de bijbehorende balken veel langer zijn dan de balken van de overige verzoeken, duidt dit op een lange laadtijd van het beeld.

WordPress  optimaliseren dit is hoe het eruit ziet als foto's echt te groot zijn
Een extreem maar zeer levendig voorbeeld van ongecomprimeerde beelden. Sommige bestanden hebben alleen al meer dan 8 seconden nodig om te laden, waardoor de hele pagina wordt vertraagd.

In een dergelijk geval als hierboven, moet u uw foto's goed bekijken. Door op het betreffende verzoek te klikken, kunt u meestal in een watervaldiagram precies zien om welke bestanden het gaat. Dit maakt het veel gemakkelijker om te zoeken naar laaddynamometers.

Lange laadbalken voor beeldbronnen geven het compressiepotentiaal aan.

Tip 6: Doorschakelen van het spoor

Een watervaldiagram helpt u niet alleen te begrijpen welke elementen wanneer en hoe snel worden geladen, maar ook hoeveel redirects er zijn opgezet en waar ze naartoe wijzen.

Verzoeken met doorsturen worden meestal in kleur gemarkeerd. Het schema geeft u ook informatie over welke expeditie is opgezet en waar deze naartoe leidt.

WordPress  het doorsturen te optimaliseren
Deze pagina heeft een aantal 302 redirects op een rij.

Met een watervaldiagram kunt u dus in één oogopslag zien hoeveel en welke omleidingen er zijn ingesteld. Dit helpt overigens ook bij het opsporen van doorstuurlussen na een DNA-verandering. Dankzij de gele markeringen hebben we al meerdere malen onnodige of zelfs schadelijke omleidingen kunnen opsporen.

Gele lijnen markeren doorstroming.

Tip #7: Fouten opsporen in een oogopslag

Af en toe gebeurt het dat elementen van een webpagina niet correct worden weergegeven. Het kan bijvoorbeeld gaan om AdSense-frames, maar ook om geïntegreerde kaarten en lettertypen.

WordPress  optimaliseren in het watervaldiagram, fouten worden geïdentificeerd met rode lijnen
Deze pagina werpt een 404-fout uit.

In dit geval werpt het watervaldiagram een foutmelding uit en markeert de lijn met de betreffende vraag in het rood. Het diagram geeft ook het type fout aan en de bron die de fout veroorzaakt.

Rode lijnen geven fouten aan bij het renderen van de pagina.

Met de Spiekbriefje alle tips in beeld

Een watervalkaart is waarschijnlijk de meest waardevolle evaluatie die u kunt krijgen voor uw -pagina'WordPress s. Het combineert verschillende gegevens die u als site-eigenaar in de gaten moet houden: De laadtijden, de volgorde van de weergave en de foutmeldingen. Gewapend met de tips uit dit artikel, zult u snel herkennen en effectief waar er nog ruimte is voor verbetering:

  • Is de waterval te lang (meer dan 100 aanvragen)?
  • Is de maximale waarde van de X-as te groot (groter dan 10)?
  • Laadaanvragen parallel (via HTTP/2)?
  • Zijn de beelden te groot (d.w.z. de beelden zijn slecht geoptimaliseerd)?
  • Staan de groene en blauwe lijnen te ver naar rechts of staan ze te ver uit elkaar (waardoor de gebruiker de pagina als traag ervaart)?
  • Zijn er onverwachte gele lijnen (omleidingen)?
  • Zijn er rode lijnen (fouten)?

Toegekend: De eerste keer kan het langer duren om het te analyseren. Met een beetje ervaring kunt u echter met watervaldiagrammen uw WordPress projecten veel beter begrijpen en optimaliseren.

Gerelateerde artikelen

Commentaar op dit artikel

Schrijf een commentaar

Je e-mail adres wordt niet gepubliceerd. Verplichte velden zijn met * gemarkeerd.