Comment exploiter la mise en cache du navigateur ? ExpiresByType et Cache-Control


Je vous ai déjà donné sur le blog plusieurs outils pour mesurer la vitesse de chargement de son site. Parmi les recommandations, on vous demande souvent "d'exploiter la mise en cache du navigateur". Mais quel est ce conseil obscur ? Dans cet article, je vous explique ce qu'est le cache du navigateur mais aussi comment s'en servir.

Ces conseils ne concernent que ceux qui hébergent leur blog chez un hébergeur. Si vous utilisez une plateforme gratuite (WordPress.com, Blogger, Canalblog, Overblog, etc), vous ne gérez pas vous-même les aspects techniques donc vous n'avez pas besoin de vous préoccuper du cache ! Vous pouvez néanmoins lire la première partie de l'article pour savoir de quoi il s'agit... car vous vous en servez sans le savoir !

Le cache, c'est quoi ?

Quand vous surfez sur un site, votre navigateur (Firefox, Google Chrome, Safari, etc) doit charger différents éléments pour que les pages web s'affichent bien : il va charger le logo, les images, des fichiers qui contrôlent l'apparence de la page (= les fameuses feuilles de style CSS), etc.

Le problème, c'est que charger des éléments sur Internet prend plus de temps que d'aller les chercher sur un disque dur (que ce soient des images, du texte, des vidéos). C'est encore plus vrai quand vous vous connectez depuis un smartphone avec une connexion lente... ou quand vous êtes dans un coin perdu où le réseau n'est pas optimal !

Alors comment faire pour gagner du temps ? Comment faire en sorte qu'une page web se charge plus vite ?

Pour trouver la solution, il faut regarder comment sont faites les pages web. Si vous observez un site, vous allez constater qu'il y a un certain nombre d'éléments qui sont communs à toutes les pages : par exemple, le logo du site va être le même sur la page d'accueil et sur les articles du site.

La définition même du cache du navigateur est de jouer le rôle de "mémoire" : une mémoire qui va retenir les éléments récurrents d'un site pour ne pas avoir à les charger à nouveau par la suite.

Ces éléments sont stockés sur votre disque dur, ce qui permet d'y accéder très rapidement et de les charger sans solliciter la connexion Internet. Quand vous consulterez d'autres pages web sur le même site, ça permettra donc de ne charger que les nouveau éléments. Le temps de chargement sera donc bien meilleur.

Une comparaison facile à comprendre

Pour mieux comprendre la définition du cache, je vais comparer avec un exemple de la "vraie vie" : quand vous avez appris à faire vos lacets... vous deviez retenir beaucoup de choses ! A quel endroit passer le lacet pour faire une boucle autour de l'autre, où placer vos doigts pour faire un nœud réussi, etc. Ça prenait du temps !

Imaginez ce qui se passerait si vous n'aviez pas mémorisé ces gestes. A chaque fois que vous feriez vos lacets le matin, vous seriez obligés de tout réapprendre... Vous y passeriez un temps fou !

Sur le web, c'est pareil : mémoriser des informations dans le cache de votre navigateur lui permet ensuite de gagner du temps pour afficher votre page plus vite !

Vider le cache

Le cache est vraiment une mémoire "palpable" : autrement dit, c'est un vrai dossier de votre disque dur.

