Comment servir des actifs statiques avec une politique de cache efficace

Des sites Web comme GTMetrix et Google PageSpeed ​​Insights fournissent des suggestions sur la façon d'améliorer les performances de votre site Web. Si vous lisez ceci, vous savez au moins que chaque site Web a la possibilité d'améliorer les performances, soit par des optimisations manuelles, soit en utilisant des plugins comme 10Web Booster.

Dans les deux outils, vous pouvez voir une suggestion pourdiffuser des actifs statiques avec une politique de cache efficace .Cette suggestion consiste à stocker les fichiers localement afin que les visites répétées sur le site soient plus rapides. Les étapes pour améliorer cette recommandation n'améliorent pas la visite initiale du site (il existe d'autres améliorations pour cela). Néanmoins, toutes les visites ultérieures bénéficieront de l'utilisation du cache du navigateur.

Il convient de noter que la suggestion de servir des actifs statiques avec une politique de cache efficace a également été appelée mise en cache du navigateur ou mise en cache du navigateur dans WordPress.

Cet article explique comment servir des actifs statiques avec une politique de cache efficace et comment une politique de cache efficace peut améliorer les performances de votre site Web.

Lorsque vous utilisez GTMetrix, la suggestion ressemblera à l'exemple ci-dessous sur la page de résultats. Il mettra en évidence les économies potentielles de la mise en œuvre de la mise en cache du navigateur.

Dans Google PageSpeed ​​Insights, la suggestion se ressemble et donne des informations similaires.

Les suggestions sont similaires car GTMetrix et PageSpeed ​​Insights utilisent l' outil Lighthouse pour leur cadre d'analyse de page Web. Lighthouse est un outil open source visant à améliorer les performances du site et peut fonctionner dans de nombreux formats différents.

Prenons un moment pour un bref rappel afin de nous rappeler comment les performances d'un site Web sont mesurées par un ensemble de mesures, dont la plus importante est le Core Web Vitals.

Voici un résumé :

• Largest Contentful Paint ( LCP ) – La mesure du temps nécessaire au chargement du plus grand objet dans la fenêtre d'affichage de la page.
• Premier délai d'entrée ( FID ) - Cela mesure la réactivité du site Web. Il mesure le temps entre le clic ou l'interaction de l'utilisateur avec le site et la réponse du site.
• Décalage de mise en page cumulé ( CLS ) - Cela mesure à quel point la mise en page d'une page se décale de manière inattendue.

Une façon d'avoir un impact positif à la fois sur le LCP et le FID est de servir les actifs statiques avec une politique de cache efficace, ce qui signifie que le navigateur sait qu'il peut stocker localement une ressource pendant un certain temps.

Une politique de cache efficace se traduira par des temps de chargement plus rapides, car quelle que soit la vitesse de votre connexion Internet, le chargement à partir d'un cache local sera plus rapide et vous fera gagner du temps.

Il y a quelques composants, alors discutons-en plus en détail.

Comment servir des actifs statiques avec une politique de cache efficace

Pour comprendre comment servir des actifs statiques avec une politique de cache efficace, nous devons d'abord comprendre les différents aspects, tels que les actifs statiques, la mise en cache et une politique de mise en cache. Décomposons-les ici.

Que sont les actifs statiques ?

Les ressources statiques sont des fichiers. Lorsque nous faisons référence à des actifs statiques dans cet article, nous faisons référence à des fichiers individuels qui ne devraient pas changer ni bientôt ni souvent.

Les fichiers tels que les images, le javascript, les fichiers CSS et les polices sont des fichiers qui pourraient être considérés comme des actifs statiques. En ce qui concerne WordPress, ces fichiers CSS, javascript, images et polices feraient généralement partie d'un thème, d'un plugin ou d'un contenu utilisateur.

Les fichiers et les pages générés dynamiquement ne sont pas considérés comme des ressources statiques. Un exemple de cela dans WordPress serait les pages statiques générées par les plugins de mise en cache. Ceci est développé dans la section suivante.

Qu'est-ce que la mise en cache ?

La mise en cache est le processus de stockage des réponses dans un cache afin que la prochaine fois que la même question est posée, la réponse puisse être renvoyée plus rapidement.

Articles Liés

Comment vider le cache WordPress de manière sûre et efficace ?

Trouvez le meilleur plugin de mise en cache WordPress avec nos 5 meilleurs choix

Si vous avez déjà travaillé avec des plugins de mise en cache WordPress, vous connaissez peut-être la mise en cache pleine page. La mise en cache des pages est différente de la mise en cache des actifs statiques.

Mise en cache des pages par rapport à la mise en cache des actifs statiques

Cet article examine spécifiquement la mise en cache des actifs (fichiers) statiques. Cela ne doit pas être confondu avec la mise en cache pleine page, qui stocke les pages générées pour une utilisation ultérieure.

La mise en cache des pages et la mise en cache des fichiers contribuent à améliorer les performances d'un site. Lorsque nous discutons de la mise en cache d'actifs statiques, nous nous référons à des actifs spécifiques tels que javascript, CSS et fichiers image.

