PageSpeed Insights: verbeter je sitespeed met deze ultieme gids

27 februari 2018

Update 15 november 2018: Google PageSpeed Insights heeft een grote update gehad! Benieuwd naar de veranderingen? In dit blog zijn de grootste wijzigingen op een rij gezet.

Wil je weten hoe je de laadtijd van jouw website verbetert? Dan ben je op de juiste plek. In deze uitgebreide gids leer je alles over de punten waarop Google PageSpeed Insights je website beoordeelt. Daarnaast geven we je voor elk punt concrete actiepunten om je website sneller te maken. Laten we beginnen!

Leestijd: 25 minuten

Heb je nu geen tijd om het blog te lezen? Download dan gratis het E-book!

 

Google PageSpeed Insights: de ultieme gids

Inhoud (PageSpeed Insights: dé ultieme gids)

Hoofdstuk 1: Hoe belangrijk is sitespeed?

Sitespeed is een cruciale factor als het gaat om het succes van een website. Als online marketing bureau weten we maar al te goed dat een snelle website draagt bij aan hogere SEO rankings, hogere conversieratio’s, lagere bouncepercentages, een langere bezoekduur en een betere gebruikerservaring.

PageSpeed Insights (PSI) is een online tool van Google die je webpagina analyseert en suggesties geeft om die webpagina sneller te maken op alle apparaten. De tool zal je webpagina een optimalisatie score geven op een schaal van 0-100.

Belangrijk om te onthouden is dat een score van 100/100 niet het doel is!

Belangrijk om te onthouden is dat een score van 100/100 niet het doel is! Ten eerste omdat het voor de meeste webpagina’s niet haalbaar is. Gaandeweg het lezen van dit artikel zal je merken dat niet alle suggesties een optie zijn voor jouw webpagina, omdat de voordelen niet opwegen tegen de nadelen. Ten tweede omdat een pagina met een score van 100 geen hogere SEO ranking krijgt dan een pagina met een score van 80.

Daarnaast raden we je aan om je niet blind te staren op één tool. Raadpleeg naast PageSpeed Insights ook een aantal andere tools, zoals GTMetrix, Pingdom, Cloudinary of WebPagetest. Elke tool heeft zijn eigen voordelen en analyseert je website op haar eigen manier. Belangrijk is dat het gebruik van deze tools je inzicht geeft in de punten waar je website nog beter en sneller kan, zonder dat dit ten koste gaat van de kwaliteit.

Zoals de titel alleen al aangeeft, in dit artikel kijken we met name naar de tool PageSpeed Insights. Dat brengt ons bij het volgende hoofdstuk:

Hoofdstuk 2: PageSpeed Insights: hoe werkt het?

PageSpeed Insights bestaat uit vier onderdelen, namelijk: de Snelheidsscore, de Optimalisatie Score, de Paginastatiestieken en de Optimalisatiesuggesties.

Snelheidsscore

PSI gebruikt gegevens uit het Chrome User Experience Report (CrUX) om te meten hoe snel een pagina laadt in de echte wereld.

Het rapport toont (voor zowel mobiel als desktop) drie statistieken: First Contentful Paint (de tijd die het duurt voordat een browser de eerste content van een webpagina weergeeft), DOMContentLoaded (de tijd die het duurt voordat een browser alle bestanden van een webpagina heeft geladen) en een snelheidsscore.

PageSpeed Insights: FCP en DCL

Belangrijk! De Snelheidsscore wordt niet voor alle webpagina’s weergegeven. Simpelweg omdat de website onvoldoende verkeer heeft om een betrouwbare score te berekenen.

PageSpeed Insights - Snelheidsscore

Optimalisatie Score

PSI bekijkt of de webpagina de best practices heeft toegepast om de prestaties te optimaliseren en geeft de pagina een score van 0-100. In tegenstelling tot de Snelheidsscore wordt de Optimalisatie Score niet berekend op basis van gegevens uit de echte wereld. De Optimalisatie Score wordt berekend op basis van negen best practices. Welke dat zijn, dat lees je in hoofdstuk 3.

PageSpeed Insights: Optimalisatiescore

De score is gecategoriseerd als Goed, Middelmatig of Slecht:

Paginastatieken

In het gedeelte Paginastatistieken worden twee statistieken berekend: het aantal uitwisselingen die nodig zijn om je webpagina weer te geven en de omvang van jouw webpagina.

