Comment mettre en cache un site Web pour les performances de pointe: un guide du débutant à la mise en cache Web

Apprendre à mettre en cache un site Web est essentiel. La mise en cache est importante dans les performances du site Web, l'expérience utilisateur et le référencement. Il existe plusieurs façons de la mettre en œuvre et vous apprendrez tout à ce sujet dans ce post.

Ci-dessous, nous discutons de ce qu'est la mise en cache, de son fonctionnement, de ses avantages et des différents types qui existent. Après cela, nous vous montrons trois méthodes différentes que vous pouvez utiliser pour permettre la mise en cache de votre site Web et une étude de cas pour souligner son impact sur les performances. Enfin, nous couvrirons rapidement comment et pourquoi effacer un cache de site Web.

Qu'est-ce que la mise en cache?

Au niveau le plus élémentaire, la mise en cache signifie stocker des copies des fichiers dans un cache - un emplacement de stockage temporaire - pour les rendre disponibles pour un accès rapide. Il s'agit d'une méthode utilisée dans de nombreux domaines de logiciels et de technologies, y compris les navigateurs, les programmes et les systèmes d'exploitation.

Étant donné que les sites Web se composent de différents types de fichiers, ils sont également parfaitement adaptés à la mise en cache. Vous pouvez stocker les fichiers HTML, CSS, JavaScript et Image de votre site pour permettre aux navigateurs d'y accéder plus rapidement et d'afficher votre site Web plus rapidement.

Certains types de contenu conviennent plus à la mise en cache que d'autres. Par exemple, le contenu statique, ce qui signifie que les éléments du site qui ne changent pas souvent, sont parfaits pour cela. Le logo de votre site Web est un bon exemple car il est peu probable que vous le changez souvent.

D'un autre côté, le contenu qui change fréquemment est une autre histoire. Bien que vous puissiez également le mettre en cache, vous devez mettre en place des règles pour vous assurer que les visiteurs ne voient pas une version obsolète. Plus à ce sujet bientôt.

Les avantages de la mise en cache pour les sites Web

La raison principale de mettre en cache un site Web est d'améliorer les performances. Si un navigateur peut utiliser plus rapidement les fichiers dont il a besoin pour afficher un site Web, les visiteurs voient le site plus rapidement.

Cela conduit à une meilleure expérience utilisateur, ce qui rend les visiteurs plus susceptibles de rester sur votre site plus longtemps, de prendre les mesures souhaitées comme l'achat d'un produit ou de revenir plus tard. Toutes les bonnes nouvelles pour votre taux de conversion et votre résultat net.

La vitesse du site est également quelque chose que les moteurs de recherche se soucient du souci. Google l'utilise comme facteur de classement depuis plus d'une décennie. De plus, ses principales métriques Web Vitals mesurent spécifiquement à quelle vitesse une page apparaît pour les utilisateurs et à la rapidité avec laquelle il répond à la saisie des utilisateurs.

De plus, la mise en cache élimine le stress de votre serveur. Il réduit le nombre de fichiers Les visiteurs répétés doivent télécharger à partir de votre site et le nombre de demandes de votre serveur à traiter en même temps. De plus, la mise en cache vous permet même d'externaliser une partie du travail sur des serveurs externes.

Ceci est particulièrement important lorsque votre site Web devient plus populaire. La mise en cache aide à empêcher votre serveur de se dépasser. De plus, cela permet d'économiser la bande passante et les coûts si vous êtes sur un plan d'hébergement limité.

Quels sont les types de mise en cache?

Il est possible de mettre en cache un site Web à différents niveaux du processus de chargement. Il existe deux types principaux: la mise en cache côté serveur et côté client.

La mise en cache côté client se rapporte à tout ce qui se passe sur l'ordinateur ou dans le navigateur (c'est-à-dire le «client») de vos visiteurs. La mise en cache du serveur, en revanche, se produit sur la machine qui contient les fichiers de votre site Web.

Cache de navigateur / client

Lorsque les navigateurs affichent un site Web, ils doivent télécharger beaucoup de données. Pour raccourcir le temps de chargement d'une visite répétée, ils stockent une grande partie du contenu sur le disque dur du visiteur où il est plus rapide d'accès.