La mise en cache des pages stocke les résultats d'une page WordPress générée dynamiquement et réserve cette version pendant une durée spécifique. Les caches de page sont généralement stockés sur un serveur ou un réseau périphérique tel qu'un CDN, et les actifs statiques sont stockés localement sur la machine de l'utilisateur.

La mise en cache concernant la façon dont nous servons les actifs statiques avec une politique de cache efficace signifie dire au navigateur combien de temps il peut stocker une ressource localement sur le navigateur avant de devoir la retélécharger.

Qu'est-ce qui rend un actif statique cachable ?

Selon GTMetrix, un actif peut être mis en cache s'il répond aux exigences suivantes :

• Il s'agit d'une police, d'un CSS, d'un javascript ou d'un fichier multimédia.
• Il renvoie un code d'état HTTP 200, 203 ou 206
• Il n'a pas de politique explicite de non-cache

Qu'est-ce qu'une politique de mise en cache ?

Nous avons examiné ce qu'est un actif statique ainsi que ce que signifie mettre en cache un actif.

Les termes fraîcheur et périmé peuvent être utilisés ici pour décrire l'état d'un fichier mis en cache. Si un fichier peut être extrait du cache, il peut être appelé fresh . Lorsqu'il expire, il est appelé stale .

Une politique répondra à des questions telles que la durée pendant laquelle un fichier est considéré comme frais et comment vérifier qu'un fichier est frais. La politique stipule que nous devons vérifier auprès du serveur uniquement après un certain temps ou nous faire savoir de vérifier auprès du serveur à chaque demande, mais de ne télécharger à nouveau le fichier que s'il a changé.

Quelques termes supplémentaires qu'il sera bon de comprendre avant d'aller plus loin.

Comment l'UX et le SEO sont-ils affectés par une politique de cache ?

L'expérience utilisateur (UX) et l'optimisation des moteurs de recherche (SEO) sont étroitement liées. Selon Google, des études montrent que les utilisateurs se soucient de la réactivité du site, de sorte que Google classe plus de pages de réactivité plus haut.

Si les actifs statiques sont mis en cache efficacement, la page s'affichera plus rapidement en raison du temps réduit nécessaire pour charger ces actifs. La réduction du temps conduit à des améliorations des principaux éléments vitaux du Web tels que LCP et FID et, finalement, à un meilleur classement dans les moteurs de recherche.

Vous pouvez en savoir plus sur l'impact des principaux éléments vitaux du Web sur le classement des pages ici.

Comment réparer les ressources statiques de service avec un problème de politique de cache efficace

Corriger manuellement

Servir des actifs statiques avec une politique de cache efficace n'est pas un paramètre spécifique à WordPress, vous pouvez le définir manuellement en modifiant le fichier de configuration de votre serveur Web ou en utilisant un plugin comme l'hébergement 10Web Booster pour vous assurer que votre site est configuré avec des paramètres de mise en cache optimisés.

Cette section couvrira l'édition directe des fichiers de configuration d'un serveur Web pour activer le contrôle du cache et expire les en-têtes HTTP sur vos serveurs, de sorte que lorsqu'il sert des ressources statiques, il applique les en-têtes HTTP dans la réponse.

Lorsqu'une ressource est demandée, le serveur Web répond avec la ressource et quelques informations supplémentaires dans ce qu'on appelle les en-têtes HTTP. Considérez les en-têtes HTTP comme des métadonnées sur la connexion. Dans le cas de la mise en cache, les en-têtes HTTPCache-ControletExpirescontrôlent la manière dont nous mettons en cache un actif.

L' en-tête cache-control contient des instructions indiquant si et/ou comment mettre en cache l'actif statique. Il existe de nombreuses directives pour le contrôle du cache, alors comprenons certaines des plus populaires.

Voici quelques exemples de ce à quoi peut ressembler un en-tête de contrôle de cache.

Exemple : mettre en cache un actif pendant sept jours
Cache-Control: max-age=604800

Exemple : peut être stocké dans un cache partagé jusqu'à sept jours
Cache-Control: public, max-age=604800

Exemple : Peut être stocké, mais doit être revalidé à chaque requête
Cache-Control: no-cache

Exemple : ne peut pas être mis en cache
Cache-Control: no-store

