Welke cache headers kan ik gebruiken voor optimalisatie van de laadtijd?

Veel mensen zijn in de veronderstelling dat slechts de snelheid van de hosting relevant is voor de laadtijd van hun site, maar niets is minder waar! Een groot deel van je laadtijd wordt bepaald door hoe goed je website geoptimaliseerd is.

Je kunt voor requests naar jouw site headers meesturen, die helpen bij deze optimalisatie, waarmee je dus jouw laadtijd omlaag kunt halen. We leggen in deze handleiding uit hoe je dit precies doet!

1. Ga naar je .htaccess bestand
2. Voeg de caching headers toe
3. Sla de wijzigingen op en klaar!

1. Ga naar je .htaccess bestand

Ga in DirectAdmin naar de File Manager toe.

Hier ga je naar domains > voorbeeld.nl > public_html om bij de bestanden van je site te komen.
Hier staat in de meeste gevallen al het bestand .htaccess tussen.
Als deze erbij staat, druk je naast het bestand op Edit om deze aan te passen.

Mocht je nog geen .htaccess bestand hebben, dan kan je deze onderaan nieuw aanmaken.

Typ naast "Create New File" de naam: .htaccess
Druk hierna op Create.

2. Voeg de caching headers toe

De headers plaatsen we onderaan in de .htaccess, omdat deze anders voor problemen kunnen zorgen. De regels die we gaan toevoegen zijn de volgende:

# START GZIP COMPRESSION

<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>

# END GZIP COMPRESSION
# START DEFLATE COMPRESSION

    AddOutputFilterByType DEFLATE "application/atom+xml" \
    "application/javascript" \
    "application/json" \
    "application/ld+json" \
    "application/manifest+json" \
    "application/rdf+xml" \
    "application/rss+xml" \
    "application/schema+json" \
    "application/vnd.geo+json" \
    "application/vnd.ms-fontobject" \
    "application/x-font" \
    "application/x-font-opentype" \
    "application/x-font-otf" \
    "application/x-font-truetype" \
    "application/x-font-ttf" \
    "application/x-javascript" \
    "application/x-web-app-manifest+json" \
    "application/xhtml+xml" \
    "application/xml" \
    "font/eot" \
    "font/otf" \
    "font/ttf" \
    "font/opentype" \
    "image/bmp" \
    "image/svg+xml" \
    "image/vnd.microsoft.icon" \
    "image/x-icon" \
    "text/cache-manifest" \
    "text/css" \
    "text/html" \
    "text/javascript" \
    "text/plain" \
    "text/vcard" \
    "text/vnd.rim.location.xloc" \
    "text/vtt" \
    "text/x-component" \
    "text/x-cross-domain-policy" \
    "text/xml"
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

# END DEFLATE COMPRESSION
# START ENABLE KEEP ALIVE

    Header set Connection keep-alive

# END ENABLE KEEP ALIVE
# START EXPIRES CACHING #

    ExpiresActive On
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresByType image/svg+xml "access plus 1 month"
    ExpiresByType audio/ogg "access plus 1 year"
    ExpiresByType video/mp4 "access plus 1 year"
    ExpiresByType video/ogg "access plus 1 year"
    ExpiresByType video/webm "access plus 1 year"
    ExpiresByType application/atom+xml "access plus 1 hour"
    ExpiresByType application/rss+xml "access plus 1 hour"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/javascript "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType text/x-component "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType font/opentype "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    ExpiresByType application/x-font-ttf "access plus 1 month"
    ExpiresByType application/font-woff "access plus 1 month"
    ExpiresByType application/font-woff2 "access plus 1 month"
    ExpiresDefault "access 1 month"

# END EXPIRES CACHING #
# BEGIN Cache-Control Headers

        Header set Cache-Control "public"
        Header set Cache-Control "public"
        Header set Cache-Control "private"
        Header set Cache-Control "private, must-revalidate"

# END Cache-Control Headers

Je kunt deze regels gewoon 1 op 1 overnemen uit bovenstaande voorbeeld in jouw .htaccess.
Dit werkt als het goed is voor iedere website!

3. Sla de wijzigingen op en klaar!

Vervolgens hoef je alleen nog maar de wijzigingen op te slaan.

Druk op de knop "Save As" om de wijzigingen op te slaan.
Nu ben je klaar!

Je hebt nu de headers van je site geoptimaliseerd voor een snellere website!