Un exemple de cela est la mise en cache DNS. Cela signifie enregistrer localement l'adresse IP associée à un site Web afin que le navigateur n'ait pas à le rechercher la prochaine fois que vous souhaitez accéder au site.

De plus, les navigateurs vérifient toujours leur cache pour voir si des actifs requis - comme les images et autres fichiers - sont déjà là. De cette façon, ils n'ont pas besoin de contacter autant le serveur.

Cache de serveur

Il existe différentes formes de mise en cache de serveur. Ils diffèrent principalement dans le type et la quantité de données enregistrées sur le serveur:

• Cache de page: Cela signifie enregistrer une version HTML déjà compilée d'une page afin qu'elle ne soit pas créée à partir de zéro pour chaque visiteur.

• Cache d'objet: Ici, le serveur enregistre les demandes de réutilisation de la base de données, telles que les recherches de produits dans une boutique en ligne.

• Cache de fragments: décrit le stockage des éléments de site Web spécifiques, généralement des ressources statiques comme les images.

• CACHING CDN: Dans ce cas, des copies des données de votre site Web se trouvent sur des serveurs supplémentaires à différents endroits. Il permet aux visiteurs de le télécharger plus rapidement à partir du serveur le plus proche d'eux.

Comment fonctionne la mise en cache

Jetez un œil à l'image suivante:

À partir de ce qui précède, il est déjà facile de comprendre comment fonctionne la mise en cache:

1. L'utilisateur type dans une URL et le navigateur Web vérifie s'il a les données de la page demandée dans le cache.

2. Si c'est le cas, il envoie un message au serveur déclarant les versions de fichiers qu'il a enregistrées.

3. Le serveur vérifie s'il existe des versions plus récentes et, s'il y en a, envoie les ressources mises à jour. S'ils ont déjà été demandés, le serveur peut les transmettre de son propre cache sans les traiter à partir de zéro.

4. Le navigateur Web affiche la page Web demandée à l'aide des données existantes à partir de son cache et de toutes les données envoyées sur le serveur.

Il est maintenant temps de parler de la technologie qui rend la mise en cache un site Web possible: les en-têtes de mise en cache.

Comprendre les en-têtes de demande et de réponse

Les en-têtes de demande et de réponse sont de petits morceaux de texte échangés par les navigateurs et les serveurs. Ils incluent des informations importantes et des instructions pour les données transmises entre eux.

Une chose qu'ils font est de configurer le comportement de mise en cache et plusieurs en-têtes existent à cette fin. Ils incluent le contrôle du cache, les expires, le dernier modifié et l'ETAG. Les en-têtes de mise en cache fonctionnent essentiellement de deux manières:

1. Déclarez si un fichier de site Web doit être mis en cache du tout, pendant combien de temps et par qui (navigateurs et / ou serveurs).

2. Marquez l'âge et la «version» d'un fichier afin que les navigateurs ne le téléchargent que s'il existe une nouvelle édition sur le serveur.

Tout cela permet de réduire le nombre de fichiers et la quantité de données nécessaires pour être transmises pour charger un site Web, contribuant à accélérer le processus. Et bien que les en-têtes de mise en cache puissent sembler un peu techniques, ils sont importants à connaître, surtout si vous décidez de configurer la mise en cache sur votre serveur à la main.

Comment mettre en cache un site Web: 3 options à considérer

Après toute cette théorie, discutons de la façon de mettre en cache un site Web en termes pratiques.

1. Activer la mise en cache manuellement

La configuration de la mise en cache à la main est l'approche la plus compliquée car elle vous oblige à configurer manuellement les en-têtes de mise en cache sur votre serveur.

La première étape consiste à vérifier le statu quo, car votre fournisseur d'hébergement ou votre logiciel de site Web a peut-être déjà fait une partie du travail pour vous. Pour cela, ouvrez votre site dans un navigateur, accédez aux outils du développeur (CTRL / CMD + Shift + I dans la plupart des navigateurs), tand Hen accédez à l'onglet réseau (vous devrez peut-être recharger la page pour voir quelque chose ici).

