Google PageSpeed Insights Foutmeldingen

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Google PageSpeed Insights is een geweldige manier om snel een overzicht te krijgen van het optimalisatiepotentieel van uw site. Vandaag zal ik je laten zien hoe je dit potentieel kunt gebruiken en je PageSpeed score kunt verhogen. U moet echter niet slaafs de Google-resultaten volgen. Omdat de PageSpeed foutmeldingen niet altijd nuttig zijn.

Enige tijd geleden heeft Caspar Hübinger in een van zijn blogposts zeer duidelijke woorden gevonden voor zijn Google PageSpeed Insightsresultaat. En hij bekritiseert niet alleen het instrument, maar ook het gebruik van het instrument door de gebruikers. Want als je niet weet hoe je de individuele optimalisatiesuggesties moet interpreteren en oplossen, kun je snel verdwalen in de onzinnige jacht naar een 100-score. Maar dat zou onverstandig zijn. Want utopische Google PageSpeed-scores zijn meestal tijdverspilling. Het optimaliseren van de laadtijd is belangrijker.

Vandaag laat ik u zien hoe u de belangrijkste foutmeldingen van Google PageSpeed Insights kunt interpreteren en uw pagina dienovereenkomstig kunt optimaliseren.

Maar voordat ik u laat zien hoe u de afzonderlijke foutmeldingen kunt interpreteren en de fouten kunt herstellen, wil ik eerst ingaan op hoe u Google PageSpeed Insights correct gebruikt. We hebben vaak gezien dat gebruikers gefixeerd zijn op hun PageSpeed score zonder de laadtijd van hun pagina in de gaten te houden.

Als u niet geïnteresseerd bent in dit gedeelte, sla het dan over en leer direct hoe u de foutmelding "CSS comprimeren" kunt oplossen.

Google PageSpeed foutmeldingen zijn niet altijd correct en belangrijk

U mag nooit uitsluitend vertrouwen op de resultaten of foutmeldingen van Google PageSpeed Insights . Dat komt omdat de Google-tool niet de belangrijkste parameter van uw website meet: de laadtijd van de pagina. Om dit goed te meten, raad ik Webpagetest.org aan.

Alleen als je bij de optimalisatie van je site de laadtijd van de pagina vanaf het begin in gedachten heeft, kun je zinvolle uitspraken doen over het succes van de optimalisatie. Omdat het doel van elke optimalisatie altijd een verbeterde gebruikerservaring moet zijn. In het geval van prestatie-optimalisering gaat het natuurlijk om de laadtijd van de pagina en de waargenomen laadtijd van de pagina.

REMINDER!

Meet altijd de laadtijd van de pagina voordat u de prestaties van uw pagina optimaliseert. Dit is de enige manier om te beoordelen hoe succesvol de optimalisatie was.

Vanuit het oogpunt van de gebruiker zijn snellere laadtijden en kleinere pagina's altijd gunstig. Het geduld en de aandachtsspanne van de gemiddelde gebruiker blijven afnemen(zoals blijkt uit deze studie van Microsoft) - dit is vooral van cruciaal belang voor e-commerce - en steeds meer bezoekers komen via mobiele apparaten. Al in 2016 had 56 procent van de Duitsers regelmatig toegang tot het internet via smartphones of tablets. Hier zijn de verbindingssnelheden en datavolumes niet altijd onbeperkt. Slanke, snelle pagina's zijn dus op hun plaats.

Google PageSpeed geeft echter alleen informatie over het optimalisatiepotentieel van uw pagina en maakt het slechts mogelijk enkele conclusies te trekken over de gebruikerservaring. De geringe betekenis van Google PageSpeed-foutmeldingen wordt versterkt door het feit dat de tool op bepaalde gebieden niet kan worden stilgelegd, of alleen met aanzienlijke extra inspanningen.

De verwijzing naar browser caching zal bijvoorbeeld altijd verschijnen wanneer externe bronnen - waaronder Google's eigen diensten - worden geïntegreerd. Deze bronnen kunnen echter niet worden gedekt door de caching van uw pagina door de browser. De foutmelding heeft dus geen betrekking op de gebruikerservaring van uw site, maar wordt geproduceerd door de logica van het hulpmiddel zelf. In het ergste geval wordt het bericht geïnterpreteerd alsof er geen browser caching actief is.