Het voordeel hiervan is dat je jouw statistieken kan vergelijken met gemiddelden van alle webpagina’s.

De paginastatistieken is het gedeelte van de tool die we het minst gebruiken, omdat het je geen actiematige inzichten geeft om je webpagina te verbeteren.

Optimalisatiesuggesties

PageSpeed Insights kent negen best practices op basis waarvan ze suggesties geven. Als je website een maximale score heeft, zal je deze niet zien. Scoort je website middelmatig of slecht, dan zal je de suggesties wel zien. In het volgende hoofdstuk gaan we kijken welke suggesties er zijn en hoe je deze toe kan passen op jouw website.

Hoofdstuk 3: PageSpeed Insights: waar wordt een website op beoordeeld?

Voor het berekenen van de Optimalisatie Score analyseert PSI je webpagina op negen best practices. Voor elke best practice geldt dat er meerdere manieren zijn om ze toe te passen.

Onthoud dat niet alle manieren werken voor alle websites. De gouden regel is dat je altijd moet testen welke manier het beste werkt voor jouw website en je nooit iets klakkeloos moet overnemen!!

In dit artikel bevelen we ook een aantal plugins aan. Zorg alleen wel dat je het gebruik van plugins zoveel mogelijk beperkt. Gebruik alleen de meest noodzakelijke plugins. Waarom? Omdat overmatig gebruik van plugins een negatief effect kan hebben op je laadtijd.

Welke best practices kent PageSpeed Insights?

Elke best practice wordt stuk voor stuk uitgelegd en we geven je handvatten hoe je elke best practice kan toepassen op jouw website.

We beginnen bij een best practice die door velen wordt onderschat, namelijk: Afbeeldingen optimaliseren.

Hoofdstuk 4: Afbeeldingen optimaliseren

48% van de totale omvang van een gemiddelde webpagina bestaat uit afbeeldingen, volgens HTTP Archive. Aangezien je de browsers en zoekmachines te vriend wil houden – en de gemiddelde bezoeker ook niet afknapt op een snelle website – is dit de meest logische plek om te starten met optimaliseren.

1 FEB 2018

PageSpeed Insights toont de aanbeveling ‘Afbeeldingen optimaliseren’ wanneer er afbeeldingen worden gevonden waarvan de bestandsgrootte kan worden verkleind, zonder dat dit impact heeft op de visuele kwaliteit.

Er zijn diverse manieren om je afbeeldingen te optimaliseren, zowel handmatig, in bulk of geheel automatisch. De kunst is om de voor jou meest optimale balans te vinden tussen kwaliteit en omvang van je afbeeldingen.

Voordelen van het optimaliseren van afbeeldingen

Voordat we ingaan op de diverse methoden geven we antwoord op de vraag “wat heb je er aan als je afbeeldingen optimaliseert voor het web”?

Hieronder een overzicht van de voordelen.

Om de proef op de som te nemen hebben we de snelheid van een van onze eigen pagina’s getest met Pingdom. Vervolgens hebben we de afbeeldingen geoptimaliseerd en gekeken wat dit voor effect heeft op de snelheid.

Hieronder zie je het resultaat:

pingdom facebook voor optimalisatie Resultaat voor optimalisatie Pingdom Tools Rocket Digital 2 Resultaat na optimalisatie

Zoals je ziet is de omvang van de pagina met ruim 36% afgenomen en is de snelheid met 10% gestegen. En dat binnen 5 minuten. Niet slecht!

Wil je weten waar je op moet letten bij het gebruik én het optimaliseren van afbeeldingen? Lees dan verder 😉

Hoe optimaliseer je afbeeldingen?

1. Kies de juiste bestandsindeling

Bij de keuze voor de juiste bestandsindeling houd je rekening met de vereiste functionaliteit, de gewenste visuele kwaliteit en met de omvang.

We bespreken vier populaire bestandsindelingen: JPEG, SVG, PNG en GIF. De bestandsindeling WebP en JPEG XR komen niet aan bod, omdat deze twee niet door alle browsers worden ondersteund.