Cliquez sur n'importe quelle ressource pour voir ses en-têtes de demande et de réponse.

Après cela, vous devez définir votre stratégie de mise en cache. Cela sera différent pour chaque cas d'utilisation. Par exemple, un site Web de nouvelles a besoin d'intervalles de mise en cache plus courts qu'un site de brochure. Le contenu des sites d'information change à la minute tandis que les brochures restent en grande partie les mêmes.

Généralement, vous souhaitez essayer d'équilibrer la durée du cache et la fraîcheur des données:

• Cache plus longtemps statiques, par exemple les fichiers multimédias et le contenu téléchargeable. Par exemple, vous pouvez probablement mettre en cache vos fichiers de logo et de police pour le temps maximum d'un an.

• Utilisez le contrôle du cache: pas de magasin pour les ressources qui ne devraient jamais être mises en cache.

• Incluez un validateur tel que le dernier modifié ou ETAG pour assurer la fraîcheur des ressources sans sacrifier les avantages de la mise en cache. Certains caches Web nécessitent également un en-tête de contrôle de l'âge et un validateur pour fonctionner.

L'étape suivante consiste à implémenter les paramètres choisis sur votre serveur. Comment faire cela dépend du logiciel sur lequel votre serveur fonctionne. Voici des instructions pour les configurations les plus courantes:

• nginx

• Apache

Alternativement, votre fournisseur d'hébergement peut également offrir une mise en cache et la possibilité de l'activer à partir de votre panneau d'hébergement.

2. Utilisez un CDN

Une autre façon de mettre en cache votre site Web est de vous inscrire à un CDN. Pour cela, vous devez d'abord choisir un fournisseur CDN. Nous utiliserons CloudFlare comme exemple ici car c'est l'un des services les plus populaires.

Commencez par vous inscrire à votre CDN de choix. Allez sur leur site Web et créez un compte.

Choisissez un plan qui correspond à vos besoins et fournissez l'adresse de votre site Web.

Après cela, vous devez mettre à jour vos paramètres DNS. Le fournisseur CDN analysera vos enregistrements actuels, puis vous affichera leurs serveurs de noms.

Avec cela en main, connectez-vous à votre registraire de domaine (par exemple, NameCheap, GoDaddy ou Google Domains), trouvez la section Paramètres DNS et remplacez les serveurs de noms existants par ceux qui vous sont donnés par votre CDN.

Enregistrez vos modifications, puis attendez. Les modifications du DNS peuvent prendre quelques heures pour se propager pleinement. Une fois terminé, votre site Web sera acheminé avec succès via le CDN. La dernière étape consiste à s'assurer que le CDN a une mise en cache activée.

3. Utilisez un plugin de mise en cache

Enfin, si vous utilisez un site Web WordPress, vous pouvez utiliser un plugin de performances comme WP Rocket. Il s'occupe de tout ce qui concerne la mise en cache automatiquement, vous n'avez donc pas à faire face aux pièces techniques. De plus, tout ce que vous avez à faire est d'installer et d'activer le plugin.

Après cela, la mise en cache est immédiatement active sur votre site, y compris un cache dédié pour les appareils mobiles. Selon les règles avancées , vous pouvez affiner davantage votre cache.

Entre autres options, vous pouvez déterminer la durée de vie de mise en cache et définir des pages, des cookies et des agents utilisateur pour lesquels vous ne souhaitez pas utiliser la mise en cache. Vous trouverez plus d'informations dans la documentation.

En plus de la mise en cache, WP Rocket offre de nombreuses autres fonctionnalités pour accélérer votre site WordPress, notamment:

• Chargement paresseux pour les images et les vidéos

• Ressources de blocage de rendu

• Préchargement de cache, de liens, de fichiers externes et de polices

• Polices Google à l'auto-hébergement

• Optimisation de la base de données

• Capacité à se connecter facilement à un CDN, y compris RocketCDN, c'est-à-dire WP Rocket Own CDN.

