Améliorer la vitesse de chargement du site grace au cache-control et aux headers

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{htmlmetatags>metatag-description=(Nous verrons ici, comment grâce à **expire-headers** et au **cache-control** d'Apache, nous pouvons sensiblement améliorer la vitesse de chargement de vos pages web.)
metatag-og:image=(https://www1.zonewebmaster.eu/_media/serveur-apache2-debian:1920px-apache_http_server_logo__2016_.svg.png)
metatag-og:description=(Nous verrons ici, comment grâce à **expire-headers** et au **cache-control** d'Apache, nous pouvons sensiblement améliorer la vitesse de chargement de vos pages web. )
metatag-og:title=(Améliorer la vitesse de chargement du site grace au cache-control et aux headers - htaccess - zonewebmaster.eu)
metatag-og:type=(article)
metatag-og:url=(https://www1.zonewebmaster.eu/gestion-site-internet/ameliorer-optimiser-site-internet/ameliorer-vitesse-chargement-cache-headers-htaccess)
metatag-og:locale=(fr_FR)
metatag-og:site_name(zonewebmaster.eu)
metatag-article:published_time=(2023-03-25)
metatag-article:modified_time=(2023-03-25)
metatag-article:author=(montuy337513)
metatag-article:tag=(apache2, htaccess, seo, optimisation, serveur web, serveur HTTP, site web, headers, expire, cache-control, sécurisation,help, tuto, wiki, debian)
}}
====== Améliorer la vitesse de chargement du site grace au cache-control et aux headers - htaccess ======

La vitesse de chargement d'un site internet est étroitement lié à la composition de chacune des pages de ce site.\\
Le temps de chargement d'une page est un critère important pour l'expérience utilisateur et surtout est un critère important pour le SEO de votre site.
Grâce au **htaccess**, vous pouvez améliorer les **performances de votre site**, **l’expérience utilisateur** et le **référencement naturel**.

Nous verrons ici, comment grâce à **expire-headers** et au **cache-control** d'Apache, nous pouvons sensiblement améliorer la vitesse de chargement de vos pages web.
{{howhard>3}}

===== Pré-requis =====

  * Avoir un site internet sur un serveur web Apache
  * Les fichiers .htaccess sont pris en compte par Apache
  * Le module headers installé et activé  
  * Le module expires installé et activé

===== Expires Header =====

Le Expire header permet d’indiquer que certains types de fichiers peuvent rester en cache dans le navigateur du visiteur pendant une durée déterminée, sans que le navigateur n’ait besoin de faire des requêtes pour vérifier la validité du cache.

Ce qui réduira le nombre de requêtes vers votre site. La navigateur réutilisant les données récupérées précédemment lors du chargement de la page précédente ou lors d'une visite précédente. 

<code bash>
# BEGIN Expire headers
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresDefault "access plus 7200 seconds"
 ExpiresByType image/jpg "access plus 2592000 seconds"
 ExpiresByType image/jpeg "access plus 2592000 seconds"
 ExpiresByType image/png "access plus 2592000 seconds"
 ExpiresByType image/gif "access plus 2592000 seconds"
 AddType image/x-icon .ico
 ExpiresByType image/ico "access plus 2592000 seconds"
 ExpiresByType image/icon "access plus 2592000 seconds"
 ExpiresByType image/x-icon "access plus 2592000 seconds"
 ExpiresByType text/css "access plus 2592000 seconds"
 ExpiresByType text/javascript "access plus 2592000 seconds"
 ExpiresByType text/html "access plus 7200 seconds"
 ExpiresByType application/xhtml+xml "access plus 7200 seconds"
 ExpiresByType application/javascript A2592000
 ExpiresByType application/x-javascript "access plus 2592000 seconds"
 ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers
</code>

La ligne <IfModule ... est présente pour tester si le module //expires// est bien activé sur votre site internet. Si le module est absent, les lignes comprises entre <IfModule mod_expires.c> et </IfModule> ne sont pas lues.

//ExpiresActive// sert à activer le module //expires//.

//ExpiresDefault// permet d'indiquer la valeur par défaut qui doit être appliquée. Ici 7200 secondes.

//ExpiresByType// permet de spécifier une valeur de cache navigateur différente selon le mimetype des fichiers à lire.
Exemple : une image JPEG illustrant un article ne change pas, elle peut donc être mise en cache par le navigateur du visiteur et lors de sa visite suivante, l'image sauvegardé dans le cache sera utilisée au lieu de d'être rechargée. L'image sera rechargée si les données sauvegardées ont plus de 30 jours ou si le visiteurs a vidé ses caches.

<WRAP center round important 60%>
Les valeurs et mimetype sont données à titre d'exemple.\\
vous devez absolument tester et adapter ce code en fonction de vos besoins !
</WRAP>
  
===== Cache-control =====

L'en-tête HTTP principal utilisé pour la mise en cache est **Cache-Control**. Le module **Cache-control** vient en complément du module **headers** et sert spécifier les directives de cache. en fonction du serveur que vous avez ou du navigateur utilisé par vos visiteurs. Là aussi, on va déterminer une durée de cache par type de fichier :

<code bash>
# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
 <FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$">
 Header set Cache-Control "max-age=2592000, public"
 </FilesMatch>
 <FilesMatch "\.(js)$">
 Header set Cache-Control "max-age=2592000, private"
 </FilesMatch>
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, public"
</filesMatch>
# Disable caching for scripts and other dynamic files
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header unset Cache-Control
</FilesMatch>
</IfModule>
# END Cache-Control Headers
</code>

La ligne <IfModule ... est présente pour tester si le module //headers// est bien activé sur votre site internet. Si le module est absent, les lignes comprises entre <IfModule mod_headers.c> et </IfModule> ne sont pas lues.

<FilesMatch "\.(ico|jpe?g|png|gif|swf|css|gz)$"> : Cette ligne permet de détecter les extensions de fichiers de type ico, jpeg, jpg, png, gif, swf, css, gz. Si la requête est effectivement pour ces types de fichiers, alors le contenu entre <FilesMatch... et </FilesMatch> est exécuté.

Header set Cache-Control "max-age=2592000, private" : Cette ligne indique la durée maximale du cache et si ce cache est //public// ou //private//. La différence entre un cache-control //public// et //private// réside dans la gestion des proxys. Si le visiteur transite par un proxy et que le cache-control est réglé sur //private//, alors le proxy n'a pas l'autorisation de mettre en cache le contenu. 

Les fichiers dynamiques ne sont pas, ou très peu mis en cache (html, php, cgi, …), tandis que le reste est mis en cache pour une longue durée. Dans l'exemple ci-dessus nous avons chois délibérément de ne pas appliqué de cache sur les fichiers dynamiques.


===== Notes de version =====

Version 1.00 [25/03/2023] - Article initial

===== Auteurs et sources =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">