Alles over browser caching! Ons XXL-artikel over het verhogen van je pagespeed

Dankzij browser caching hoeven bestanden niet steeds opnieuw te worden gedownload wanneer een website wordt opgeroepen, maar worden ze opgeslagen in de browser.

 

Gebruikers profiteren van het feit dat de wachttijd tot een website volledig geladen is, korter is. De kortere laadtijd van pagina's heeft ook voordelen voor websitebeheerders: Dankzij de hogere paginasnelheid (laadsnelheid van de pagina) wordt de ranking in zoekmachines positief beïnvloed.

 

Alles wat je moet weten over browser caching en hoe je het correct gebruikt, lees je in onze blogpost!

 

Wat is de browsercache?

De browsercache is de cache van een webbrowser waarin kopieën van eerder geraadpleegde bronnen (bijv. afbeeldingen, JavaScript-bestanden, video's) worden opgeslagen.

 

Als een pagina op internet al een keer is bezocht en sommige bronnen zijn opgeslagen in de cache van de browser, wordt de pagina bij het tweede bezoek sneller geladen. De reden hiervoor is dat de gegevens niet opnieuw hoeven te worden gedownload, maar kunnen worden opgehaald uit de cache.

 

Je kunt je het cachingproces van de browser als volgt voorstellen :

 

• Wanneer je een bepaalde pagina op het internet voor het eerst bezoekt, moeten alle elementen op deze pagina worden gedownload. Het bezoeken van een website gaat dus altijd gepaard met het downloaden van gegevens.
• Sommige elementen op websites veranderen regelmatig, andere zijn statisch. De statische elementen van websites zijn geschikt voor de cache van de browser. Ze worden opgeslagen in de cache van je browser.
• De volgende keer dat de pagina wordt opgeroepen, gebruikt de browser de bronnen die in de cache zijn opgeslagen. Hierdoor hoeft hij minder gegevens op te vragen bij de server en hoeft de server minder gegevens te versturen.

 

Het concept van caching is wijdverspreid. Het wordt bijvoorbeeld ook gebruikt door proxyservers in grotere computernetwerken . Als er een groot aantal deelnemers in het netwerk is, zorgt de proxyserver ervoor dat de bronnen uit de cache naar de gebruikers worden gestuurd. Dit betekent dat het verzoek van de client niet naar de server hoeft te worden doorgestuurd en dat het internet niet hoeft te worden doorkruist om de bronnen op te halen.

 

Alleen al de definitie van de browsercache onthult het grote voordeel ervan: het optimaliseert de laadsnelheid. Omdat de communicatie met de server korter is en bronnen direct uit het geheugen kunnen worden opgehaald, kunnen ze sneller beschikbaar worden gesteld.

 

Voordeel: snelheid

Het voordeel van browser caching is de optimalisatie van de laadsnelheid. Als SEO-bureau gebruiken we bij Specht GmbH browser caching om de pagespeed (laadsnelheid van de pagina) te verhogen. Een hoge paginasnelheid is een van de belangrijkste rankingfactoren voor zoekmachines zoals Google.

 

Hoe sneller uw hele website en alle bijbehorende subpagina's laden wanneer ze worden geopend door gebruikers, hoe beter uw kansen om goed te scoren in de zoekresultaten. Hoge posities in de zoekresultaten gaan hand in hand met een betere zichtbaarheid, meer websitebezoekers en het sneller bereiken van uw individuele doelen. Verbeterde paginasnelheid heeft ook een positief effect op de gebruikerservaring (UX).

 

Bij on-page SEO moeten vooral de volgende opties voor het verbeteren van de laadtijd worden gebruikt:

 

• Comprimeren van afbeeldingen
• Verwijderen van overbodige plug-ins uit het CMS
• Gebruik van de browsercache

 

Google ondersteunt websitebeheerders (webmasters), SEO-experts en online marketingbureaus bij zoekmachineoptimalisatie. Het biedt tal van handige tools voor het optimaliseren van je eigen website, zoals Google Search Console en Google Analytics. De zoekmachine-exploitant biedt ook tools om de laadtijd van websites te verkorten met Google Pagespeed Insights een handige SEO-tool om de laadtijd van websites te verkorten.

 

Nadeel: Tijdigheid

Een nadeel van browsercaches is hun mogelijk beperkte actualiteit. Als gebruiker kun je niet weten wanneer webmasters individuele subpagina's of zelfs hele websites bijwerken. De bronnen die in de cache zijn opgeslagen, kunnen na updates verouderd zijn.

 

Zowel webmasters als gebruikers hebben een verantwoordelijkheid om het probleem van verouderde inhoud te vermijden. Webmasters beslissen of ze caching willen gebruiken en welke bronnen gecachet moeten worden en voor hoe lang - we zullen bespreken hoe webmasters de regels voor caching correct kunnen definiëren in de volgende sectie.

 

Terwijl webmasters worden opgeroepen om alleen de statische bronnen te selecteren voor caching om ervoor te zorgen dat de gegevens up-to-date zijn, hebben gebruikers de verantwoordelijkheid om hun cache regelmatig te legen. Het wissen van de cache verwijdert alle inhoud die in de cache is opgeslagen.

 

Als een pagina opnieuw wordt geladen nadat de cache is geleegd, worden alle updates van deze pagina weergegeven. Bovendien worden de bijgewerkte en dus nieuwe statische bronnen opgeslagen in de cache, zodat de volgende keer nieuwe inhoud uit de cache wordt geladen. Het regelmatig legen van de cache heeft ook als voordeel dat de belasting van de harde schijf van het eindapparaat afneemt en daardoor de prestaties van het eindapparaat weer hoger worden.

 

 

Correct regels definiëren voor het opslaan van bronnen in de browsercache

Er zitten twee kanten aan de implementatie van caching: de theoretische kant en de praktische kant. In de volgende paragraaf gaan we in op de praktische kant. Eerst willen we de theoretische kennis over caching die we in deze blogpost al hebben behandeld verder uitdiepen, zodat je het praktische gedeelte nog beter begrijpt. Tot nu toe heb je het onder de knie:

 

• Het cachen van bronnen van je website in de browser van de gebruiker is heel zinvol, omdat het helpt om de laadsnelheid van je website en alle subpagina's te verhogen.
• Om ervoor te zorgen dat de bronnen die zijn opgeslagen in de cache van de browser up-to-date zijn, moeten webmasters de regels voor caching correct definiëren.
• Gebruikers hebben ook een verantwoordelijkheid: het wordt aanbevolen om de cache regelmatig te legen om de gegevens up-to-date te houden.

 

Wanneer je als webmaster de regels voor caching definieert, kun je het beste onderscheid maken tussen drie tijdsperioden: lange termijn, middellange termijn en korte termijn. Je wijst elke bron toe aan een van deze tijdsperioden. Dit zorgt ervoor dat de betreffende bron automatisch uit de cache wordt verwijderd als de actualiteit in gevaar komt.

 

Aanbevelingen: Wanneer welke bronnen uit de cache moeten worden geladen

Om ervoor te zorgen dat de bronnen in de browsercache up-to-date zijn, moet je als webmaster statische bronnen alleen voor de lange termijn cachen (bijvoorbeeld voor een maand of een jaar). Voorbeelden van statische bronnen zijn JavaScript-bestanden en CSS-bestanden. Hier is een overzicht van de bronnen die geschikt zijn voor caching:

 

• CSS, HTML en JavaScript
• Afbeeldingsbestanden zoals JPG, JPEG, PNG en GIF
• Objectbestanden zoals video's en PDF's

 

Neem afbeeldingen als voorbeeld: Het logo van een bedrijf of de infographic in een informatief artikel verandert helemaal niet of pas na enkele jaren. Afbeeldingen zoals logo's kunnen daarom zonder problemen lange tijd in de cache van de browser worden opgeslagen, omdat ze lang up-to-date blijven, bijvoorbeeld meer dan een jaar.

 

Het feit dat bronnen zoals CSS, HTML en JavaScript ook in de browsercache kunnen worden opgeslagen, betekent dat bijvoorbeeld de lay-out van een pagina kan worden opgeslagen . Vooral het opslaan van CSS-bestanden heeft een positief effect op de prestaties van websites. CSS-bestanden kunnen voor een periode van een maand worden opgeslagen.

 

Alle andere bestanden die regelmatig veranderen - misschien zelfs meerdere keren per dag - moeten maximaal een paar uur in de cache van de browser worden opgeslagen. HTML-bestanden zijn een voorbeeld van caching op korte termijn. Deze worden onder andere gebruikt voor het opmaken van teksten. Omdat teksten vaak worden gewijzigd, moeten alle bijbehorende bestanden indien mogelijk elke keer opnieuw worden geladen.

 

Koptekst: De informatie wordt hier opgeslagen

In de paginastructuur is er de zogenaamde header. Deze definiëren regels die bijvoorbeeld de uitwisseling van informatie tussen de browser en de server of het crawlen door de algoritmen van Google regelen. Omdat de regels voor caching ook in headers worden opgeslagen, spelen ze een centrale rol in browser caching.

 

Commando's worden gebruikt in de caching header om aan te geven welke bron of bestand gecached mag worden. Als er geen overeenkomstige informatie is ingesteld, vindt er geen caching plaats. Er wordt onderscheid gemaakt tussen twee caching headers: de Cache-Control header en de Expires header.

 

De Cache-Control header bevat informatie over welke bron of bestand überhaupt in de cache geplaatst mag worden. De volgende instructies zijn gebruikelijk:

 

• no-cache: De browser mag cachen, maar moet de server vragen of de betreffende bron de nieuwste versie is.
• public: De bron mag in de cache worden opgeslagen.
• privé: De bron kan worden opgeslagen in de cache, maar alleen door de browser en niet door bestaande proxyservers.
• no-store: Het is niet toegestaan om de bron tijdelijk op te slaan.

 

Terwijl de Cache-Control header aangeeft welke bronnen en bestanden waar kunnen worden opgeslagen, wordt de Expires header gebruikt om tijdsperioden voor caching te definiëren. De aanbevelingen uit de vorige sectie van deze blogpost kunnen worden geïmplementeerd in deze caching header: Door specifiek een tijdsperiode te benoemen in de Expires header, weet de browser vanaf welk moment hij een nieuwe kopie van de betreffende bron of het bestand moet aanvragen bij de server en deze moet cachen.

 

 

Implementatie: Hoe de browsercache correct gebruiken!

Er zijn twee manieren om caching te implementeren. De eenvoudige manier is om plug-ins te gebruiken in het CMS, de ingewikkelde manier met meer controle over caching is om het htaccess bestand aan te passen.

 

Caching instellen via htaccess-bestand

Het htaccess-bestand is te vinden in de hoofdmap van de website onder de naam ".htaccess". Open het htaccess-bestand en activeer eerst browser caching via de module "mod_headers" met het volgende commando als administrator:

 

a2enmod headers
/etc/init.d/apache2 herstart

 

Vervolgens heb je de mogelijkheid om de bestandstypen voor caching op te geven. Aan de ene kant kun je alle bestandstypen samenvatten zoals in dit voorbeeld:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|ico|jpeg|jpg|png|css|js)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
</IfModule>

 