JPEG – de meest gebruikte bestandsindeling voor afbeeldingen. Met de compressie mogelijkheden die JPEG kent, kan je een goede balans vinden tussen kwaliteit en omvang. JPEG kent drie compressie methodes: Baseline, Progressive en Lossless. Lossless compressie is een compressiemethode waarbij er geen kwaliteitsverlies optreedt. Het verschil tussen een Baseline JPEG en een Progressive JPEG zit hem in de manier van laden. Een Baseline JPEG (de standaard methode bij de meeste tools) laad van boven naar beneden. Een Progressive JPEG laad in zijn geheel, van lage resolutie (blurry) naar hoge resolutie.

SVG (Scalable Vector Images) – vector afbeeldingen zijn ideaal voor eenvoudige afbeeldingen (logo’s, pictogrammen, tekst), omdat ze niet afhankelijk zijn van resolutie en schaal. Het grote voordeel hiervan is dat ze er op elk scherm en resolutie haarscherp uitzien. Vector afbeeldingen zijn niet geschikt voor complexe afbeeldingen, zoals foto’s.

PNG – wil je de fijnste details behouden met de hoogste resolutie? Kies dan voor PNG. In tegenstelling tot JPEG staat PNG transparante waarden toe en een type compressie zonder kwaliteitsverlies. PNG afbeeldingen zijn van hoge kwaliteit, maar vaak ook aanzienlijk groter in omvang dan JPEG bestanden. Is omvang voor jou net zo belangrijk als het visuele effect? Kies dan voor JPEG en niet voor PNG. Moet een afbeelding vooral visueel sterk zijn en is omvang voor jou geen issue? Kies dan voor PNG.

GIF – wil je gebruik maken van animatie? Kies dan voor GIF. Aangezien GIF slechts 256 kleuren gebruikt, is het geen goede keuze bij statische afbeeldingen.

2. Schaal je afbeelding naar het juiste formaat

Het is belangrijk om niet meer pixels aan te bieden dan nodig is om de afbeelding op de gewenste grootte te laten zien in de browser. Veel webpagina’s slagen hier niet in. Als je WordPress gebruikt kun je zelf de maximale afmetingen van alle afbeeldingen instellen. Ga hiervoor naar Instellingen > Media. Zorg dat de maximale breedte van je afbeeldingen dicht bij de maximale breedte van je website ligt.

WordPress Media Instellingen

WordPress zal thumbnails creëren op basis van je instellingen en het origineel laten staan in je mediabibliotheek. Wil je de originele bestanden verwijderen? Gebruik dan een plugin, bijvoorbeeld Imsanity.

3. Pas de resolutie aan

Foto’s die je met een digitale camera maakt, hebben vaak een hoge resolutie. Wil je de foto’s afdrukken, dan is een resolutie van 300 Dots Per Inch (DPI) prima. Wil je de foto’s plaatsen op je website, dan is 300 DPI veel te veel. Gebruik voor het web liever afbeeldingen met 72 of 96 DPI. Een afbeelding van 1,3 MB verklein je hiermee al naar 142 KB.

4. Kies het meest geschikte type datacompressie

Er zijn twee typen datacompressie: exact omkeerbaar (lossless compressie) en niet-exact omkeerbaar (lossy compressie). Welk type je kiest is afhankelijk van het karakter van je website. Is het belangrijk dat de afbeeldingen op je website van hoge kwaliteit zijn, dan kies je voor lossless compressie. Moet de website kneiter snel laden, dan kies je voor lossy compressie.

Lossless compressie is een type datacompressie dat de grootte van een bestand verkleind zonder kwaliteitsverlies. Dit kan op verschillende manieren. Bijvoorbeeld door een index te maken van alle pixels en dezelfde kleuren-pixels te groeperen. Een andere manier is door onnodige meta data van JPEG bestanden te verwijderen. Tools die lossless compressie gebruiken zijn Compressor (Web), Kraken Image Optimizer (Web), FILEminimizer (Windows) en Photo Size Optimizer (Mac).

Lossy compressie is een type datacompressie waarmee afbeeldingen een deel van hun kwaliteit verliezen. Het voordeel is dat je de bestandsgrootte enorm kan verkleinen. De kunst is om een balans te vinden tussen bestandsgrootte en de kwaliteit van je afbeelding. Tools die lossy compressie gebruiken zijn Photoshop (Windows, Mac), Compressor (Web), ImageOptim (Web) en Kraken Image Optimizer (Web).

5. Verwijder overbodige metadata van afbeeldingen

