Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Tobias Schüring Laatst bijgewerkt op 21.10.2020
11 Min.
Google PageSpeed Insights Foutmeldingen
Laatst bijgewerkt op 21.10.2020

Google PageSpeed Insights is een geweldige manier om een snel 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. Maar u moet niet slaafs de Google-resultaten volgen. Omdat de PageSpeed foutmeldingen niet altijd nuttig zijn.

De collega Caspar Hübinger heeft enige tijd geleden in een van zijn blogposts, laten we zeggen, zeer duidelijke woorden gevonden voor zijn Google PageSpeed Insights-resultaat. En hij bekritiseert niet alleen het instrument, maar ook het gebruik van het instrument door de gebruikers. Immers, als u niet weet hoe u elke optimaliseringssuggestie moet interpreteren en oplossen, kunt u snel verdwalen in het onzinnige streven naar een score van 100. Dat zou echter onverstandig zijn. Omdat utopisch hoge Google PageSpeed ratings meestal een verspilling van tijd zijn. Nog belangrijker is de optimalisering van de laadtijd.

Vandaag laat ik u zien hoe u de belangrijkste foutmeldingen van Google PageSpeed Insights kunt interpreteren en uw site 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. Omdat we vaak hebben meegemaakt dat gebruikers sterk gefixeerd waren op hun PageSpeed score zonder oog te hebben voor de laadtijd van hun pagina.

Als dit gedeelte je niet interesseert, sla het dan over en leer direct hoe je de "Compress CSS" foutmelding kunt oplossen.

Google PageSpeed foutmeldingen zijn niet altijd correct en belangrijk

U moet nooit alleen vertrouwen op de resultaten of foutmeldingen van Google PageSpeed Insights . Omdat de Google tool niet de belangrijkste parameter van uw site meet: de laadtijd van de pagina. Om dit goed te meten, raad ik Webpagetest.org aan.

Alleen als u bij de optimalisatie van uw site de laadtijd van de pagina vanaf het begin in het achterhoofd houdt, kunt u 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 is dit natuurlijk 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 site optimaliseert. Dit is de enige manier waarop u kunt inschatten 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 hints over optimalisatiemogelijkheden van uw pagina en laat slechts weinig conclusies toe 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 opgenomen. Deze bronnen kunnen echter niet worden gedekt door de caching van uw pagina door de browser. De foutmelding is dus niet van belang voor de gebruikerservaring van uw site, maar wordt veroorzaakt door de logica van het programma 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 parameter.

Maar hoe zit het met mijn Google ranking?

Het voorbeeld van de ontbrekende browser caching laat heel goed zien waarom je je niet moet laten afschrikken door een vermeend slecht PageSpeed resultaat.

Als u bijvoorbeeld Google Maps of Google Analytics op uw site hebt ingesloten, zullen zij de volgende foutmelding genereren:

Typische Google PageSpeed Insights foutmelding: 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 bijgeschreven. Dat wil zeggen, wij weten dat deze factor altijd een negatieve invloed heeft op onze resultaten, dus negeren wij hem gewoon.

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

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

Naar mijn mening, moet je je niet verliezen in de jacht op een 100 score.

Maar nu naar de optimalisatie stappen!

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 goed thuis bent in CSS, kunt u het aantal CSS-bestanden handmatig verminderen en een steno-notatie gebruiken bij het maken ervan. U kunt 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 comfortabele oplossing door middel van CSS minificationPlugins in WordPress . Sommige Plugins maken direct een all-round slag en kunnen niet alleen CSS, maar ook JavaScript en HTML comprimeren en optimaliseren.

Verdere informatie

Voor een gedetailleerde uitleg van de manieren waarop je HTML, CSS en JavaScript kunt verminderen in WordPress , zie dit artikel.

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

De zojuist genoemde Minify-Plugins 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 samenvoegen van CSS bestanden ook heel zinvol. Nu is het anders: want sinds de HTTP/2-standaard bestaat, kunnen browsers meerdere bestanden tegelijk van de webserver laden.

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

Dus voordat u beslist over een Plugin met tientallen functies en configuratiemogelijkheden, moet u goed nadenken of u die überhaupt nodig hebt. Vooral als u zelfverzekerd bent om CSS op uw eigen manier te optimaliseren.

Omdat een extra Plugin uw pagina onder bepaalde omstandigheden trager kan maken. Vooral als de andere functies van de allrounderPlugins hun potentieel niet volledig kunnen ontplooien.

Foutmelding 2: verwijder bronnen die rendering blokkeren

Ook dit bericht bezorgt veel gebruikers het zweetdruppeltje op het voorhoofd, omdat het niet zo eenvoudig te implementeren is en tevens 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 al zeer goed geoptimaliseerd zijn(zoals het geval van Caspar Hübinger laat zien). Toch 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 zal het niet worden weergegeven totdat het juiste CSS commando is geladen. Dit verhoogt de laadtijd van uw pagina, maar wat nog belangrijker is, het beïnvloedt de gebruikerservaring omdat de pagina aanvoelt alsof het 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>

Ook deze optimalisatiemaatregel kan op twee manieren worden uitgevoerd: U kunt de code zelf aanraken en de CSS codes in de header plaatsen, of u kunt een Plugin het werk laten doen. Nogmaals, Plugins zoals Better WordPress Minify zal u hierbij helpen.

Google PageSpeed Insights foutmeldingen - uittreksel van de Plugin Beter WordPress  Minify

De MinifyPlugin laat in de opties bijvoorbeeld zien 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 Plugin Autoptimize, aan de andere kant, gaat er helemaal voor: Hier selecteert u de opties voor alle CSS bestanden die niet van het proces zijn uitgesloten.