Ten tweede kun je bij het definiëren van de bestandstypen voor caching verschillende standaardwaarden instellen voor de verschillende bestandstypen door simpelweg een nieuwe regel voor bestandsmatches te starten:

 

<IfModule mod_headers.c>
<FilesMatch „\.(gif|jpg|jpeg|png)$“>
Header set Cache-Control „max-age=604800, public“
</FilesMatch>
<FilesMatch „\.(css|js)$“>
Header set Cache-Control „max-age=2592000, public“
</FilesMatch>
</IfModule>

 

De "max-age" specificatie geeft aan hoeveel seconden (bijvoorbeeld 604.800 seconden = een week) een bestand moet worden opgeslagen in de cache. De afkortingen gif, jpg, jpeg en png zijn formaten voor afbeeldingen, terwijl css en js respectievelijk staan voor CSS- en JavaScript-bestanden.

 

De browser geeft altijd de voorkeur aan de informatie in de zojuist genoemde module "mod_headers". Er wordt alleen rekening gehouden met de informatie in de alternatieve module "mod_expires" als er geen specificaties in "mod_headers" staan over hoe lang bestanden in de cache moeten staan voordat ze opnieuw worden opgevraagd bij de server. Als webmaster profiteert u van een beter overzicht met de Expires-module.

 