Veel afbeeldingen bevatten onnodige metadata: geografische informatie, datum en tijd en camera-instellingen. Gebruik de juiste tools om deze informatie te verwijderen. Dat kan bijvoorbeeld met het gratis programma Easy Exif Delete. Dit geldt ook voor SVG bestanden. Om dit op te lossen kan je o.a. een GZIP compressie gebruiken.

6. Maak gebruik van responsieve afbeeldingen

Door gebruik te maken van responsieve afbeeldingen bespaar je een hoop bandbreedte en zal je webpagina sneller laden. Responsieve afbeeldingen worden automatisch aangepast aan de grootte van het scherm.

Responsieve afbeelding

Heb je een WordPress website? Alle WordPress websites met een versie van 4.4 of hoger maken automatisch gebruik van responsieve afbeeldingen. WordPress zal van elke afbeelding automatisch meerdere formaten toevoegen aan de mediabibliotheek. Browsers kunnen zelf bepalen wat de meest geschikte afbeelding is en de overige negeren. Op die manier bespaar je een hoop bandbreedte en zal je website sneller laden.

Gebruik je een ander CMS systeem voor je website? Neem dan contact op met je webbouwer en bespreek de mogelijkheden van responsieve afbeeldingen. Wil je precies weten hoe je gebruik kan maken van responsieve afbeeldingen? Volg dan de gratis cursus van UDACITY.

Afbeeldingen optimaliseren: de beste tools, programma’s en plugins

Er is gelukkig geen schaarste aan tools, programma’s of plugins die je kan gebruiken bij het optimaliseren van afbeeldingen. Toets op Google maar eens “image optimization tool” in en je krijgt meer dan 300 miljoen resultaten. Sommige zijn gratis, anderen betaald.

Belangrijk is wel om je af te vragen wat je precies nodig hebt. Wil je een tool die het werk voor je doet, of wil je zelf aan de knoppen zitten? Een andere mogelijkheid is om een tool te kiezen die het hele proces voor je automatiseert. Elke afbeelding zal dan automatisch worden geoptimaliseerd op een combinatie van de beste kwaliteit, omvang en format geschikt voor elke browser en apparaat.

We hebben een aantal opties voor je op een rij gezet, verdeeld over drie categorieën:

Ik zoek een tool waarbij ik zelf aan de knoppen zit

Aah kijk, je neemt het zekere voor het onzekere en gaat zelf de optimale balans vinden tussen kwaliteit en omvang van je afbeeldingen. Of dat óf je hebt een hekel aan plugins. Wat de reden ook is, er zijn legio tools die je gaan helpen.

Hieronder tonen we een selectie van deze tools:

Ik zoek een tool die het meeste werk voor me gaat doen.

Je zoekt een tool die de balans tussen kwaliteit en omvang grotendeels zelf bepaalt? Toch wil je de eindcontrole behouden en zelf de afbeeldingen plaatsen op je website? Kijk dan naar een van de onderstaande tools:

Ik zoek een tool die alle afbeeldingen automatisch optimaliseert.

Met deze tools hoef je niet handmatig afbeeldingen te comprimeren of bij te snijden. De tools in dit overzicht optimaliseren alle afbeeldingen automatisch zodra je ze upload. Sommige tools kunnen ook de afbeeldingen die al op je website staan optimaliseren.

Hoe controleer je of afbeeldingen geoptimaliseerd moeten worden?

Je bent klaar om aan de slag te gaan en je wil weten waar je moet beginnen? Als je geen plugin gebruikt die alle afbeeldingen voor je optimaliseert is het handig om te weten waar de meeste winst te behalen valt. De meest logische keuze is om te starten met de webpagina’s met de meeste bezoekers. Er zijn voldoende tools die de afbeeldingen op een pagina beoordelen en aantonen hoeveel KB je kan besparen door ze te optimaliseren.

Vier voorbeelden zijn PageSpeed Insights, Cloudinary, Pingdom en WebPagetest. Bij PageSpeed Insights en Cloudinary kan je de geoptimaliseerde variant van je afbeeldingen meteen downloaden. Handig!

Zoek je een tool die alle afbeeldingen op je website crawlt? Probeer dan eens Screaming Frog. Screaming Frog heeft een gratis en een betaalde versie. Met de gratis versie kan je 500 URL’s crawlen. Onder de tab Images kan je alle afbeeldingen rangschikken op grootte. De grootte wordt aangegeven in bytes. Deel het aantal door 1.024 om de waarde in KB te zien.

