CAForum-phpBB

Lien vers cet article: Tout sélectionner

[url=https://forums.caforum.fr/kb/viewarticle?a=13]Base de connaissance - Gérer le cache par le .htaccess[/url]

Chaque fois qu'un navigateur interroge un site web, il va télécharger sur votre ordinateur toutes les ressources nécessaires (html, css, js, images, etc…) pour afficher la page demandée. Ce trafic peut être important c'est pourquoi le cache de votre navigateur stocke , d'une session à l’autre les fichiers reçus.

L'objectif de ce stockage est double :

Réduire le temps d'attente
Réduire le trafic réseau entre le serveur et le client.

Je vous propose de voir comment on peut optimiser ces échanges dans le cadre d'un référencement (le SEO)

Pour cela nous allons utiliser le fichier de paramétrage du serveur apache qui se situe à la racine de votre site : le fichier .htaccess

Les fichiers .htaccess fournissent une méthode pour modifier la configuration du serveur au niveau de chaque répertoire.

ATTENTION !!! Si un fichier .htaccess, contenant une ou plusieurs directives de configuration, est placé dans un répertoire de documents particulier, ses directives s'appliquent à ce répertoire et à tous ses sous-répertoires.

Comment optimiser la gestion du cache ?

Phase I : On commence par faire une sauvegarde du .htaccess AVANT de commencer les manipulations

Une erreur de syntaxe dans ce fichier génère, en général, "erreur 500, Internal Server Error" qui rend le site inaccessible.
Si cela arrive, il suffit simplement de mettre en place la version sauvegardée .

Phase II : Optimiser, la persistance ("la durée de vie") d'un fichier en fonction du couple Type/extension par la fonction ExpiresByType

Certains fichiers d'un site étant rarement modifiés, (par exemple le logo d'un site, les scripts JavaScript), il n'est pas nécessaire de les recharger à chaque visite du site. Ceux-ci étant déjà présents dans le cache du navigateur, l'accès est sans délai => optimisation de l’affichage et donc du temps de réponse vu de l'utilisateur .

Ci dessous, un exemple du code à ajouter dans le fichier .htaccess

Code: Tout sélectionner

#Mise en cache
        <IfModule mod_expires.c>
            ExpiresActive On
            ExpiresDefault "access plus 7200 seconds"
            ExpiresByType text/css "access plus 3 years"
            ExpiresByType text/javascript "access plus 3 years"
            ExpiresByType application/x-javascript "access plus 3 years"
            ExpiresByType application/javascript "access plus 3 years"
            ExpiresByType image/x-icon "access plus 3 years"
            ExpiresByType image/vnd.microsoft.icon "access plus 3 years"
            ExpiresByType image/png "access plus 3 years"
            ExpiresByType image/jpeg "access plus 3 years"
            ExpiresByType image/jpg "access plus 3 years"
            ExpiresByType image/gif "access plus 3 years"
            ExpiresByType application/x-shockwave-flash "access plus 3 years"
        </IfModule>

Petite explicitation du code :

ExpiresDefault "access plus 7200 seconds" cette ligne fixe la durée de vie avant rafraichissement de tous les fichiers envoyés par le serveur Apache (7200 secondes = 2 heures)
ExpiresByType image/x-icon "access plus 3 years" cette commande fixe, par type/extension de fichier, un délai supplémentaire par rapport au délai par défaut.

Le code ci-dessus est celui pour un site qui n'évolue pas en terme d'image (d'où le délai de conservation de 3 ans pour les images)
C'est vrai tant que la page elle-même n'est pas modifiée => sinon tout est rafraichi et les compteurs sont remis à zéro .

Phase III : Optimiser la durée de vie de la ressource par la fonction CACHE-CONTROL MAX-AGE

Nous avons également la possibilité,toujours par le .htaccess, de passer des instructions "cache control" la durée s'exprime en secondes

Le cache-contrôle utilise différents en-têtes de réponse. Une ressource peut également être public ou privé. Mais celle qui nous intéresse ici est max-age. Qu’est-ce que le max-age ? Il s’agit d’une donnée en seconde qui indiquera pendant combien de temps la ressource est considérée comme fraiche depuis l’exécution de la 1ere requête. Pendant tout ce laps de temps, le navigateur utilisera la ressource en cache.

Code: Tout sélectionner

        # Début 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>
        # Fin Cache-Control Headers

Expires ou Cache Control : Quel est le meilleur choix ?

Expires et Cache Control, ont le même rôle. Il n’est pas nécessaire d’utiliser les deux si vous ne maîtrisez pas le sujet. Mais si les deux systèmes sont utilisés, cela ne posera pas de problème non plus.

Sachez que la directive Cache Control max-age prend la priorité sur le Expires.

Que dit Google à propos de la mise en cache navigateur ?

Il se contredit…un peu. Dans ses ressources sur page speed insight, Google nous informe sur ses préférences en matière de gestion du cache : «Nous recommandons d’utiliser l’en-tête Expires plutôt que Cache-Control: max-age, car le premier est plus largement accepté. »

Mais dans son sujet sur la mise en cache, il est indiqué : « L’en-tête Cache-Control a été défini dans le cadre de la spécification HTTP/1.1 et remplace les en-têtes précédents (par exemple Expires) utilisés pour définir les règles de mise en cache de la réponse.

Tous les navigateurs modernes sont compatibles avec Cache-Control. Nous n’avons donc besoin de rien d’autre.» Les navigateurs gèrent cela correctement et l’utilisation de l’un ou l’autre ne changera pas vos performances.

Par contre le Cache Control vous permet un contrôle plus précis en jouant avec les directives.