Focus dus niet in de eerste plaats op de Google rating, maar op de laadtijd. Dit is de enige echt belangrijke factor.

Maar hoe zit het met mijn Google ranking?

Het voorbeeld van het gebrek aan caching in de browser maakt heel duidelijk waarom u zich niet moet laten afschrikken door een vermeend slecht PageSpeed-resultaat.

Als u bijvoorbeeld Google Maps of Google Analytics op uw pagina hebt geïntegreerd, zullen deze de volgende foutmelding genereren:

Typische Google PageSpeed Insights foutmeldingen: Browser caching wordt naar verluidt niet goed gebruikt

Hetzelfde geldt voor andere diensten van derden. Bijvoorbeeld, onze support chat.

Daarom wordt elke keer dat we onze site testen op PageSpeed Insights , dit punt eraf gekalkt. Dit betekent dat wij weten dat deze factor onze resultaten altijd negatief vertekent en dat wij hem daarom eenvoudigweg negeren.

Voor de SEO van uw site betekent dit dat de laadtijd en de gebruikerservaring ook veel belangrijker zijn voor de Google ranking dan de specifieke PageSpeed rating.

Want als u de laadtijd van uw pagina optimaliseert, werkt u automatisch aan veel van de gebieden die belangrijk zijn voor Google. Het verbeteren van de laadtijd en de Google PageSpeed score zijn dus op een bepaalde manier met elkaar verbonden.

Naar mijn mening moet u zich echter niet verliezen in de jacht op een 100-score.

Maar nu naar de optimalisatiestappen!

Foutmelding 1: CSS comprimeren

In onze ervaring is dit een van de meest ontmoedigende foutmeldingen van Google PageSpeed Insights.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Deze foutmelding geeft aan dat de CSS-bestanden van uw pagina nog gecomprimeerd kunnen worden (of in bovenstaand geval, dat dit al met succes is gebeurd). Een dergelijke vermindering vermindert het aantal tekens in de documenten. Hierdoor wordt de bestandsgrootte kleiner. Commentaar, spaties en opmaak, bijvoorbeeld, worden verwijderd.

Uitvoering: Ook al lijkt deze hint ontmoedigend, de uitvoering is denkbaar eenvoudig. In principe zijn er twee mogelijke oplossingen voor dit geval: Als u zelf een CSS expert bent, kunt u het aantal CSS bestanden handmatig verminderen en een steno-notatie gebruiken bij het maken ervan. U kunt de grootte van de CSS-bestanden ook zelf verkleinen met online tools zoals CSS Compressor of CSS Minifier.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Natuurlijk is er ook de handige oplossing van CSS minificatie plugins in WordPress. Sommige plug-ins doen allround werk en kunnen niet alleen CSS, maar ook JavaScript en HTML comprimeren en optimaliseren.

Verdere informatie

In dit artikel vindt u een gedetailleerde uitleg over de manieren waarop u HTML, CSS en JavaScript in WordPress kunt verminderen.

Met HTTP/2, heeft het samenvoegen van CSS niet noodzakelijk zin

De zojuist genoemde Minify plug-ins worden veel gebruikt. Dat komt omdat ze handig zijn en volledig automatisch zorgen voor het comprimeren en samenvoegen van CSS (en nog veel meer). Tot voor kort was het combineren van CSS-bestanden ook heel zinvol. Intussen is er wel het een en ander veranderd: sinds de HTTP/2-standaard van kracht is, kunnen browsers verschillende bestanden van de webserver tegelijk laden.

Dit betekent dat de gegevens niet langer per se hoeven te worden gecombineerd, want met HTTP/2 kunnen meerdere gegevenspakketten tegelijk worden uitgewisseld. HTTP/2 moet bijvoorbeeld worden ingesteld door de hoster, en kan alleen worden gebruikt met een SSL-certificaat.

Dus voordat u beslist over een plugin met tientallen functies en configuratieopties, denk er goed over na of u die überhaupt nodig hebt. Vooral als u er zeker van bent dat u CSS zelf kunt optimaliseren.