Screaming Frog

Hoofdstuk 5: Omleidingen op bestemmingspagina vermijden

De volgende aanbeveling van PageSpeed Insights is dat je het gebruik van redirect chains moet vermijden. De aanbeveling ‘omleidingen op bestemmingspagina vermijden’ wordt getoond zodra GPI meer dan één redirect detecteert van de gegeven URL naar de landingspagina.

Dit noemen we een redirect chain; een serie van omleidingen die je van de ene URL naar de andere stuurt. Naast het feit dat elke redirect de laadtijd van een pagina vertraagt, zijn de gevolgen voor SEO niet mis; bij elke stap in de chain verlies je 10% aan autoriteit.

Hieronder twee voorbeelden van redirect chains:

Hoe breng je redirect chains in kaart? Een van de meest eenvoudige manieren om dit te doen voor grote websites is met de betaalde versie van Screaming Frog (licentie kost £149,- per jaar). Vink onder de geavanceerde instellingen van de Spider (Configuration → Spider) ‘Always follow redirects’ aan en start met het crawlen van de website. Zodra de resultaten binnen zijn ga je naar Reports → Redirect Chains om te zien welke redirect chains er aanwezig zijn op je website. En klaar is Kees! Nu je weet welke redirect chains er zijn en kan je – eventueel samen met de webbouwer – bepalen hoe je dit gaat oplossen.

Hoofdstuk 6: Comprimeren inschakelen

De meeste mensen zijn bekend met GZIP compressie. Gzip compressie is een methode om bestanden te verkleinen, zodat deze sneller via een netwerk kunnen worden verzonden.

GZIP compressie kan de omvang van je pagina tot 90% verkleinen. Dit heeft als gevolg dat je website sneller door een browser kan worden opgehaald, en sneller wordt geladen. Gecomprimeerde bestanden zijn te herkennen aan bijvoorbeeld de extensie .zip en .rar.

PageSpeed Insights toont de aanbeveling ‘Comprimeren inschakelen’ wanneer het een comprimeerbare bron op je webpagina vindt zonder GZIP compressie. Krijg je deze melding niet, dan staat GZIP compressie voor jouw website waarschijnlijk ingeschakeld. Wil je het zeker weten? Ga dan naar checkgzipcompression.com en voer hier de URL van je website in.

Krijg je de melding ‘It’s GZIP enabled’? Dan is GZIP ingeschakeld en werkt het. Zie je ‘GZIP is not enabled’? Dan is GZIP niet ingeschakeld voor jouw website. Steek de handen maar uit de mouwen, want er is werk aan de winkel.

GZIP compressie inschakelen

Er zijn drie manieren waarop je GZIP compressie in kan schakelen:

  1. GZIP compressie inschakelen via het Service Panel. Dit is mogelijk bij diverse hosting partijen. Raadpleeg je hostingpartij om te controleren of dit voor jou mogelijk is.
  2. GZIP compressie inschakelen in het configuratiebestand. De twee meest bekende open source servers ter wereld zijn Apache en Nginx. Hieronder leggen we voor beide uit hoe je GZIP compressie inschakelt.
  3. GZIP compressie inschakelen met behulp van een een plugin. Heb je een WordPress website dan kan je gebruik maken van de plugin W3 Total Cache.

GZIP compressie inschakelen voor Apache

Voor een website die gebruik maakt van een Apache server comprimeren we bestanden met de module Deflate. Hiervoor dien je het .htaccess bestand aan te passen.

Open het .htaccess bestand en voeg de volgende code toe.


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

GZIP compressie inschakelen voor Nginx

Voor een website met een Nginx server comprimeren we bestanden met de module ngx_http_gzip_module. Open het configuratiebestand en voeg hier de volgende code aan toe:


gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types image/svg+xml text/plain text/html text/xml text/css text/javascript application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/x-font-ttf application/vnd.ms-fontobject font/opentype font/ttf font/eot font/otf application/font-ttf;

Hoofdstuk 7: Reactietijd van server beperken

De reactietijd van je server wordt meestal berekend door de TTFB (Time To First Byte) te berekenen. Hiermee meet je hoe lang het duurt voordat de browser de eerste byte ontvangt van de server.