De plus, WP Rocket implémente de nombreuses améliorations de performances supplémentaires en arrière-plan. Parmi eux, il y a la compression GZIP, la réduction des fichiers CSS et JavaScript, et l'optimisation des images au-dessus du pli pour améliorer la peinture plus importante.

L'impact des performances de la mise en cache d'un site Web: une étude de cas

Pour examiner l'effet de la mise en cache sur l'amélioration de la vitesse du site Web dans la vie réelle, nous avons mis en place un site de test avec un contenu factice et l'avons fait passer dans PageSpeed ​​Insights avant et après l'activation de WP Rocket.

Voici les résultats des appareils mobiles sans mise en cache:

Voyons maintenant ce qui se passe après l'activation de la mise en cache:

Bien que les effets ne soient pas énormes, ils sont perceptibles. En particulier, l'amélioration de la valeur de l'indice de vitesse de trois secondes n'est rien à se moquer.

Comme nous l'avons discuté tout au long de l'article, la mise en cache a le plus d'impact sur les visiteurs répétés. Étant donné que PageSpeed ​​Insights ne profite pas à dessein de ce que la mise en cache a à offrir, il n'est pas étonnant que les effets ne soient pas plus importants. Il devrait être plus visible pour les visiteurs répétés de votre site Web.

Si vous vous demandez, ci-dessous est ce qui se passe lorsque vous allumez quelques améliorations de vitesse supplémentaires dans WP Rocket, comme le retrait du CSS inutilisé, le report JavaScript, le chargement paresseux pour les images et le préchargement . Il suffit de cocher quelques cases.

Comment effacer le cache du site Web

La compensation du cache de votre site Web peut être nécessaire pour résoudre les problèmes de résolution, en ajoutant de nouvelles fonctionnalités et en veillant à ce que le dernier contenu soit visible pour les visiteurs. Naturellement, comme la mise en cache se produit à différents niveaux, il existe également différentes façons de la vider.

Supprimer le cache du navigateur

La méthode exacte pour vider le cache du navigateur dépend du navigateur que vous utilisez, mais tous ont des options dans leurs paramètres. Dans Chrome, vous le trouvez sous la confidentialité et la sécurité> supprimer les données de navigation .

Effacer le cache du serveur

Si la mise en cache a été implémentée sur votre serveur, votre fournisseur d'hébergement a probablement une option pour l'effacer.

Videz le cache de votre CDN

La purge de votre cache CDN se produit naturellement via votre fournisseur CDN. Par exemple, dans CloudFlare, l'option est disponible sous la mise en cache> Configuration> Purge Cache .

Purge Cache sur votre site Web

Si vous utilisez un plugin pour mettre en cache votre site Web, il a généralement un bouton quelque part qui vous permet d'effacer le cache. WP Rocket purge automatiquement le cache du site Web à des moments appropriés, comme lorsque vous modifiez ses paramètres, publiez un nouveau contenu, modifiez votre site Web ou lorsque la durée de vie du cache s'épuise.

Si vous souhaitez le faire manuellement, vous pouvez trouver cette option directement sur votre tableau de bord sous Paramètres> WP Rocket dans votre dossier WordPress.

Vous avez également la possibilité d'effacer le cache pour les pages individuelles soit à l'intérieur de l'éditeur WordPress, soit dans le menu Pages ou Posts en survolant les entrées.

Comment cachez-vous un site Web? Maintenant tu sais

La mise en cache est l'un des moyens les plus fondamentaux de rendre votre site Web plus rapidement. Il s'agit d'une méthode simple pour réduire la quantité de données nécessitant d'être transmises pour que les visiteurs consultent votre site Web.

La mise en cache est disponible à différents niveaux du processus de chargement et peut cibler différents éléments du site Web, bien que les principes restent les mêmes.

Utilisez WP Rocket pour implémenter automatiquement la mise en cache sur votre site WordPress et profitez de dizaines d'autres fonctionnalités de performances et meilleures pratiques pour rendre votre site Web immédiatement plus rapidement. Le plugin est livré avec une garantie de remboursement de 14 jours, vous pouvez donc le tester complètement sans risque.