Verbeter PageSpeed ​​Insights-score stap #1: Google PageSpeed-test

Om te beginnen moet u controleren hoe uw website zich verhoudt tot de PageSpeed-statistieken van Google. Dit kan ter plaatse worden gedaan, zonder account, geen e-mailregistratie of marketinghekserij. Pak gewoon de URL van uw website (of een URL die u wilt controleren).

Plak de URL van uw website en wacht even, het proces duurt een paar seconden, afhankelijk van de complexiteit van de pagina. Houd er rekening mee dat de analyse wordt gemaakt met betrekking tot die exacte URL – niet de hele website. De pagina wordt zowel voor desktop- als mobiel gebruik opgehaald, dus u ontvangt feitelijk twee rapporten.

De schaal van Google gaat van 0-100 en elke score is gemarkeerd met een aparte kleur, afhankelijk van de prestatieniveaus: rood, geel en groen. Als je meer dan 85 punten scoort, wordt het groen gemarkeerd, wat aangeeft dat je aan de veilige kant bent.

De 10 regels van Google PageSpeed ​​Insights

Na het uitvoeren van de analyse, krijgt u een gedetailleerd rapport over wat uw website goed doet, evenals de dingen die verbeterd moeten worden, met bruikbare suggesties voor zowel mobiele als desktopversies. Er zijn 10 hoofdregels die Google in de gaten houdt, sommige zullen met succes worden nageleefd, andere niet.

Voor de mislukte gebruikers krijgt u advies over hoe u beter met de vereisten kunt omgaan, waarbij u vooral webmasters aanspreekt die rechtstreeks in de code kunnen werken.

Dit zijn de dingen die u eerst moet doen:

1. Maak gebruik van browsercaching (zie de oorspronkelijke regel)

Sommige elementen van uw website kunnen tijdelijk worden opgeslagen (gecached) om het laden te vergemakkelijken. Het laden van niet-gecachete inhoud (HTML, CSS, logo, afbeeldingen) zal de zaken aanzienlijk vertragen. Geen wonder dat dit dé oplossing is voor uw website als u de PageSpeed ​​Insights-score wilt verbeteren.

Caching voor WordPress-websites wordt beheerd door verschillende gratis en premium plug-ins. Ik raad aan om W3 Total Cache uit te proberen (gratis oplossing, link hieronder) of direct voor WP Rocket te gaan, dat een prijskaartje heeft, maar nog steeds zeer betaalbaar is (het is wat we op de blog gebruiken).

2. Verwijder JavaScript dat de weergave blokkeert (zie de oorspronkelijke regel)

Kortom, sommige JavaScript-code kan uw inhoud boven de vouw verstoren, waardoor de pagina niet correct kan worden geladen.

Dit probleem heeft twee kanten:

De technische uitleg: het enige dat u hoeft te doen, is de oproep naar jQuery vanaf de kop van de pagina verder naar beneden te verplaatsen en aan te passen wanneer de oproep naar de jQuery-module wordt gedaan.

De vereenvoudigde oplossing: u kunt het probleem oplossen met één coole plug-in – WP Deffered JavaScripts. Het dwingt de browser om JavaScripts parallel te downloaden, waardoor de site sneller laadt.

3. Optimaliseer CSS-levering (zie de originele regel)

De meeste CSS hebben extra tijd nodig om te downloaden, dus het verminderen van het gewicht van de CSS-code zal ook helpen de PageSpeed ​​Insights-score te verbeteren.

Een plug-in die echt effectief is als het gaat om het aggregeren en minimaliseren van JavaScript, CSS en HTML, wordt Autoptimize genoemd. Installeer het gewoon en schakel de gewenste opties in Instellingen / Autoptimize in.

4. Verklein middelen (zie de oorspronkelijke regel)

Onnodige of overbodige code beïnvloedt het gedrag van de browser. Google zal u downgraden wanneer uw HTML-, CSS- en JavaScript-bestanden te groot zijn. Het wordt aanbevolen om alle JavaScript-bestanden die groter zijn dan 4096 bytes te verkleinen.

Dit proces wordt goed afgehandeld door de plug-ins die ook de CSS-levering optimaliseren, die we in het vorige punt noemden: WP Super Minify of Autoptimize. Gebruik ze om de PageSpeed ​​Insights-score te verbeteren.

5. Schakel GZip-compressie in (zie de oorspronkelijke regel)