De aanbeveling ‘Reactietijd van server beperken’ wordt getoond wanneer PageSpeed ​​Insights detecteert dat de reactietijd van je server hoger dan 200 ms is.

Er is geen magische methode die de reactietijd van de server voor elke website kan verlagen tot minder dan 200 ms. Daarvoor zijn er teveel verschillende factoren die hier invloed op kunnen hebben.

Toch zijn er een aantal factoren die vaker voorkomen dan andere:

Hoofdstuk 8: Gebruikmaken van browsercaching

Elke keer als je een webpagina voor de eerste keer ziet, moet een browser diverse bestanden laden, zoals het logo, CSS, HTML, JavaScript, etc. Browsers kunnen een hoop van deze bestanden door middel van browsercaching opslaan in het lokale geheugen. Veel van de bestanden die worden opgeslagen in het cachegeheugen, worden vaak op meerdere pagina’s van een website gebruikt. Alle volgende webpagina’s die je bekijkt worden sneller geladen, omdat de browser veel van deze bestanden niet opnieuw hoeft te laden. Dit is het grote voordeel van browsercaching. Een ander voordeel is dat de serverload lager is.

PageSpeed Insights toont de aanbeveling “Gebruikmaken van browsercaching” als de server geen of onvolledige browsercaching instructies stuurt naar de browser óf dat de bronnen voor slechts een korte tijd in het cachegeheugen opgeslagen kunnen worden.

Hoe kan je browsercaching inschakelen?

Browsercaching kan je inschakelen door een code toe te voegen aan het .htaccess bestand. De twee bekendste methoden om browsercaching in te schakelen zijn Expires header en Cache-Control header.

Expires header

De module Expires header geeft een instructie aan de browser hoe lang ze het bestand moeten “onthouden”. Dit kan zowel relatief (bepaalde hoeveelheid sec vanaf nu) als absoluut (exacte datum) worden ingesteld. Zodra de cache verlopen is wordt het bestand als “expired” bestempeld en moet er een nieuwe versie van de server gehaald worden.

!Belangrijk! Het verkeerd aanpassen van het .htaccess bestand kan als gevolg hebben dat je website (gedeeltelijk) niet meer werkt. Als je niet zeker bent van je zaak, raadpleeg dan een specialist!

Heb je een Apache server? Voeg dan onderstaande code toe aan het .htaccess bestand. De code zou bovenaan moeten worden geplaatst.

ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A604800
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600

A2592000 betekent 30 dagen in de toekomst (60 * 60 * 24 * 30 = 2592000).

Kijk per bestandstype of de cache tijd overeenkomt met de frequentie waarin dit type bestand op jouw website verandert. Wijkt dit enorm af, pas dan de cache tijd aan. Op die manier voorkom je dat een bezoeker telkens de oude bestanden ziet, omdat deze nog in het cachegeheugen zit.

Cache-Control

De module Cache-Control header geeft je in vergelijking met de module Expires header meer controle. Je kan instructies geven wie wat mag cachen en voor welke periode. Zo kan je bepaalde bestanden op “private” zetten. Deze bestanden kunnen alleen door de browser worden gecached en niet door andere proxies, zoals bijvoorbeeld een CDN.

Ben je benieuwd naar welke mogelijkheden Cache-Control headers nog meer te bieden heeft? Lees dan dit blogartikel.

!Belangrijk! Het verkeerd aanpassen van het .htaccess bestand kan als gevolg hebben dat je website (gedeeltelijk) niet meer werkt. Als je niet zeker bent van je zaak, raadpleeg dan een specialist!

Heb je een Apache server? Voeg dan onderstaande code toe aan het .htaccess bestand.


<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

Browser caching en Google Analytics

Je verwacht het waarschijnlijk niet, maar voor het gebruik van Google Analytics krijg je ook de melding “maak gebruik van browsercaching”. Dit komt omdat Google Analytics een zeer korte cache tijd heeft van twee uur (zie foto). De exacte reden is hiervan niet bekend. Waarschijnlijk doet Google dit, zodat elke wijziging die ze in het script doorvoeren direct beschikbaar is voor alle gebruikers.

Browser caching Google Analytics

Een manier om dit op te lossen is door het Google Analytics script op je eigen server te gaan hosten. Er zijn twee manieren om dit te bereiken. Je kan het zelf doen met behulp van dit blog. Als je een WordPress website hebt kan je gebruik maken van de CAOS plugin.