Par exemple, sur Windows, on peut trouver le dossier de cache en allant...

  • Pour Mozilla Firefox - Dans C:\Utilisateurs\(Votre nom d'utilisateur)\AppData\Local\Mozilla\Firefox\Profiles\(Dossier par défaut)\cache2\entries ;
  • Pour Google Chrome - Dans C:\Utilisateurs\(Votre nom d'utilisateur)\AppData\Local\Google\Chrome\User Data\Default\Cache.

Cette mémoire cache du navigateur peut être vidée, en allant dans les options du navigateur et en choisissant de "vider le cache", ou en ayant recours à un logiciel de nettoyage comme CCleaner. Ça peut faire gagner énormément d'espace disque, d'ailleurs !

Mise en cache : un bon moyen d'améliorer la vitesse de chargement des pages web
Mise en cache : un bon moyen d'améliorer la vitesse de chargement des pages web

Utiliser le cache grâce au fichier .htaccess

Passons maintenant au cœur du problème : comment exploiter la mise en cache du navigateur quand on tient un blog, pour améliorer le temps de chargement des pages web ?

Connectez-vous pour commencer sur votre FTP (là où vous avez envoyé les fichiers de votre blog) à l'aide d'un client FTP comme FileZilla ou WinSCP.

Vous devez voir dans le dossier où est installé le blog un fichier nommé ".htaccess". Il va falloir le modifier. Pensez à en faire une copie avant toute modification. En cas de problème, vous pourrez ainsi remettre en ligne cette version qui marche :)

Le fichier .htaccess permet de donner toutes sortes de consignes pour gérer le comportement de votre site : par exemple "Tu dois rediriger telle page vers telle page", "Tu dois protéger telle page par un mot de passe". Le .htaccess donne ces consignes au serveur sur lequel est hébergé le site.

Pour charger une page web, votre navigateur communique avec ce serveur web... et c'est ainsi que l'on peut transmettre des instructions utiles pour améliorer les performances.

Le fichier .htaccess peut être modifié avec un outil gratuit comme Notepad++. Pensez à bien préserver le point au début du nom du fichier car il a son importance. C'est aussi un fichier qui n'a pas d'extension (il ne se termine pas par .txt, .php ou autre).

L'instruction ExpiresByType

Sur un serveur Apache (cas le plus fréquent en hébergement mutualisé), il existe un module appelé "mod_expires". Il permet de dire au navigateur : "Cet élément est valide pendant telle durée".

C'est un peu comme une date de péremption sur un produit frais : une fois que la durée spécifiée sera expirée, le cache sera considéré comme périmé... et il faudra à nouveau charger les éléments.

A la fin de votre fichier .htaccess, ajoutez le code suivant :

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault                          "access plus 1 week"
  ExpiresByType image/x-icon              "access plus 1 year"
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType text/x-component          "access plus 1 month"
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year" 
  ExpiresByType text/js                   "access plus 1 year"
  ExpiresByType application/x-javascript  "access plus 1 year" 
  </IfModule>

Que signifie donc ce code mystérieux ? On définit une "date d'expiration" en fonction du type de fichier, d'où le "ExpiresByType". Regardez chaque ligne de droite à gauche. On dit au navigateur : "A partir du moment où le lecteur accède à la page pour la première fois ("access") et pendant telle durée (1 month = 1 mois ; 1 year = un an par exemple), tu me mémorises tel type de fichier (par exemple, une image au format png ; une vidéo au format mp4).

Dans le code ci-dessus, je dis par exemple : "à compter de l'accès et pendant 1 mois, tu mémorises les images au format jpg". Pendant un mois, si vous venez relire le blog, votre navigateur retiendra donc toutes les images et ne les rechargera pas à chaque fois.

Les durées proposées ci-dessus sont des durées standard qui conviennent à la plupart des situations. Idem pour les types de fichiers, ça inclut les formats d'image les plus utilisés (jpg, gif, png), les vidéos mp4, les polices d'écriture standard, les feuilles de style, les fichiers Javascript (utilisés par exemple par les plugins de partage sur les réseaux sociaux). Vous pouvez bien sûr compléter la liste en fonction de vos besoins si vous avez compris le principe !

L'instruction Cache-Control

L'instruction Cache-Control vient compléter l'instruction ExpiresByType. En simplifiant, elle offre beaucoup plus d'options, permet concrètement de faire la même chose que l'instruction ExpiresByType... mais on utilise souvent les deux instructions en même temps histoire de couvrir un large éventail de navigateurs web, y compris les plus anciens.

En étant réaliste, on pourrait aujourd'hui se contenter d'utiliser Cache-Control car il prend le dessus sur ExpiresByType.

Le principe est exactement le même... mais au lieu de définir une "durée à partir du premier accès aux ressources", on va d'abord donner à chaque ressource un "âge maximal" qu'on appelle le "max-age". On exprime cet âge en secondes. Les durées les plus courantes sont donc...

  • Une heure : max-age=3600 ;
  • Une journée : max-age=86400 ;
  • Une semaine : max-age=604800 ;
  • Un mois : max-age=2628000 ;
  • Un an : max-age=31536000.

Ensuite, on doit choisir si le cache est public ou privé. L'idée d'un cache public, c'est qu'il peut être commun à plusieurs utilisateurs (en général, c'est la solution adoptée sur un blog). Un cache privé est propre à un seul utilisateur, ça concerne des ressources potentiellement confidentielles.

Enfin, on choisit le type de fichier à mettre en cache. On peut par exemple mettre en cache les images pendant 1 mois, les scripts et styles pendant 1 an... et ne pas mettre en cache les fichiers HTML, PHP ou les interfaces CGI.

Il suffira alors d'ajouter ce code à la fin de votre .htaccess :

<IfModule mod_headers.c>
<FilesMatch "\.(ico|gif|png|jpe?g)$">Header set Cache-Control "max-age=2628000, public"</FilesMatch>
<FilesMatch "\.(js|css)$">Header set Cache-Control "max-age=31536000, public"</FilesMatch> 
<FilesMatch "\.(htm|html|php|cgi|scgi|fcgi)$">Header unset Cache-Control</FilesMatch>
</IfModule>

Les limites du cache

Déjà, le fichier .htaccess n'existe qu'avec les serveurs Apache (cas le plus fréquent pour les blogs hébergés sur un hébergement mutualisé). Si vous utilisez un serveur Nginx, il existe le même genre de fichier de configuration mais les instructions s'écrivent différemment (cf cet article par exemple).

Ensuite, vous allez me dire : "ça ne marche pas la première fois qu'une page est visitée". Effectivement, il faut que les ressources soient chargées une fois pour qu'il n'y ait plus besoin de les charger par la suite. Cependant, il existe aujourd'hui pas mal de systèmes qui "pré-chargent" le cache afin que celui-ci soit actif dès la première consultation d'une page web.

J'utilise par exemple le plugin WordPress WP Fastest Cache et il propose une option "Preload" qui permet de mettre en cache les posts, les pages, la page d'accueil, les pages de catégorie avant même qu'elles ne soient visitées.

Rappelons aussi un élément important quand on tient un site web : parfois, à cause du cache, vous ne voyez pas tout de suite les modifications que vous avez apportées à une page. Votre navigateur a gardé en mémoire l'ancienne version et n'affiche pas les changements effectués. Il faut alors vider le cache, soit à l'échelle d'une page (le raccourci Ctrl + F5 sauve des vies !), soit à l'échelle du navigateur entier.

WordPress et les plugins de cache

Sur WordPress, il existe de nombreux plugins de cache : W3 Total Cache et WP Super Cache sont très populaires ; j'ajoute WP Fastest Cache, que j'utilise. En payant, il y a aussi WP Rocket.

Parfois, quand vous utilisez un plugin de cache, vous allez constater qu'il fait buguer certains aspects de votre site. Pour prendre un exemple concret, j'ai un jour testé un plugin de cache qui empêchait mon menu mobile de fonctionner normalement. Il est parfois nécessaire d'ajuster la configuration du plugin, en excluant par exemple un fichier de la mise en cache.

Le cache est un outil très riche mais aussi relativement complexe à appréhender quand on n'est pas spécialiste ou développeur web. Un plugin de cache qui fonctionne très bien pour une personne peut causer des erreurs chez une autre, en fonction de sa configuration, des caractéristiques de son site... Mais quand ça marche, ça permet d'obtenir de beaux gains de temps de chargement !

Je ne suis pas développeur web, justement, donc j'ai essayé de partager avec vous dans cet article des explications aussi claires et simples que possible sur le sujet, en espérant que les morceaux de code fournis vous seront utiles ! Vous pouvez aussi aller lire ces conseils complémentaires pour améliorer la vitesse de chargement d'une page web.


Poster un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

52 commentaires sur “Comment exploiter la mise en cache du navigateur ? ExpiresByType et Cache-Control
  • Nadège

    Bonjour Marlène,
    Merci pour ces infos.
    Côté utilisateur, comment ça se passe ?
    Par ex, l’utilisateur visite mon site jour J, et mes données sont paramétrées pour être stockées 7 jours. A partir du 8ème jour, voit-il les données actualisées ou celles mises en cache (s’il n’a pas vidé son cache) ??
    Merci d’éclairer :)

    Répondre à Nadège
    • Marlène

      Bonjour Nadège, quand on donne une instruction concernant l’expiration d’un cache, une fois que le délai est expiré ça signale au « client » que la copie mise en cache est périmée et invalide, et qu’il faut à nouveau charger la source d’origine.

      Répondre à Marlène
  • william

    Bonjour Marlène. Tu n’es peut-être pas développeuSE web (ouais un peu de féminisation) mais tu m’as appris ou remémorer des trucs, alors que j’en suis un. Donc bravo pour cet article très clair et pertinent. Chapeau bas !

    Répondre à william
  • Daniel

    Marlène
    Merci pour cet article très clair et facile à mettre en pratique.
    Daniel

    Répondre à Daniel
  • woodybeauty

    Coucou, merci pour ce super article! J’ai appliqué les 2 codes, le 2ème m’a mis une erreur 501 et mon blog n’était plus accessible. Par contre j’ai laissé le 1er et il a considérablement augmenté ma note, je suis très contente, depuis le temps que ça me prenait le choux cette histoire de vitesse ^^ Merci encore!

    Répondre à woodybeauty
    • Marlène

      L’erreur 501 signifie en général que le serveur sur lequel se trouve ton blog ne supporte pas le réglage que tu lui réclames :) Tant mieux si au final tu constates une amélioration, c’est le principal !

      Répondre à Marlène
  • Melis

    Bonjour, merci pour ce tuto bien expliqué. Lorsque j’ajoute le deuxieme bout de code j’ai une erreur 500 interne du serveur. Google speed m’affiche pourtant 100/100 en fixe et lorsque je mets des bouts de code je n’atteinds que les 82pts. Pouvez-vous m’éclairer sur mon erreur ? Merci !

    Répondre à Melis
    • Melis

      des bouts de codes provenant de d’autres site*
      c’est pour cela que j’aimerais que celui de votre site marche ;)

      Répondre à Melis
    • Marlène

      Hello Melis. Question idiote mais… pourquoi vouloir ajouter des codes supplémentaires si le site a déjà des performances excellentes en termes de vitesse ? Pour comprendre l’origine de l’erreur 500, il faudrait plus d’infos sur la configuration du serveur, le contenu du htaccess, etc. Mais je pense que si le site a de bonnes performances sans code supplémentaire, autant ne pas « charger » le htaccess inutilement.

      Répondre à Marlène
    • Melis

      Bonjour Marlène, c’est lorsque j’ajoute le deuxieme bout de code que j’atteinds les 100/100. Malheureusement ce dernier crée une erreur 500 sur mon site. Il s’agit d’un site e-commerce worpdress (je vous ai rajouté le liens de site. Merci

      Répondre à Melis
    • Marlène

      Bonjour, le code crée probablement une « mauvaise interaction » avec un autre code existant, qu’il ait été ajouté à la main ou par un plugin. Pour obtenir de l’aide, il faudrait aller sur un forum de code ou sur le forum de WordPress et poster un message plus complet avec l’intégralité du contenu du fichier .htaccess, la liste des plugins utilisés, etc. Pour ma part je ne peux malheureusement pas aller plus loin dans l’analyse, faute de temps ;)

      Répondre à Marlène
  • Baptiste

    Bonjour,

    Je suis sur un CMS (jimdo). Je n’ai donc pas accès au htaccess, mais est-il possible d’exploiter la mise en cache du navigateur en insérant du code dans le head ?
    Merci beaucoup !

    Répondre à Baptiste
    • Marlène

      Bonjour Baptiste, WordPress est aussi un CMS et on a accès au htaccess ;) Mais pour répondre à la question, j’ai déjà vu passer des scripts php qui permettent de gérer une forme de mise en cache… mais je ne sais absolument pas ce qu’ils valent, ni en termes d’efficacité ni en termes de sécurité pour ton site. Tu devrais contacter Jimdo directement, ils ont peut-être une réponse fiable à t’apporter !

      Répondre à Marlène
  • May

    Bonjour Marlène,

    Après avoir entré le code je suis passée de 78/100 à 73/100 sur Pagespeed insights, saurais-tu pourquoi?

    Merci d’avance!

    Répondre à May
    • Marlène

      Sans avoir l’analyse détaillée de Pagespeed Insights, non :) Il faut regarder sur quels aspects le site a bougé pour comprendre à quoi est due la différence.

      Répondre à Marlène
  • Alexandrine

    Merci pour cet article, j’ai gagné 11% d’un coup sur PageSpeed Insights. Il y a encore du boulot alors je continue mes petites recherches

    Répondre à Alexandrine
    • Marlène

      Ah ça fait du bien, une petite montée comme ça :) Bien joué !

      Répondre à Marlène
  • coletteg

    Bonjour et merci pour vos précieux conseils. J’ai des questions à vous poser : 1. Doit on faire une modification du fichier .htaccess quand on a installé WP super cache ? Faut il faire les 2 opérations ou le plugin s’en charge t-il ? 2. Ce qui est recommandé dans le plugin ce n’est pas le mode réécriture mais PHP (recommandé écrit à côté) Pourquoi ?
    Un site de test m’indique : “ Certaines ressources pouvant être mises en cache ont une durée d’actualisation limitée. Spécifiez un délai d’expiration d’au moins une semaine pour les ressources suivantes : ” Mais où faut-il faire cela ? Merci pour votre patience et vos réponses. cg

    Répondre à coletteg
    • Marlène

      Bonjour, alors :
      1) Pour WP Super Cache, le plugin ajoute les règles de réécriture lui-même dès lors que le fichier .htaccess est accessible en écriture.
      2) J’ai déjà répondu à cette question dans le tutoriel WP Super Cache, regardez ma réponse à Fred.

      Pour le délai d’expiration, c’est expliqué dans l’article que vous venez de commenter ;)

      Répondre à Marlène
  • Kantutita - Birds and Bicycles

    MERCI pour ces instructions!
    Je ne savais absolument pas comment procéder, et grâce à toi c’est chose faite, en quelques minutes.
    :) Du coup je prends le temps de te remercier!!! Je vais voir si je trouve d’autres super astuces sur ton site. Une belle journée!

    Répondre à Kantutita
  • Rim Enviedelecture

    Merci pour cet article il m’a été très utile, particulièrement le bout de code :)

    Répondre à Rim
  • foxneo

    Bonjour,
    j’aime bien le plugin Zencache, mieux que WP Super Cache
    https://fr.wordpress.org/plugins/zencache/

    Répondre à foxneo
    • Marlène

      « Mieux » pourquoi selon toi ? Quelles fonctionnalités, quelles particularités ?

      Répondre à Marlène
    • foxneo

      Bonjour,
      N’étant pas un pro, je ne voulais pas entrer dans les détails, mais rien qu’en l’installant, puis en testant sur GTMetrix, j’ai eu à l’époque de meilleur résultats, je n’ai plus en tête,la différence, il y a 3 ans de cela .

      Déjà il est très simple à configure, juste un code à mettre dans le fichier .htaccess car il a l’option Gzip Compression, on peut choisir si oui ou non nettoyage automatique, de la page d’accueil, des articles, des pages, de la page Auteur, Catégories, Archives, Custom Post Type, Flux RSS, ..même du XML Sitemaps.

      il y l’option « Automatic Expiration Time » pour la durée du cache, on peut mettre le temps que l’on veut de 30 secondes à 1 an.

      Il y a l’option Client-Side Cache, que l’on peut activer ou pas, si on ‘na beaucoup de membres, on met NO , sinon sur Yes, pour un site plus rapide encore

      Autre option : Caching Enabled for GET (Query String) Requests, plus mettre en cache la page 404, ou en cache le Flus RSS, on peut exclure du cache « Special URI Exclusion Patterns » et « Special HTTP Referrer Exclusion Patterns »

      bonne journée

      Répondre à foxneo
    • Marlène

      Merci ! J’ai l’impression que les options se rejoignent avec celles de WP Super Cache… mais s’il est plus simple à configurer et plus efficace, ça vaudrait le coup que je le teste.

      Répondre à Marlène
    • foxneo

      Bonjour,
      Oui il est proche de WP Super Cache, mais simple à configurer, puis il n’a pas eu tous les bugs que j’ai pu voir sur le forum de WordPress-fr.net.
      Mais peut être l’idéal si on peut se le permettre et d’acheter le plugin WP Rocket

      Répondre à foxneo
  • Mademoisellevi

    Hello hello
    Merci pour cet article
    Je compte le faire une fois chez moi et j’espère y arriver
    Cela dit, j’ai besoin que tu m’aiguilles si tu le peux
    Mon blog est hyper lent, quand j’ai commencé, en tant que novice, je n’avais pas idée de tout ce que pouvait représenter un blog et donc les techniques qui allaient avec lol
    Du coup, ça m’énerve un peu car je n’y comprends pas grand chose
    Sur PageSpeed Insights on me parle aussi d’éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison ou encore de réduire la taille des ressources CSS et Javascript : KEZACO ??? Aurais tu un tuto???

    Répondre à Mademoisellevi
    • Marlène

      Hello, j’ai testé ton blog sur GTMetrix, un super outil pour comprendre pourquoi un site est lent… et visiblement, ce sont les images qui posent le plus gros problème. Tu les mets en ligne dans leur taille d’origine donc forcément, le fichier chargé est très très lourd. Rien que ton logo + ta bannière pèsent plus de 5 Mo à eux deux. Pour te donner un élément de comparaison, la page d’accueil de mon blog (avec les images et tout le tralala) pèse moins de 0.4 Mo. Il faut donc que tu commences par redimensionner et recadrer si nécessaire tes images avant de les mettre en ligne :)

      Concernant la ligne de flottaison, il faut optimiser son code de manière extrêmement poussée pour ne pas avoir cet avertissement. Je t’avoue que même avec de bonnes compétences en la matière, je ne parviens pas à faire disparaître l’avertissement sur Page Speed car si je charge le fichier suggéré par Google à un autre endroit, certaines fonctionnalités ne marchent plus…

      Répondre à Marlène
    • Mademoisellevi

      Merci mille fois pour ta réponse ;) c’est adorable
      Et du coup, vu qu’avant je n’avais jamais fais attention à l’optimisation des images dois je toutes les reprendre une à une? Ou alors des plugin peuvent le faire pour m’éviter de les reprendre toutes une a une?? Ca serait un plus effectivement …..
      En tout cas merci pour tes conseils si clairs !!!
      J’arrive enfin à comprendre quelque chose :)

      Répondre à Mademoisellevi
    • Marlène

      Il y a des plugins efficaces pour l’optimisation des images, j’utilise Short Pixel pour ma part.

      Répondre à Marlène
  • Dearjoy

    Et du coup pour blogger ça fonctionne comment cette histoire de cache finalement ? :)

    Répondre à Dearjoy
    • Marlène

      C’est une plateforme gratuite donc c’est Google (le propriétaire des lieux) qui détermine des paramètres pour tout le monde, qui s’appliquent à l’ensemble des blogs Blogger :) Rien à gérer de ce côté là du coup quand on est blogueur !

      Répondre à Marlène
    • Dearjoy

      D’accord je vois, merci pour ta réponse rapide :) ! J’aime beaucoup ton blog et surtout tes articles très pertinents !! J’y decouvre pas mal de choses interessantes qui rentre dans le cadre de mes études donc c’est un petit plus. Allé hop dans mes favs ! Bonne soirée ;)

      Répondre à Dearjoy
    • Marlène

      Merci beaucoup :) Je viens d’aller regarder ce que tu fais comme études, je ne connaissais même pas cet intitulé de métier ! Il y a pourtant une personne qui fait ça dans mon job mais elle se présente juste comme « graphiste », c’est intéressant d’avoir un regard croisé entre design, expérience utilisateur et conception web…

      Répondre à Marlène
  • Adrien

    Bonsoir, cela ne pose pas de problèmes si j’utilise le plugin WordPress WP super cache et en plus que j’inscrive ce bout de code dans mon fichier htaccess ?

    Ps : Bonne rédaction !

    Merci d’avance,
    Adrien.

    Répondre à Adrien
    • Marlène

      Non, du tout ! Ce sont deux choses indépendantes, j’utilise les deux sans rencontrer de problème particulier. Bonne soirée !

      Répondre à Marlène
  • fred

    Merci pour ta réactivité!
    Je viens de tester ton code, je ne gagne que 2% ( de 64 à 66) sur ordinateur sur pagespeed. il me dit toujours d’améliorer la mise en cache navigateur. En fait, rien n’a été modifié.

    Tu as une idée du pourquoi?

    PS : j’ai vu le plugin « plugin organizer » qui permet apparemment de désactiver certains plugins en fonction de certains pages. Tu connais?

    Merci beaucoup!

    Répondre à fred
    • Marlène

      Ton serveur n’a peut-être pas le « mod_expires » activé. Si c’est le cas, le fait de mettre ce code ne changera rien.

      Je ne connais pas « Plugin Organizer », je préfère souvent éviter d’ajouter trop de plugins mais il a l’air bien noté et à jour donc ça vaut le coup de tenter ! Va voir aussi GTMetrix.com, leurs instructions sont encore plus précises que celles de Google, ils te disent vraiment quels points de ton site posent problème (ex : fichiers Javascript chargés en début de page au lieu d’être chargés en fin de page, etc). On ne peut pas tout rectifier quand on est sur un hébergement mutualisé car certains paramètres échappent à ton contrôle mais on peut quand même obtenir de bons scores.

      Répondre à Marlène
  • fred

    Merci Lou pour ce code!
    J’utilise wordpress ( comme tout le monde, ou presque) et j’ai quelques questions?
    1) WordPress lui-même n’intègre pas nativement un système de cache?
    2) Les plugins ont-ils dans leur code un ajout concernant la mise en cache navigateur?
    3) Et donc, ajouter ton code ne risque-t-il pas de « dérégler » la config actuelle de mon site?

    Sur pagespeed, j’ai 50 (mobile) et 64 ( ordinateur), je trouve ça lent. J’utilise wp-super-cache.
    Merci pour ta réponse.
    Bonne journée,
    Fred.

    Répondre à fred
    • Marlène

      Hello Fred,
      1) A ma connaissance, non… d’ailleurs, le site de WordPress lui-même recommande l’utilisation d’un plugin de cache comme WP Super Cache ou WP Total Cache.
      2) Il y a bien des fonctions de cache prévues par le Codex WordPress mais ensuite, chaque développeur de plugin peut s’en servir ou non.
      3) Le code en question ne touche pas du tout au code du site lui-même, il définit juste des dates d’expiration pour les fichiers. Après, le « mod_expires » qui permet au serveur de prendre en compte ces directives n’est pas forcément actif sur tous les serveurs mais ça, il faut voir avec l’hébergeur si c’est le cas ou pas.

      Dans le cas de ton site, visiblement il y a aussi un problème de code d’après l’outil GT Metrix (fichiers CSS et Javascript trop volumineux, trop de données chargées depuis des noms de domaine différents), ça peut jouer aussi sur la rapidité si le code n’est pas optimisé.

      Répondre à Marlène
  • Ginger Power

    Merci beaucoup pour l’astuce ! Ça va vraiment me servir ! :D

    Répondre à Ginger
  • Mélanie

    Super article pour une compréhension simple et efficace.
    Avec le code en plus, c’est le top, merci !

    Répondre à Mélanie
  • Jülide

    c’est très sympa à toi de nous donner un code tout prêt! je compte le rentrer et te dirais ce qu’il en est!

    Répondre à Jülide
    • Marlène

      C’est une petite optimisation parmi bien d’autres possibles :) Mais les petits ruisseaux font les grandes rivières !

      Répondre à Marlène
  • Aline - Inspiré et Créé

    Merci pour cet article!
    Je le mets en favoris en attendant d’avoir le temps pour ajouter le code à mon site!

    Répondre à Aline
    • Marlène

      J’aime bien ton site :) Il est ultra rapide à charger d’ailleurs donc pas d’urgence à améliorer le temps de chargement !

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.