Als het specificeren van de cachingperioden in "mod_headers" te tijdrovend voor je is, start dan de module Expires met het volgende commando:

 

a2enmod verloopt
/etc/init.d/apache2 herstart

 

Vanaf nu kun je de Expires-header vullen met alle belangrijke informatie voor de cachingperioden door bijvoorbeeld de volgende instructies in te stellen:

 

<IfModule mod_expires.c>

VerlooptActief Op

ExpiresByType image/jpg "toegang 1 jaar".

ExpiresByType image/jpeg "toegang 1 jaar".

ExpiresByType tekst/css "toegang 1 maand".

ExpiresByType toepassing/javascript "toegang 1 maand".

ExpiresByType application/x-javascript "toegang 1 maand".

ExpiresByType application/x-shockwave-flash "toegang 1 maand".

ExpiresByType image/x-icon "toegang 1 jaar".

ExpiresByType text/html "toegang plus 300 seconden".

</IfModule>

 

De laatste regel "ExpiresByType text/html" geeft informatie over hoe lang de hele pagina - dus alle inhoud erop - moet worden opgeslagen in de cache.

 

Aangezien met name de teksten op HTML-pagina's regelmatig veranderen, zijn cachingperioden van 180 tot 600 seconden vastgesteld voor HTML-pagina's - op voorwaarde dat deze pagina's vaak worden bezocht en/of de inhoud op de pagina's vaak wordt bijgewerkt door de websitebeheerders.

 