Verdergaand met de codeverbeteringen kunnen CSS en HTML ook worden gecomprimeerd. Dit gebeurt met GZip-compressie, die de grootte van uw website verkleint voordat deze naar de browser wordt verzonden. Dit kan op verschillende manieren worden ingesteld:

  • U kunt dit door uw webhost laten instellen.
  • Je kunt het instellen in je .htaccess-bestand.
  • Je kunt het inschakelen via je caching-plug-in, zoals de eerder genoemde W3 Total Cache.

6. Optimaliseer afbeeldingen (zie de originele regel)

Afbeeldingen dragen gemiddeld voor ongeveer 60% bij aan de totale grootte van een webpagina – dit is de grootste factor die de laadtijden beïnvloedt. Het optimalisatieproces kan de grootte van uw afbeeldingen aanzienlijk verkleinen door onnodige informatie te verwijderen en ze slim opnieuw te comprimeren met behulp van de meest geschikte algoritmen.

De optimalisatie kan op verschillende manieren worden afgehandeld. Verliesloze optimalisatie is matig en wordt aanbevolen voor technische tekeningen waarbij geen details uit de afbeelding mogen worden verwijderd. Lossy-optimalisatie kan de websitesnelheid radicaal verbeteren door afbeeldingen agressiever te verkleinen. Dit heeft echter geen invloed op het visuele aspect van uw afbeelding. Afbeeldingen worden nog steeds correct weergegeven op internet en de optimalisatie zal de manier waarop gebruikers de afbeeldingen online zien niet verstoren.

Een ander ding is dat camera’s en smartphones foto’s maken met veel megapixels, die niet nodig zijn voor internet. Om een ​​optimale afbeeldingsgrootte te behouden en het gebruik van serverruimte te verminderen, moet u ook het formaat van afbeeldingen wijzigen tot een maximale breedte en hoogte die uw WordPress de ik kan omgaan.

Bekijk onze andere post hier voor een gedetailleerde uitleg over beeldoptimalisatie. Het zal u helpen de PageSpeed ​​Insights-score te verbeteren.

7. Verbeter de reactietijd van de server (zie de oorspronkelijke regel)

Een trage reactietijd kan worden veroorzaakt door verschillende problemen: slechte webhosting, webserverconfiguratie, overbelasting van het verkeer of te veel gebruikte bronnen. De aanbeveling voor optimale serverresponstijd van Google is ingesteld op minder dan 200 ms.

Het hebben van te veel slecht gecodeerde plug-ins kan onder andere de reactietijden van de server beïnvloeden.

8. Geef prioriteit aan zichtbare inhoud (zie de oorspronkelijke regel)

Een zeer goede gewoonte bij het coderen van websites – bij het bouwen van de HTML-structuur van uw site – is om eerst de inhoud te plaatsen en vervolgens alle zijelementen en JavaScript verderop op de pagina.

Google waarschuwt ook voor het verminderen van de hoeveelheid gegevens die door uw bronnen wordt gebruikt – een optie die had moeten worden opgelost door de plug-ins die werden aanbevolen bij het bespreken van regel #4.

9. Gebruik asynchrone scripts (zie de oorspronkelijke regel)

Wanneer de code synchroon wordt uitgevoerd door de browser, kan deze niet meer dan één taak tegelijk uitvoeren en wordt voorkomen dat de pagina sneller wordt geladen.

Hiervoor heeft Google een lijst gepubliceerd met de asynchrone versies van populaire JavaScript-tools/script. Zorg ervoor dat u ze gebruikt in plaats van hun standaardversies om de PageSpeed ​​Insights-score te verbeteren.

10. Vermijd omleidingen op meerdere bestemmingspagina’s (zie de oorspronkelijke regel)

Omleidingen zijn een mooi hulpmiddel om mensen precies daar te krijgen waar u ze op uw website wilt hebben. Onnodige omleidingen veroorzaken echter ook vertragingen en maken het moeilijker om de PageSpeed ​​Insights-score voor uw WordPress-site te verbeteren.

Google is niet zo dol op omleidingen in welke vorm dan ook. Als u ze echter wel moet gebruiken, zorg er dan voor dat u slechts één omleiding heeft voor een enkele URL.

Vermijd bijvoorbeeld omleidingen vanaf site.com/page » www.site.com/page » m.site.com/page als het om de mobiele versie gaat.

Als je alleen eenvoudige eenmalige 301-omleidingen wilt, probeer dan een plug-in genaamd Linker. Kortom, het laat Google weten dat wat u ook omleidt, geen tijdelijke omleiding is, maar daar voor altijd zal blijven.