Kopteksten voor verlopen toevoegen

Hoe voeg ik Expires-headers toe aan het .htaccess-bestand?

Toont GTmetrix of Pingdom de foutmelding “Add Expires headers”?

Wat is de Expires-header?

Wat zijn de stappen om verlopen headers toe te voegen aan .htaccess?

Wanneer is het juiste moment om bestanden en cache te laten verlopen?

Op een begrijpelijke manier uitgelegd hoe je Expires headers toevoegt aan het .htaccess bestand.

Een van de meest voorkomende foutmeldingen bij het testen van de website op Pingdom of GTmetrix is: Add Expires headers.

De foutmelding zegt dat u meer tijd moet besteden aan de bestanden (afbeeldingen, HTML, CSS en JavaScript) die in de cache van uw site blijven. Caching heeft een directe impact op de laadtijd van je website. Websitesnelheid is een zeer belangrijke SEO-optimalisatie. Google beoordeelt websitesnelheid als een belangrijke rankingfactor. Websitebeheerders die de laadsnelheid van hun website niet hebben geoptimaliseerd, zullen in tijden van “mobile first” geen goede rankings behalen in de zoekresultaten op Google. Websites die anno 2019 niet geoptimaliseerd zijn voor mobiele apparaten en geen snelle laadtijden hebben, zullen nauwelijks in de top rankings in de zoekmachines te vinden zijn.

Wanneer een gebruiker uw website op internet bezoekt, downloadt de browser automatisch een reeks bestanden. Elk van deze bestanden heeft een vervaldatum en blijft een bepaalde tijd in de cache. Als de gebruiker besluit andere pagina’s van uw website of website opnieuw te bezoeken, hoeven niet alle bestanden opnieuw te worden geladen. Als de tijd voor het verlopen van de bestanden te kort is ingesteld, verschijnt de foutmelding “Add Expires Headers”.

Hoe werkt de Expires-header?

Verlopen headers geven de browser het commando om deze bestanden te downloaden en op te slaan. De reden hiervoor is om de hoeveelheid verzenden en ontvangen tussen de computer en de server (d.w.z. de website) te verminderen en om de gegevens te gebruiken die in de cache zijn opgeslagen.

Als gevolg hiervan duurt het iets langer om een nieuw geopende website te laden dan wanneer deze herhaaldelijk wordt opgeroepen. Afhankelijk van de website zijn er verschillende bestanden zoals HTML, CSS, JavaScripts, afbeeldingen, afbeeldingen, PDF en andere bestanden die deel uitmaken van de functionaliteit van de website en die moeten worden geladen.

Dus elke keer dat een nieuwe gebruiker uw website bezoekt, worden al deze bestanden opgevraagd bij de server. Elk verzoek (voor elk afzonderlijk bestand) vereist een andere laadtijd, afhankelijk van de begroeting van het bestand. Wanneer bepaalde bestanden echter in het geheugen worden geplaatst, neemt het aantal verzoeken af. Hierdoor zal de website sneller laden.

# Hoe lang moeten de gegevens in de cache van de browser blijven?

Om te voorkomen dat gebruikers gedeelde bestanden opnieuw downloaden, moet voor deze bestanden een vervaldatum worden gedefinieerd. De gedefinieerde vervaldatum vertelt de browser welk bestand moet worden opgevraagd bij de server en welk bestand moet worden opgevraagd bij de cache.

Welke bestanden worden in de cache opgeslagen?

De eerste stap is om te bepalen welke bestanden vaak worden bijgewerkt en welke niet vaak.

Bestanden die zelden worden bijgewerkt:
Foto ‘s
Video ‘s
Audio
De Favicon
Webfonts, lettertypen

Bestanden die vaker worden bijgewerkt:
Javascript en CSS
Sms

Hoe voeg ik Expires-headers toe aan het .htaccess-bestand om de foutmelding “add expires headers” te voorkomen.

Voeg Expires-header toe aan het .htaccess-bestand:
Het .htaccess-bestand is vaak een verborgen bestand in uw hoofdmap. Zorg ervoor dat u een back-up van dit bestand maakt voordat u wijzigingen aanbrengt. Als er iets misgaat, kunt u het opgeslagen bestand herstellen.

1. Download je .htaccess-bestand. Als het bestand is verborgen, schakelt u ‘Toon verborgen bestanden in uw FTP’ in.