Caching instellen met behulp van plug-ins

Het meest gebruikte CMS (content management systeem; systeem voor het maken en beheren van websites) is WordPress. Er zijn plug-ins voor WordPress waarmee het aantal functies kan worden uitgebreid. Sommige plug-ins zijn gespecialiseerd in caching. Met de volgende WordPress plug-ins kun je bijvoorbeeld caching in de browser instellen en beheren:

 

• WP Raket
• W3 Totale cache
• WP Snelste Cache
• WP Super Cache
• WP Lichtsnelheid
• SG Optimizer
• Snelle prestaties
• Kolibrie
• Cachebeheerder
• Comet Cache

 

Deze 10 WordPress plug-ins zijn al voldoende om aangepaste caching in de browser in te stellen, wat de prestaties van de hele website verhoogt en de gebruikerservaring van websitebezoekers aanzienlijk verbetert door de snelheid waarmee de website laadt te verhogen.

 

Dankzij WordPress plug-ins kunnen leken zonder technische kennis eenvoudig caching in de browser regelen. Bovendien hebben sommige van de WordPress plug-ins (bijv. WP Rocket; Swift Performance) nog meer voordelen. Ze helpen om de prestaties en laadtijd van de website in zijn geheel te verbeteren.

 

Conclusie: Stel caching in en behaal aanzienlijke SEO-voordelen!

Stel als webmaster of SEO-expert caching in op websites en behaal verregaande voordelen bij zoekmachineoptimalisatie! Met behulp van plug-ins voor WordPress en andere contentmanagementsystemen is caching eenvoudig te implementeren, zelfs voor niet-experts.

 

Als je over technische basiskennis beschikt, heb je zelfs geen plug-ins nodig en gebruik je een paar eenvoudige commando's in de header van je pagina's om browser caching aan te passen en de bezoekers van je website een goede gebruikerservaring te bieden.

 

FAQ: Vragen en antwoorden over het onderwerp "Browser caching".

In dit laatste deel van onze blogpost hebben we een aantal van de meest gestelde vragen van gebruikers samengevat. Als u ook een vraag hebt, zullen wij als zoekmachineoptimalisatie-experts u graag een passend antwoord geven. Neem contact met ons op en wij nemen contact met u op!

 

Hoe kunnen websitebezoekers caching beïnvloeden?

Internetgebruikers kunnen caching op verschillende manieren beïnvloeden. Ze kunnen bijvoorbeeld caching volledig uitschakelen in de browserinstellingen. Dit heeft tot gevolg dat geen enkele bron of bestand wordt opgeslagen in de browser van de gebruiker, ongeacht de instructies van de webmaster.

 

Verder kunnen websitebezoekers een maximale leeftijd voor bronnen instellen of cachingregels definiëren voor een individuele webpagina die verschillen van de cachingregels voor de rest van de website. Het is ook altijd mogelijk om de cache te legen.

 

Hoe kan ik de browsercache wissen?

Dit proces verschilt per browser.

 

Met Google Chrome verwijderen websitebezoekers de cache door deze eerst te openen met de toetsencombinatie "Ctrl + Shift + Del". Vervolgens kunnen ze de afbeeldingen en andere objecten in de cache selecteren en de verwijdering ervan starten.

 

Gebruikers kunnen ook de cache wissen in Internet Explorer met dezelfde toetsencombinatie als in Google Chrome. Na het gebruik van de toetscombinatie wordt een venster geopend met de informatie "Browsergegevens wissen". Door de optie "Cached data and files" te selecteren en op "Clear" (Wissen) te klikken, wordt de browsercache geleegd.

 

De volgende keer dat je een eerder bezochte website bezoekt, worden de bestanden uit de cache niet meer gebruikt nadat de cache is geleegd. In plaats daarvan vraagt de browser de huidige versie van een website op bij de server.

 

Wat is het verschil tussen browser caching en server caching?

Terwijl browser caching bronnen opslaat op de harde schijf van de websitebezoeker, worden ze door server caching opgeslagen op de server van de webmaster. Server caching draagt daarom ook bij aan een hogere laadsnelheid van pagina's.

 

De verschillen tussen browser- en servercaching liggen daarom in de niveaus van gegevensbeheer, aangezien verschillende soorten gegevens op verschillende locaties worden opgeslagen.