Omdat een extra plugin je site trager kan maken onder bepaalde omstandigheden. Vooral als de andere functies van de all-rounder plugins niet hun volledige potentieel kunnen ontplooien.

Foutmelding 2: Verwijder bronnen die rendering blokkeren

Ook dit bericht brengt bij veel gebruikers zweetdruppels op het voorhoofd, want het is niet zo eenvoudig te implementeren en het is ook een van de eeuwige punten van kritiek van Google PageSpeed.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Een webpagina is in een bepaalde volgorde opgebouwd. Deze laadvolgorde kan worden geoptimaliseerd. PageSpeed klaagt bijna altijd dat CSS bestanden deze optimale laadvolgorde blokkeren. En dit geldt zelfs voor pagina's die reeds zeer goed zijn geoptimaliseerd(zoals het geval van Caspar Hübinger aantoont). Niettemin kan de hint zeer waardevol zijn voor het optimaliseren van de laadtijd. In principe vertelt deze hint je dat JavaScript of CSS code die belangrijk is voor het laden van een element - bijvoorbeeld een achtergrondkleur - nog niet beschikbaar is op het moment dat het element geladen wordt. Als gevolg daarvan wordt het pas weergegeven nadat het overeenkomstige CSS-commando is geladen. Dit verhoogt de laadtijd van uw pagina, maar beïnvloedt vooral de gebruikerservaring, omdat het lijkt alsof de pagina langer duurt om te laden.

Umsetzung: Eine gängige Lösung ist die Umsetzung einer Daumenregel: CSS in den Header. Das bedeutet, dass du CSS-Code vom Hauptteil des HTML Dokuments, dem <body>, an den Anfang des Dokuments, den <head>, verschiebst und dort als <style> einbindest.

An diesem Beispiel wird deutlich, was ich meine. Der Codeschnipsel unten definiert unsere spezifische Hintergrundfarbe für den Blog. Das <style>-Element wird im head des HTML-Dokuments geladen. So lädt der Seitenhintergrund nicht erst am Ende des Dokuments und erzeugt einen unschönen Farbsprung oder blockiert gar das Rendering.