2. Open uw .htaccess-bestand in een editor (Kladblok of Kladblok ++) en voeg uw code toe met de vervaldatums. Dit kan individueel worden bepaald op basis van uw wensen.

We gebruiken bijvoorbeeld de volgende code, u bent van harte welkom om deze te kopiëren en aangepast te gebruiken voor uw .htaccess:

# Expires headers (for better cache control)
<ifmodule mod_expires.c>
        ExpiresActive on
        # Perhaps better to whitelist expires rules? Perhaps.
        ExpiresDefault                              "access plus 1 month"
        # cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
        ExpiresByType text/cache-manifest           "access plus 0 seconds"
        # Your document html
        ExpiresByType text/html                     "access plus 0 seconds"
        # Data
        ExpiresByType text/xml                      "access plus 0 seconds"
        ExpiresByType application/xml               "access plus 0 seconds"
        ExpiresByType application/json              "access plus 0 seconds"
        # Feed
        ExpiresByType application/rss+xml           "access plus 1 hour"
        ExpiresByType application/atom+xml          "access plus 1 hour"
        # Favicon (cannot be renamed)
        ExpiresByType image/x-icon                  "access plus 1 week"
        # Media: images, video, audio
        ExpiresByType image/gif                     "access plus 4 months"
        ExpiresByType image/png                     "access plus 4 months"
        ExpiresByType image/jpeg                    "access plus 4 months"
        ExpiresByType image/webp                    "access plus 4 months"
        ExpiresByType video/ogg                     "access plus 1 month"
        ExpiresByType audio/ogg                     "access plus 1 month"
        ExpiresByType video/mp4                     "access plus 1 month"
        ExpiresByType video/webm                    "access plus 1 month"
        # HTC files  (css3pie)
        ExpiresByType text/x-component              "access plus 1 month"
        # Webfonts
        ExpiresByType font/ttf                      "access plus 4 months"
        ExpiresByType font/otf                      "access plus 4 months"
        ExpiresByType font/woff                     "access plus 4 months"
        ExpiresByType font/woff2                    "access plus 4 months"
        ExpiresByType image/svg+xml                 "access plus 1 month"
        ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
        # CSS and JavaScript
        ExpiresByType text/css                      "access plus 1 year"
        ExpiresByType application/javascript        "access plus 1 year"
</ifmodule>
## EXPIRES END

Een korte uitleg hierover:

< De query IfModule mod_expires.c> controleert of de benodigde servermodule is geïnstalleerd.

ExpiresActive On zet de module voor je website aan, gevolgd door de informatie over welke bestandstypen in de cache moeten worden opgeslagen en voor welke periode. De tijd wordt gespecificeerd in het formulier “vanaf de laatste toegang voor periode X”, in het voorbeeld “toegang plus 1 weken”, d.w.z. “vanaf toegang voor één week”. Zodra de ingestelde periode is verstreken, wordt het bestand in de browsercache vervangen door de huidige versie van uw website.

Zorg ervoor dat de tijd altijd in het meervoud wordt gedefinieerd, d.w.z. dat er een “s” aan het einde staat (weken, maanden, …). Welke waarden mogelijk zijn als tijdsaanduiding kunt u vinden in de officiële documentatie van de Apache-webserver: http://httpd.apache.org/docs/2.0/mod/mod_expires.html#AltSyn

3. Nadat je de wijzigingen in het .htaccess-bestand hebt aangebracht, vergeet dan niet om het op te slaan en terug te uploaden naar de hoofdmap van je website, tenzij je een directe wijziging op de server hebt aangebracht.

Hoe lang moet de vervaltijd van bestanden worden ingesteld?

De duur van de cache kan worden ingesteld in jaren, maanden, weken, dagen, uren en zelfs seconden.

De vervaldatum van elk bestand moet worden ingesteld op basis van het tijdstip waarop het wordt gebruikt/opgevraagd.

De vervaldatum van afbeeldingen kan worden ingesteld op ongeveer een jaar, omdat ze meestal niet worden gewijzigd en het laden van afbeeldingen het grootste deel van de tijd in beslag neemt.

HTML, CSS en JavaScript worden waarschijnlijk vaker regelmatig bijgewerkt. De vervaldatum kan worden ingesteld op een maand of minder.