De uittreksels van de opties van de Plugins tonen: Zelfs de plugin-variant kan niet worden uitgevoerd zonder een basiskennis van het proces. Je moet je dus ook vertrouwd maken met Plugins .

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 tastbare voordelen op voor de laadtijd.

Hou je mond! Google PageSpeed! Herstel de belangrijkste foutmeldingen

Belang: Veel gebruikers onderschatten de rol van de afbeeldingsgrootte voor de laadtijd van hun pagina. Afbeeldingen zijn 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 miniaturen van de afbeelding tijdens het uploaden. Dus als u niet de originelen op uw homepage gebruikt, maar kleinere versies ervan, d.w.z. thumbnails of featured images, dan moeten die natuurlijk ook geoptimaliseerd worden. Eén afbeelding wordt al snel een aantal bestanden, die ook nog eens een veelvoud aan gegevens met zich meebrengen.

Implementatie: In principe heeft u twee mogelijkheden om uw afbeeldingen te optimaliseren. Ofwel optimaliseert u de beelden vóór de upload ofwel erna of tijdens de upload. Het eerste kunt u doen via online of offline tools, het tweede kunt u doen via de bijbehorende WordPress beeldoptimalisatie plugins.

Als u compressie in uw workflow kunt integreren, is het zinvol om uw afbeeldingen 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. Op die manier bespaart u de extra Plugin en houdt u uw site slank.

De meer comfortabele oplossing is natuurlijk ook hier een Plugin. 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.

Plugins werkt 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 inschakelen

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 betekent: U heeft de afbeeldingen en CSS van uw pagina al zoveel mogelijk gereduceerd. Goed! Maar dat is niet het einde. Omdat je nu een ander compressiemechanisme kunt 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 tijdens het laden van de pagina: 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 al ingesteld op de server, ofwel moet u deze zelf activeren. Als je een RAIDBOXES klant bent, hoef je je nergens zorgen over te maken. Omdat we standaard de bijzonder sterke Brotli compressie actief hebben.

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 de meest irritante 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 de pagina niet opnieuw bij de webserver hoeft op te vragen wanneer u deze opnieuw bezoekt. De pagina is al geladen.

Implementatie: Ofwel heeft uw hoster browser caching al ingeschakeld 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 voorbeeldcode hieronder stelt bijvoorbeeld de browsercache in op één maand, wat betekent 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 cache is alles niets

Goed, je hebt nu de afbeeldingen van je pagina geoptimaliseerd, CSS gereduceerd, gecomprimeerd en in de juiste volgorde gezet, en de browser van je bezoeker 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 opgezet, of u gebruikt een cachingPlugin. Hier zijn er enkele zeer krachtige Plugins, die grote delen van uw pagina cachen en leiden tot een aanzienlijke vermindering van de laadtijd voor terugkerende website bezoekers.

De grote potentie van cachingPlugins is ook zijn grootste zwakte. Het is goed mogelijk dat een cachingPlugin uw site in het begin trager maakt voor bezoekers die er voor het eerst komen. Dit komt omdat hoe ingewikkelder uw blog of site is, hoe ingewikkelder en uitgebreider de caching engine moet zijn die uw blog cached. Dit is vooral van belang voor winkels.

Als je een relatief eenvoudige website hebt, zijn minimalistische oplossingen misschien wel beter dan gigantische caching systemen. Een van deze slanke Plugins is bijvoorbeeld Cache Enabler.

U moet weten dat cachingPlugins meestal ook zorgt voor het verkleinen en samenvoegen van CSS of JavaScript. Daarom moet u controleren of uw cachingPlugin de Plugins voor CSS optimalisatie niet al overbodig maakt.

Als u server-side caching gebruikt, is het raadzaam de caching-functies van Plugins, zoals Autoptimize, uit te schakelen of eenmalig te testen of deze nog een prestatievoordeel opleveren.

Conclusie: Veel bewegen met slechts een paar Plugins

U heeft het al gemerkt tijdens het lezen: Voor de optimalisatie van CSS, afbeeldingen en de optimalisatie van de laadvolgorde, is er Plugins, dat u veel werk zal besparen. Maar niet al het werk. Caching-Plugins leveren ook snel een merkbaar effect op, maar zijn deels zeer uitgebreid en bieden veel configuratiemogelijkheden en deels redundante functies.

In ieder geval, kijk eens naar Plugins, die je gebruikt. Alleen als je weet wat er gebeurt als je bepaalde functies gebruikt, kun je ook verstandig optimaliseren. De pagina overladen met optimalisatiePlugins levert weinig op.

En u moet ervoor zorgen dat u uw successen goed meet wanneer u optimaliseert. Het maakt niet uit of je optimaliseert met de hand of via Plugin . Gebruik PageSpeed Insights als een eerste referentiepunt om de zwakke punten van uw pagina te identificeren. Meet dan de laadtijd van uw pagina vóór de optimalisatie. Pas na deze opname van de uitgangssituatie heeft het echt zin om uw pagina stap voor stap te optimaliseren. Want alleen als u de laadtijd vóór de optimalisatie en na elke optimalisatiestap kent, kunt u ook bepalen wat de afzonderlijke optimalisatiemaatregelen hebben opgeleverd.

Als systeembeheerder waakt Tobias over onze infrastructuur en vindt hij alle mogelijke manieren om de prestaties van onze servers te optimaliseren. Door zijn onvermoeibare inzet is hij vaak 's nachts bij Slack te vinden.

Reacties op dit artikel

Laat een opmerking achter

Jouw e-mailadres zal niet worden gepubliceerd. Verplichte velden zijn met een * gemarkeerd.