Belangrijkste hoogtepunten
- Expires headers verbeteren de snelheid van de WordPress-site door browsercaching voor statische bestanden in te schakelen.
- Tools zoals GTmetrix, PageSpeed Insights en Lighthouse helpen bij het identificeren van ontbrekende of verkeerd geconfigureerde headers.
- U kunt expires-headers toevoegen via plug-ins, .htaccess (Apache) of Nginx-serverconfiguratie.
- Bluehost vereenvoudigt caching met ingebouwde functies, SSD-opslag, CDN-integratie en compatibiliteit met plug-ins.
- Voorkom veelvoorkomende cachingfouten met best practices zoals versiebeheer, testen en het gebruik van testomgevingen.
Introductie
Uw website ziet er misschien geweldig uit, maar als hij laadt alsof hij vastzit in 2005, zullen bezoekers niet blijven hangen om hem te bewonderen.
Snelheid is niet onderhandelbaar, en een van de gemakkelijkste manieren om de prestaties te verbeteren, is door expires-headers toe te voegen in WordPress. Deze krachtige tweak maakt browsercaching mogelijk, waardoor statische bestanden zoals afbeeldingen, stylesheets en scripts lokaal kunnen worden opgeslagen voor snellere herhalingsbezoeken.
Het resultaat? Snellere laadtijden, minder serverstress en een soepelere gebruikerservaring, allemaal met een paar eenvoudige stappen.
In deze handleiding leert u hoe u expires-headers kunt toevoegen met behulp van plug-ins, door uw .htaccess-bestand te bewerken en door uw webserver (Apache of Nginx) te configureren. We bespreken ook hoe u veelvoorkomende fouten kunt voorkomen die uw site vertragen.
Vervaldatums toevoegen in WordPress: Stapsgewijze handleiding
Er zijn verschillende manieren om expires headers toe te voegen in WordPress, afhankelijk van je hostingconfiguratie, servertype en technisch comfortniveau. Laten we elke methode een voor een verkennen:
Methode 1: Voeg expires headers toe met behulp van een plugin
Als je niet vertrouwd bent met code, is de eenvoudigste manier om expires-headers in WordPress toe te voegen, door een caching-plugin te gebruiken. Deze plug-ins verwerken browsercaching automatisch en laten u vervaltijden configureren zonder serverbestanden te bewerken.
W3 Total Cache en WP Super Cache zijn de twee populaire plug-ins die u kunt gebruiken. Voor deze methode gebruiken we W3 Total Cache als referentie:
- Ga naar het WordPress dashboard.
- Klik op ‘Plugins’> ‘Nieuwe Plugin toevoegen’ en zoek naar W3 Total Cache. Klik vervolgens op ‘Installeren’ en ‘Activeren’.
- Navigeer naar het tabblad ‘Prestaties’ en klik vervolgens op ‘Browsercache’.
- Zoek ‘Kop verloopt instellen’ en vink het vakje aan.
- Scrol omlaag naar de sectie ‘CSS en JS’ en vink vervolgens de optie aan voor ‘Header verloopt instellen’.
- Voer de gewenste levensduurwaarde in seconden in.
- Standaard is het ingesteld op 31536000 seconden (gelijk aan 365 dagen), maar u kunt het aanpassen op basis van uw cachingstrategie.
- Herhaal dezelfde stappen voor HTML en media.
- Nadat u de instellingen hebt aangepast, klikt u op de vervolgkeuzepijl van de knop ‘Instellingen opslaan’ en klikt u op ‘Instellingen opslaan en caches opschonen’.
Methode 2: Handmatig expires-headers toevoegen door het .htaccess-bestand (Apache-server) te bewerken
Als uw site op een Apache-webserver draait, kunt u handmatig expires-headers toevoegen door het .htaccess-bestand te wijzigen. Ga als volgt te werk om handmatig expires-headers toe te voegen:
- Krijg toegang tot de hoofdmap van je site via FTP of File Manager in je hostingconfiguratiescherm. Bluehost-gebruikers vinden hun ‘Bestandsbeheer’ onder ‘Snelle links’.
- Zoek het .htaccess-bestand (zorg ervoor dat verborgen bestanden zichtbaar zijn). U krijgt een .htaccess-bestand in de map ‘public_html’.
- Voeg het volgende codefragment toe voor de # END WordPress-regel:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 3 days"
</IfModule> - Sla het bestand op en upload het.
Dit instrueert de browser om verschillende soorten bestanden gedurende bepaalde perioden in de cache op te slaan, waardoor toekomstige laadtijden worden verkort.
Methode 3: Nginx configureren voor expires headers
Als uw site wordt gehost op een Nginx-webserver, is de .htaccess-methode niet van toepassing. In plaats daarvan moet u het configuratiebestand van de server bewerken.
location ~* \.(jpg|jpeg|gif|png|css|js|woff2)$ {
expires 30d;
add_header Cache-Control "public";
} Voeg dit toe aan het configuratieblok van je Nginx-site, dat zich meestal bevindt op
‘/etc/nginx/sites-available/yourdomain.conf’. Hoe controleer je of je website drops nodig heeft?
Veel caching-plug-ins, CDN’s of hostingomgevingen kunnen standaard expires-headers implementeren. Maar niet altijd op de meest geoptimaliseerde manier. Een goede controle zorgt ervoor dat u geen dubbele inspanningen doet of kansen mist om browsercaching te gebruiken voor snellere prestaties.
Hier zijn drie betrouwbare hulpmiddelen om u te helpen identificeren of er vervaldatums op uw website ontbreken:
1. GTmetrix
GTmetrix is een populaire tool voor het testen van de sitesnelheid die gedetailleerde aanbevelingen doet om de prestaties van uw website te optimaliseren. GTmetrix analyseert hoe uw pagina’s worden geladen en markeert ontbrekende of verkeerd geconfigureerde expires headers.
Hier zijn de stappen om te controleren of uw website vervaldatums nodig heeft met GTmetrix:
- Ga naar GTmetrix.com, voer de URL van uw website in en klik op ‘Nu testen’.
- Klik op het tabblad ‘Structuur’ na het voltooien van de scan.
- Zoek naar problemen zoals:
- ‘Headers voor verlopen toevoegen’ of
- ‘Maak gebruik van browsercaching’ onder de auditlijst
Wat het betekent:
Als u deze waarschuwingen ziet, betekent dit meestal dat uw statische bestanden (bijvoorbeeld .jpg, .css, .js) niet efficiënt in de cache zijn opgeslagen. GTmetrix laat ook zien welke bestanden worden beïnvloed, zodat u kunt beslissen waar u headers wilt toevoegen.
Lees ook: Optimaliseer uw site: Website Snelheidstest GTmetrix Tips
2. Google PageSpeed-inzichten
Het is een tool van Google die de paginasnelheid en algehele prestaties van uw website analyseert. Het biedt real-world prestatiegegevens, inclusief caching-problemen met betrekking tot verlopen headers in WordPress.
Ga als volgt te werk om te controleren of uw website vervaldatums nodig heeft met behulp van PageSpeed Insights:
- Bezoek pagespeed.web.dev.
- Voer de URL van je WordPress-site in en voer de test uit.
3. Scrol omlaag naar het gedeelte ‘Diagnostische gegevens’.
4. Zoek naar waarschuwingen zoals:
- ‘Serveer statische assets met een efficiënt cachebeleid’;
- ‘Verminder ongebruikt JavaScript’ (vaak gekoppeld aan slechte caching)
Wat het betekent:
Deze waarschuwing geeft aan dat sommige resources geen effectieve expires-headers gebruiken. U krijgt een lijst met getroffen URL’s, bestandstypen en suggesties om ze op te lossen. U kunt de juiste cachingregels toepassen met behulp van een plug-in, CDN of rechtstreeks in uw .htaccess-bestand of webserverconfiguratie.
3. Lighthouse Prestatietest (via Chrome DevTools)
Lighthouse is een robuuste audittool die is ingebouwd in Google Chrome. Het biedt geavanceerde prestatietests, waaronder een diepgaande blik op het gebruik van browsercaching en verlopen headers door uw site.
Hier zijn de stappen om te controleren of uw website vervaldatums moet krijgen met behulp van de Lighthouse Performance-test:
- Open uw website in Google Chrome.
- Klik met de rechtermuisknop op een willekeurige plek op de pagina en klik op ‘Inspecteren’.
- Navigeer naar het tabblad ‘Vuurtoren’.
- Selecteer ‘Prestaties’ (u kunt ook ‘SEO’ en ‘Best practices’ toevoegen).
- Klik op ‘Paginabelasting analyseren’ en wacht tot de test is voltooid.
Wat het betekent:
Zoek in de resultaten naar rode vlaggen in het gedeelte ‘Prestaties’, zoals:
- ‘Serveer statische assets met een efficiënt cachebeleid’;
- ‘Responstijden van de server verkorten (TTFB)’
Hiermee wordt gecontroleerd of uw site de inhoud correct in de cache plaatst en wordt weergegeven of een verlopen header ontbreekt of moet worden gerepareerd.
Door alle drie de tools te gebruiken, krijgt u een uitgebreid beeld van hoe uw website omgaat met browsercaching en of het toevoegen of optimaliseren van expires headers nodig is. Maak je geen zorgen als deze tools caching-waarschuwingen weergeven: je bent nog maar een paar stappen verwijderd van het oplossen.
Hoe helpt Bluehost de prestaties van websites te verbeteren?
Bluehost begrijpt dat snelheid een noodzaak is. Daarom bieden we WordPress-hostingplannen aan, die vanaf de grond af zijn opgebouwd met het oog op prestaties. Van caching op serverniveau tot eenvoudige integratie met snelheidsverhogende plug-ins, Bluehost helpt WordPress-gebruikers essentiële optimalisaties door te voeren zonder enige geavanceerde technische installatie.
Of je nu een blog, portfolio of bedrijfssite beheert, onze WordPress-hostingpakketten bieden de snelheid, veiligheid en schaalbaarheid die makers nodig hebben om vol vertrouwen te groeien.
Wij zorgen voor de complexiteit van de back-end, zodat u zich kunt concentreren op de groei van uw site en het leveren van een naadloze ervaring aan uw bezoekers. Zo verbeteren we de prestaties van uw website:
Ingebouwde caching-mechanismen
Onze hostingomgeving bevat geïntegreerde caching-functies die zijn ontworpen om laadtijden te verkorten door veelgebruikte gegevens dichter bij uw gebruikers op te slaan. Dit betekent dat terugkerende bezoekers sneller pagina’s laden, waardoor hun algehele browse-ervaring wordt verbeterd.
Je vindt deze instelling in het WordPress-dashboard onder het tabblad Bluehost.
NVMe-opslag voor snellere toegang tot gegevens
We maken gebruik van krachtige NVMe-opslag (Non-Volatile Memory Express) op onze servers, waardoor gegevens sneller kunnen worden opgehaald en de responsiviteit van de website is verbeterd. NVMe-opslag versnelt het lees- en schrijfproces, wat van vitaal belang is voor dynamische inhoud en databasegestuurde sites.
Lees ook: NVMe WordPress Hosting: verhoog de snelheid en siteprestaties
Integratie van het Content Delivery Network (CDN)
Om de snelheid van uw site wereldwijd verder te verhogen, bieden we naadloze integratie met Cloudflare CDN. Een CDN distribueert de statische inhoud van uw website over een netwerk van servers over de hele wereld, waardoor gebruikers gegevens kunnen downloaden van de dichtstbijzijnde serverlocatie. Dit vermindert de latentie en zorgt voor snellere laadtijden voor bezoekers, ongeacht hun geografische locatie.
PageSpeed Insights-tool
Inzicht in de prestaties van uw website is de sleutel tot optimalisatie. Binnen uw Bluehost-accountmanager heeft u toegang tot de PageSpeed Insights-functie. Deze tool evalueert de snelheid van uw site en biedt bruikbare aanbevelingen om de prestaties te verbeteren. Door gebruik te maken van deze inzichten kunt u weloverwogen beslissingen nemen om de laadtijden van uw website verder te optimaliseren.
Ondersteuning voor caching-plug-ins
Voor WordPress-gebruikers bieden we compatibiliteit met populaire caching-plug-ins zoals W3 Total Cache en WP Super Cache. Deze plug-ins bieden geavanceerde caching-mogelijkheden, zodat u de prestatie-instellingen van uw site kunt afstemmen op uw specifieke behoeften.
Deskundige ondersteuning
Ons toegewijde ondersteuningsteam is 24/7 beschikbaar om u te helpen met eventuele prestatiegerelateerde vragen. Of u nu hulp nodig heeft bij het configureren van caching-instellingen, het implementeren van expires-headers of het oplossen van prestatieproblemen, onze experts staan voor u klaar.
Als uw site meer snelheid, uptime en schaalbaarheid vereist, overweeg dan om te upgraden naar cloudhosting. In tegenstelling tot gedeelde omgevingen, verdeelt cloudhosting bronnen over meerdere servers, waardoor uw site snel en betrouwbaar blijft, zelfs tijdens verkeerspieken.
Met ingebouwde caching, automatische schaling en geïsoleerde bronnen is Bluehost Cloud-hosting ideaal voor sites met veel verkeer, e-commercebedrijven en snelgroeiende merken.
Hoe voorkom je caching-gerelateerde fouten?
Hoewel het toevoegen van expires headers en het inschakelen van browsercaching de snelheid van uw site aanzienlijk kan verbeteren, kunnen onjuiste configuraties tot onverwachte problemen leiden. Hier zijn een paar belangrijke dingen waarmee u rekening moet houden om caching-gerelateerde fouten te voorkomen:
1. Wees voorzichtig met verlengde vervaltijden
Het instellen van te lange vervaldatums (bijv. 1 jaar) voor items zoals CSS of JavaScript kan ertoe leiden dat bezoekers verouderde content te zien krijgen. Als u regelmatig wijzigingen aanbrengt op uw site, kunt u overwegen technieken voor het doorbreken van caches te gebruiken.
2. Test na het toepassen van wijzigingen
Nadat de configuratie is verlopen, wissen headers – via plug-in, .htaccess-bestand of webserverinstellingen – altijd uw sitecache en browsercache voordat u gaat testen.
3. Let op conflicten met plug-ins
Het gebruik van meerdere caching-plug-ins of het combineren van handmatige caching-regels met plug-in-instellingen kan soms tot conflicten leiden. Deze kunnen elkaar overschrijven, kapotte stijlen/scripts veroorzaken of zelfs voorkomen dat updates aan gebruikers worden getoond.
4. Serverspecifiek gedrag
Het cachegedrag kan variëren, afhankelijk van of u Apache, Nginx of een beheerde host gebruikt. Zorg ervoor dat u de juiste syntaxis voor uw omgeving toepast.
5. Gebruik staging-omgevingen voor testen
Voordat u wijzigingen op uw live site implementeert, voornamelijk als u serverbestanden bewerkt of cachingregels uitvoert, moet u een testomgeving gebruiken.
Tot slot
Inmiddels heb je precies geleerd hoe je expires headers aan je WordPress-site kunt toevoegen – en waarom het belangrijk is. Deze eenvoudige maar krachtige techniek helpt de snelheid en prestaties van uw website te verbeteren door browsercaching voor statische bestanden mogelijk te maken.
Bij Bluehost weten we dat prestaties niet alleen een functie zijn, maar een basis. Daarom hebben we ons hostingplatform gebouwd om je WordPress-site te ondersteunen met razendsnelle SSD-opslag, ingebouwde cachingtools, naadloze CDN-integratie en plug-incompatibiliteit met één klik. U concentreert zich op uw inhoud en publiek, wij zorgen voor de backend.
Laat je niet tegenhouden door een trage site. Kies Bluehost WordPress-hosting en ontgrendel vandaag nog razendsnelle prestaties.
Veelgestelde vragen
Expires-headers zijn HTTP-responsheaders die een browser vertellen hoe lang een bestand in de cache moet worden opgeslagen voordat het opnieuw bij de server wordt opgevraagd. Ze helpen de prestaties van de website te verbeteren door browsercaching van statische bestanden zoals afbeeldingen, CSS en JavaScript mogelijk te maken.
U kunt expires-headers toevoegen in WordPress met behulp van een caching-plug-in zoals WP Super Cache of W3 Total Cache. Met deze plug-ins kunt u caching-regels instellen zonder code te bewerken. Als alternatief kunt u expires-headers handmatig toevoegen via het .htaccess-bestand (Apache) of uw Nginx-serverconfiguratie.
Het toevoegen van expires-headers helpt uw website te versnellen door browsers te vertellen statische inhoud gedurende een bepaalde tijd in de cache op te slaan. Dit verkort de laadtijd van pagina’s, verlaagt het serververzoek en verbetert de SEO en gebruikerservaring.
Het .htaccess-bestand bevindt zich in de hoofdmap van je WordPress-installatie, meestal onder /public_html/. Het kan standaard verborgen zijn: zorg ervoor dat uw bestandsbeheerder of FTP-client is ingesteld om verborgen bestanden weer te geven.
De meeste moderne webservers zoals Apache en Nginx ondersteunen expedites headers, maar de configuratiemethode verschilt. Apache gebruikt het .htaccess-bestand en de mod_expires-module, terwijl Nginx wijzigingen in het configuratiebestand van de site vereist.
U kunt headers controleren op vervaldatums met behulp van tools zoals GTmetrix, Google PageSpeed Insights of Lighthouse. Deze tools geven aan of er caching-headers op uw site ontbreken en bieden suggesties voor verbetering.
Expires-headers gebruiken een vaste datum voor caching, terwijl Cache-Control relatieve tijd gebruikt (bijv. max-age=86400). Beide worden gebruikt om browsercaching te controleren en het is gebruikelijk om ze samen te gebruiken voor een beter cachebeheer.
Schrijf een reactie