L'en-tête cache-control est plus récent et a plus d'options, mais dans le cas où cache-control n'est pas pris en charge, l'en-tête HTTP expires accomplit la même tâche d'en-tête et indique la durée de validité d'un actif avant de nécessiter une nouvelle validation. (Notez que la directive max-age dans l'en-tête Cache-Control a priorité sur Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Modifier directement une configuration de serveur

Tout d'abord, examinons la «voie difficile» afin de comprendre ce qui se passe lorsque nous utilisons d'autres outils et services qui nous facilitent la tâche.

apache

Dans le serveur Apache HTTP, l'extrait de code suivant peut être ajouté à une définition de site ou à un fichier .htaccess.

Expliquant cet extrait, il indique que tout élément dont l'extension correspond à .ico ou .pdf, etc. aura l'en-tête Cache-Control défini pour l'élément.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Avec Apache, de nombreux hébergeurs vous offrent la possibilité d'ajouter des directives à un fichier .htaccess. Notez que bien qu'il s'agisse d'un moyen simple d'ajouter à la configuration du serveur, l'utilisation de fichiers .htaccess est connue pour entraîner des baisses de performances négatives au niveau du serveur.

Nginx

Dans Nginx, cet extrait peut être ajouté à un bloc de serveur.

Expliquant cet extrait, il indique que tout élément dont l'extension correspond à .ico ou .pdf, etc. aura à la fois les en-têtes expires et cache-control définis.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Pour Apache et Nginx, nous montrons comment modifier/ajouter des en-têtes. Nous montrons les en-têtes particuliers que nous utilisons pour la mise en cache, mais la méthode peut être utilisée pour toute autre forme de mise en cache.

Réparer avec un plugin WordPress

Si ce qui précède semble beaucoup, c'est parce que c'est le cas. La modification des configurations de serveur et la mise à jour des modifications manuelles prennent du temps et sont sujettes aux erreurs.

Le plan gratuit 10Web Booster peut configurer Apache pour ajouter des en-têtes pour les actifs statiques, et il ajoute également des en-têtes pour les pages Web mises en cache. Si vous n'utilisez pas déjà l'hébergement 10Web et que votre hôte utilise Apache, c'est un excellent moyen de commencer à mettre en œuvre une politique de cache efficace.

Si vous avez besoin de plus d'options ou de plus de contrôle sur les en-têtes HTTP, vous pouvez utiliser 10Web Booster Pro. 10Web Booster Pro tire parti de son Cloudflare. Lorsque vous utilisez Cloudflare, il ajoute les en-têtes de contrôle du cache à vos ressources statiques et pages mises en cache. Cela contourne toutes les configurations ou restrictions de serveur, car vos visiteurs reçoivent directement les fichiers de Cloudflare.

Ce qui fait du plugin 10Web Booster le meilleur choix ici, c'est qu'il fait tout cela et le fait automatiquement. Vous n'avez pas besoin de gérer les configurations de serveur ou les fichiers .htaccess.

Alternativement, si vous utilisez 10Web Hosting, il implémente automatiquement la mise en cache et vous n'avez pas à vous soucier de l'ajout d'en-têtes pour les actifs statiques.

Vous ne parvenez toujours pas à résoudre le problème ? Essayez ces deux conseils

Si vous avez mis en œuvre les étapes ci-dessus et que vous constatez toujours que des ressources statiques de service avec une stratégie de cache efficace s'affichent toujours dans vos rapports, voici quelques autres choses que vous pouvez essayer.

Vérification que les fichiers sont mis en cache

Si GTMetrix et PageSpeed ​​signalent toujours que vous devriez diffuser des actifs statiques avec une politique de cache, vous souhaiterez peut-être vérifier que votre implémentation a réellement apporté les modifications attendues.

Dans la plupart des navigateurs, il existe un moyen simple de vérifier si les fichiers proviennent d'un cache ou non.

Dans Chrome, sous Affichage et Développeur, sélectionnez Outils de développement :

Sous l'onglet Réseau, vous pourrez identifier les fichiers qui proviennent de (cache disque) ou (cache mémoire). La différence entre le disque et le cache mémoire est que la mémoire disparaît lorsque le navigateur est fermé et que le disque persiste lorsque le navigateur est fermé.

Augmenter le temps de cache

Selon les statistiques de Lighthouse, une politique de cache efficace est celle qui a un ratio élevé d'accès au cache par rapport aux échecs, ce qui signifie que la majorité des actifs statiques ont un âge maximum ou un ensemble d'expirations. Pour les sites qui sont en production ou qui ne changent pas souvent, un âge maximum de trois mois voire un an est recommandé.

Ils recommandent de commencer une politique d'environ trois mois (environ 7890000 secondes), si vous l'avez déjà défini, cela pourrait valoir la peine d'augmenter l'âge maximum à un an ou plus si votre site est en ligne.

Conclusion

Être en mesure de servir des actifs statiques avec une politique de cache efficace améliore la vitesse des performances de votre site Web.

Cet article a couvert ce que sont les actifs statiques, ce que sont les en-têtes HTTP et a examiné comment activer et vérifier que les en-têtes de mise en cache sont en place.

Nous avons examiné les rouages ​​​​de l'activation manuelle des en-têtes en modifiant les configurations de serveur et comment nous pouvons le rendre plus facile en utilisant un plugin WordPress comme 10Web Booster, et en tirant parti de l'intégration de 10Web avec Cloudflare pour avoir accès pour définir les en-têtes HTTP de contrôle du cache.

10Web Booster est bien plus qu'un simple plugin de mise en cache. Vous pouvez en savoir plus sur les nombreuses fonctionnalités de mise en cache et d'optimisation de la vitesse dans cet article 10Web Booster .

FAQ