Browser caching van derden

Naast het Google Analytics script is de kans groot dat je meerdere scripts van derden op je website staan. Denk hierbij aan Hotjar, Optimizely, Facebook, Twitter, Bing DoubleClick, etc. Voor veel van deze scripts zal je de melding “Maak gebruik van browsercaching” krijgen. Dit omdat ze – net als het Analytics script – een zeer korte cache tijd hebben.

Het is helaas niet mogelijk om deze scripts op je eigen server te hosten, waardoor je ook geen invloed hebt op de cache tijd van de scripts. Belangrijk is om te realiseren dat een 100/100 score niet het doel is en je deze scripts prima kan laten staan. Veel belangrijker is dat je weet waarom je deze aanbeveling niet op kan lossen.

!Belangrijk! De cookiewetgeving gaat met de komst van de nieuwe Europese privacywet flink op de schop. Wil je weten wat er vanaf 25 mei 2018 gaat veranderen? Bijvoorbeeld welke cookies mag je straks niet plaatsen zonder toestemming? Lees dan ons blog ‘Wat verandert er door de nieuwe Europese cookiewet in 2018?’

Hoofdstuk 9: Bronnen minimaliseren (HTML, CSS en JavaScript)

Telkens wanneer je een website voor het eerst bezoekt moet een browser veel bestanden laden, zoals HTML, CSS, JavaScript, etc. Hoe schoner de code van deze bestanden, hoe sneller de website wordt geladen.

Het probleem hier is dat deze code wordt geschreven zodat mensen het kunnen lezen. Codes bevatten hierdoor veel onnodige tekens (spaties, opmerkingen, ongebruikte code, etc.) die browsers niet nodig hebben om de code te lezen.

De aanbeveling “bronnen minimaliseren” wordt getoond wanneer PageSpeed Insights een bestand vindt dat kleiner gemaakt kan worden door middel van ‘minification’.

Minification is het verwijderen van onnodige en overtollige code, zonder dat dit effect heeft op hoe een browser de code verwerkt. Hieronder een voorbeeld:

Voor minifycation:


/* normalize selectors */
h1::before, h1:before {
/* reduce shorthand even further */
margin: 10px 20px 10px 20px;
/* reduce color values */
color: #ff0000;
/* remove duplicated properties */
font-weight: 400;
font-weight: 400;
/* reduce position values */
background-position: bottom right;
/* normalize wrapping quotes */
quotes: '«' "»";
/* reduce gradient parameters */
background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
/* replace initial values */
min-width: initial;
}
/* correct invalid placement */
@charset "utf-8";

Na minification:


@charset "utf-8";h1:before{margin:10px 20px;color:red;font-weight:400;background-position:100% 100%;quotes:"«" "»";background:linear-gradient(180deg,#ffe500,#ffe500 50%,#121 0,#121);min-width:0}

Origineel (gzip): 325 B
Minified (gzip): 177 B
Verschil: 148 B
Procentueel: 54.46%

Minification Tools

Er zijn diverse tools die HTML, CSS of JavaScript bestanden kunnen minifyen:

Hoofdstuk 10: Optimaliseer de CSS-weergave

CSS, oftewel Cascading Style Sheets, is bedoeld voor de opmaak en vormgeving van je website. Zowel CSS als HTML worden door browsers standaard behandeld als een weergaveblokkerende bron. Dit betekent dat de browser wacht met het weergeven van de verwerkte inhoud totdat de CSS en HTML bestanden van de huidige webpagina zijn geladen.

Hieronder zie je wat er gebeurd als een browser de homepagina van de New York Times zou weergeven zonder een weergaveblokkering op CSS.

New York Times met CSS

New York Times met CSS

New York Times zonder CSS

New York Times zonder CSS

PageSpeed Insights zal de aanbeveling “Optimaliseer de CSS-weergave” tonen wanneer een CSS bestand het weergeven van de eerste pixels van een pagina blokkeert.

Om dit op te lossen ga je het kritieke weergavepad optimaliseren. Het kritieke weergavepad is de manier waarop HTML, CSS en JavScript door de browsers wordt verwerkt om pixels op een scherm weer te geven. In de afbeelding hieronder zie je het resultaat van een kritieke weergavepad dat is geoptimaliseerd en een kritieke weergavepad die niet is geoptimaliseerd.

Kritieke weergavepad

Een manier om het kritieke weergavepad te optimaliseren is door CSS inline te plaatsen. CSS inline plaatsen betekent simpelweg dat je CSS verwerkt in je HTML in plaats van in een extern CSS bestand.

Het voordeel is dat een browser minder netwerkomleidingen (roundtrips) hoeft te doen voordat het je webpagina kan weergeven. Het nadeel is dat je CSS niet wordt gecached. Bij kleine CSS bestanden is dit niet erg, omdat dit weinig effect heeft op de laadtijd van een webpagina. Het inline plaatsen van grote en complexe CSS bestanden heeft wel een averechts effect op de laadtijd van je webpagina’s. Het is daarom aan te raden om enkel kleine CSS bestanden inline te plaatsen.

Google raadt aan om kritieke CSS inline in te plaatsen:

“Voor de beste prestatie kunt u overwegen om kritieke CSS direct inline in het HTML-document te plaatsen. Hierdoor worden extra roundtrips in het kritieke pad geëlimineerd. Als dit op een goede manier wordt gedaan, kan dit worden gebruikt om een kritieke padlengte van één roundtrip te leveren waarbij alleen de HTML een blokkerende bron is”

Er zijn meerdere methoden om CSS inline te plaatsen.

Hieronder twee voorbeelden:

Hoofdstuk 11: Prioriteit geven aan zichtbare content

Zichtbare content, oftewel content boven-de-vouw, is alle content op een scherm dat zichtbaar is zonder dat een gebruiker hoeft te scrollen. Gebruikers houden van websites die snel content laten zien en Google weet dit ook.

Zichtbare content

PageSpeed Insights toont de aanbeveling “Prioriteren van zichtbare content” wanneer je pagina extra roundtrips vereist om content boven de vouw weer te geven.

Om dit op te lossen moeten we de data (HTML, CSS, afbeeldingen, JavaScript) die is vereist voor het weergeven van content boven de vouw beperken. Er zijn twee strategieën om dit te bereiken:

Structureer je HTML en zorg dat de kritieke boven-de-vouw content als eerst wordt weergegeven.

Als bezoeker van een pagina wil je de belangrijkste content van een pagina eerder zien dan bijvoorbeeld de third-party widgets of advertenties. Zorg ervoor dat de pagina zo is opgebouwd dat de belangrijkste content als eerste wordt weergegeven.

Volg onderstaande tips om dit te bereiken:

Beperk de hoeveelheid data die nodig is om een pagina weer te geven.

Zodra je HTML een goede structuur heeft om zichtbare content als eerst weer te geven, is het belangrijk dat je de data die nodig is om een pagina weer te geven beperkt.

Dit kan op de volgende manieren:

Hoofdstuk 12: JavaScript in content boven de vouw die het weergeven blokkeren, verwijderen

Voordat een browser de content boven-de-vouw weer kan geven, moet het de benodigde CSS, HTML, afbeeldingen en JavaScript bestanden downloaden. Bij een niet geoptimaliseerde webpagina zal een browser de CSS en JavaScript bestanden van de footer moeten downloaden voordat het de content boven-de-vouw kan weergeven.

Waarom zou een gebruiker hierop moeten wachten, terwijl je niet eens weet of de gebruiker geïnteresseerd is in jouw footer?

De aanbeveling “JavaScript in content boven de vouw die het weergeven blokkeren, verwijderen” wordt getoond wanneer PageSpeed Insights ontdekt dat geen van de content boven de vouw op je pagina kan worden weergegeven zonder te wachten totdat een (of meerdere) JavaScript bron(nen) zijn geladen.

Om dit op te lossen kan je het volgende doen:

That’s a wrap

We hebben veel tijd en energie in deze gids gestoken en we hopen dat we je voldoende input hebben gegeven om jouw website sneller te gaan maken.

Voordat je de handen uit de mouwen gaat steken, onthoud dit:

Veel succes en plezier bij het verbeteren en sneller maken van jouw website!

Vond je dit interessant?

Schrijf je in voor onze nieuwsflits en ontvang maandelijks een update met onze laatste blogs en updates!

volg ons op

Ready for launch?
Let’s talk.

Contact

Contact
info@rocketdigital.nl
(050) 700 15 35

Kantoor
Winschoterdiep 50
9723 AB Groningen

KvK: 66840678
BTW: NL 8567.19.845.B.01