<head>
<style type="text/css" id="custom-background-css">
body.custom-background { background-color: #f5faff; }
</style>
</head>

U kunt deze optimalisatiemaatregel op twee manieren uitvoeren: U kunt de code zelf aanraken en de CSS codes naar de header verplaatsen, of u kunt een plugin het werk laten doen. Plugins zoals Better WordPress Minify kunnen hier ook bij helpen.

Google PageSpeed Insights Foutmeldingen - uittreksel van de plugin Better WordPress Minify

De Minify plugin laat in de opties zien, bijvoorbeeld, welke CSS bestanden al naar de header zijn verplaatst. U kunt hier ook handmatig meer CSS-bronnen toevoegen.

Google PageSpeed Insights Foutmeldingen - uittreksel van de optimalisatie plugin Autoptimize

De plug-in Autoptimize daarentegen kiest voor een all-round benadering: Hier selecteert u de opties voor alle CSS bestanden die niet van het proces zijn uitgesloten.

De uittreksels van de plug-in opties laten zien: Zelfs de plug-in variant kan niet worden uitgevoerd zonder een basiskennis van het proces. Je moet je dus ook vertrouwd maken met de plug-ins.

Foutmelding 3: Afbeeldingen efficiënt coderen

Dit is een ander punt waar PageSpeed Insights vaak over moppert. Dit geval is echter bijna altijd snel en gemakkelijk te implementeren en levert meestal ook tastbare voordelen op voor de laadtijd.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Veel gebruikers onderschatten de rol van de afbeeldingsgrootte voor de laadtijd van hun pagina. Toch zijn afbeeldingen heel vaak een van de grootste laadtijdremmers. Zelfs als slechts kleine hoeveelheden gegevens voor afzonderlijke beelden worden opgeslagen, kan het totale opgeslagen volume een aanzienlijke hoeveelheid gegevens vormen.

Omdat een beeld zelden gewoon een beeld is. WordPress genereert automatisch meerdere thumbnails van de afbeelding wanneer u deze uploadt. Dus als u op uw homepage niet de originelen gebruikt, maar kleinere versies ervan, d.w.z. thumbnails of featured images, dan moeten die natuurlijk ook geoptimaliseerd worden. Op die manier wordt één beeld al snel meerdere bestanden, die ook nog eens een meervoudige gegevensbelasting met zich meebrengen.

Implementatie: In principe hebt u twee mogelijkheden om uw afbeeldingen te optimaliseren. Ofwel optimaliseert u de beelden vóór het uploaden, ofwel erna of tijdens het uploaden. Het eerste kan worden gedaan met online of offline tools, het tweede met geschikte WordPress beeldoptimalisatie plug-ins.

Als u compressie in uw workflow kunt integreren, is het zinvol om de beelden te optimaliseren voordat u ze uploadt. Daar zijn online tools voor, zoals Kraken.io. Of je kunt offline de kwaliteit en dus de bestandsgrootte van je afbeeldingen verminderen, bijvoorbeeld rechtstreeks in Photoshop. Dit bespaart u de extra plugin en houdt uw pagina slank.

De handigste oplossing is, natuurlijk, een plug-in. Add-ons zoals Optimus of Smush optimaliseren niet alleen de hoofdafbeelding, maar ook alle variaties daarop. Smush is ook in staat om al uw bestaande afbeeldingen achteraf te optimaliseren.

De plug-ins werken onder andere met een zogenaamde "lossless compression". Dit betekent dat de bestandsgrootte van de beelden kleiner wordt, maar dat hun zichtbare kwaliteit niet vermindert.

Foutbericht 4: tekstcompressie activeren

Deze foutmelding van Google PageSpeed is zeer snel te verhelpen en kan de laadtijd van uw pagina aanzienlijk verkorten.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Dat wil zeggen: U hebt de grootte van uw afbeeldingen en CSS al zoveel mogelijk beperkt. Dat is goed! Maar dat is niet alles. Nu kun je een ander compressiemechanisme gebruiken. U kent dit proces waarschijnlijk van het downloaden van grote gegevenspakketten: Je hebt ze meestal in gezipte, dat wil zeggen gecomprimeerde, vorm. Dit maakt de gegevens kleiner en de download sneller. De gegevenspakketten moeten echter nog worden uitgepakt na het downloaden. Precies hetzelfde gebeurt wanneer een pagina wordt geladen: De webserver levert de datapakketten gecomprimeerd aan, de webserver pakt ze uit. Dit maakt de gegevensoverdracht sneller en verkort de laadtijd van de pagina.

Implementatie: Ofwel is de datacompressie reeds ingesteld op de server ofwel moet u deze zelf activeren. Als je een Raidboxes klant bent, hoef je je nergens zorgen over te maken. Dat komt omdat wij standaard de bijzonder sterke Brotli compressie hebben geactiveerd.

Met de volgende entry in uw .htaccess kunt u de zogenaamde GZIP-compressie ook handmatig activeren. Op voorwaarde dat u een Apache webserver hebt.

<ifModule mod_gzip.c>
 mod_gzip_on Yes
 mod_gzip_dechunk Yes
 mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
 mod_gzip_item_include handler ^cgi-script$
 mod_gzip_item_include mime ^text/.*
 mod_gzip_item_include mime ^application/x-javascript.*
 mod_gzip_item_exclude mime ^image/.*
 mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
 </ifModule>
 
 <IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

Foutbericht 5: Statische inhoud leveren met een efficiënt cachebeleid 

Naar mijn mening is de verwijzing naar browser caching verreweg het meest irritant op Google PageSpeed Insights. Dit komt omdat je browser caching alleen kunt instellen voor je eigen bronnen. Browser caching is niet mogelijk voor externe bronnen.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Betekenis: Browser caching betekent dat de browser een statische versie van uw pagina opslaat en deze niet opnieuw bij de webserver hoeft op te vragen wanneer u de site bezoekt, maar dat de pagina al geladen is.

Implementatie: Ofwel heeft uw hoster browser caching al geactiveerd aan de server kant, of u kunt het instellen door het .htaccess bestand te manipuleren (onthoud: deze instelling werkt alleen op Apache web servers). De onderstaande voorbeeldcode stelt bijvoorbeeld de browsercache in op één maand, d.w.z. dat de statische versie van uw pagina gedurende één maand in de browser van de bezoeker wordt bewaard.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

Ook hier geldt: Als u een Raidboxes klant bent, dan is browser caching al standaard actief.

Mijn 2 centen: Zonder een cache is alles niets

Goed, je hebt nu de afbeeldingen op je pagina geoptimaliseerd, CSS gereduceerd, gecomprimeerd en in de juiste volgorde gezet en de browser van je bezoekers de pagina laten cachen. Al deze maatregelen verkorten de laadtijd van uw pagina.

Betekenis: Zonder een goede cache geef je echter veel van dit potentieel weg. Caching is en blijft veruit de belangrijkste prestatiefactor. Een cache slaat de inhoud van uw WordPress pagina tijdelijk op en zorgt ervoor dat de hele pagina niet telkens opnieuw hoeft te worden geladen. In plaats daarvan wordt een statische, d.w.z. reeds gerenderde versie van uw pagina afgeleverd vanuit een cache. Dit omzeilt het trage PHP en de database in het bijzonder.

Implementatie: Nogmaals, of uw hoster heeft al een server-side cache ingesteld of u gebruikt een caching plugin. Er zijn een aantal zeer krachtige plug-ins die grote delen van uw pagina cachen en leiden tot een aanzienlijke verkorting van de laadtijd voor terugkerende websitebezoekers.

De grote kracht van caching plug-ins is ook hun grootste zwakte. Het is goed mogelijk dat een caching-plugin uw site in eerste instantie trager maakt voor bezoekers die er voor het eerst komen. Want hoe ingewikkelder uw blog of uw pagina is, hoe ingewikkelder en uitgebreider de cache engine moet zijn die uw blog cached. Dit is vooral van belang voor winkels.

Als je een relatief eenvoudige website runt, kunnen minimalistische oplossingen beter zijn dan caching all-rounders. Een van deze magere plugins is bijvoorbeeld Cache Enabler.

Merk op dat caching plug-ins meestal ook het verkleinen en samenvoegen van CSS of JavaScript overnemen. Daarom moet u controleren of uw caching-plugin de plugins voor CSS-optimalisatie niet al overbodig maakt.

Als u server-side caching gebruikt, is het raadzaam de caching-functies van plug-ins zoals Autoptimize te deactiveren, of te testen of ze überhaupt nog prestatievoordelen opleveren.

Conclusie: Veel bewegen met slechts een paar plug-ins

U heeft het al gemerkt tijdens het lezen: Voor de optimalisatie van CSS, afbeeldingen en de optimalisatie van de laadvolgorde zijn er plugins die u veel werk uit handen nemen. Maar niet al het werk. Caching plugins leveren ook snel een merkbaar effect op, maar ze zijn soms erg uitgebreid en bieden veel configuratiemogelijkheden en soms overbodige functies.

In ieder geval, kijk eens goed naar de plug-ins die je gebruikt. Alleen als je weet wat er gebeurt als je bepaalde functies gebruikt, kun je verstandig optimaliseren. De pagina overladen met optimalisatie plugins levert meestal weinig op.

En wanneer u optimaliseert, moet u ervoor zorgen dat u uw succes goed meet. Het maakt niet uit of je met de hand optimaliseert of via een plugin. Gebruik PageSpeed Insights als een eerste referentiepunt om de zwakke punten van uw pagina te identificeren. Meet vervolgens de laadtijd van uw pagina vóór de optimalisatie. Het heeft pas zin om uw pagina stap voor stap te optimaliseren als u de uitgangssituatie hebt vastgesteld. Alleen als u de laadtijd vóór de optimalisatie en na elke optimalisatiestap kent, kunt u bepalen wat de afzonderlijke optimalisatiemaatregelen hebben opgeleverd.

Vond je het artikel leuk?

Met jouw beoordeling help je ons om onze inhoud nog verder te verbeteren.

Laat een reactie achter

Je e-mailadres wordt niet gepubliceerd.