Servir des actifs statiques avec une politique de cache efficace (3 méthodes)

Publié: 2022-04-12

Lorsque vous servez des actifs statiques avec une politique de cache efficace, le navigateur de l'utilisateur stocke ces fichiers localement et moins de temps sera nécessaire pour charger la page. Normalement, dès qu'une page est chargée, toutes les ressources de cette page, telles que HTML, CSS, JavaScript et les images, doivent être téléchargées.

La mise en cache du navigateur permet au navigateur de récupérer des actifs statiques tels que CSS, JavaScript et des images à partir de son cache local. Par conséquent, les pages se chargent plus rapidement. Le contenu mis en cache signifie que les visites ultérieures sur une page seront plus rapides que la première visite d'un utilisateur, mais pas lors de la première visite.

Table des matières

Qu'est-ce que le cache ?

Un cache est une couche de stockage de données à haute vitesse dans l'informatique qui enregistre une partie des données qui est souvent de nature temporaire afin que les demandes ultérieures pour ces données puissent être traitées plus rapidement que l'accès à l'emplacement de stockage principal des données. La mise en cache vous permet de réutiliser rapidement des données précédemment récupérées ou calculées.

Comment fonctionne réellement la mise en cache ?

Les données dans un cache sont généralement conservées dans du matériel à accès rapide comme la RAM (mémoire à accès aléatoire), mais elles peuvent également être utilisées en conjonction avec un composant logiciel. L'objectif fondamental d'un cache est d'accélérer la récupération des données en éliminant le besoin de contacter la couche de stockage plus lente derrière lui.

Contrairement aux bases de données, qui stockent des données entières et durables, un cache stocke souvent une partie des données de manière transitoire.

Avantages de la mise en cache

Passons en revue quelques avantages de la mise en cache.

Améliorez les performances de votre application

La lecture de données à partir d'un cache en mémoire est incroyablement rapide car la mémoire est plus rapide que le disque (magnétique ou SSD) (inférieure à la milliseconde). Cet accès aux données nettement plus rapide améliore les performances globales de l'application.

La charge du backend doit être réduite

En déplaçant une partie de la charge de lecture de la base de données principale vers la couche en mémoire, la mise en cache réduit le stress sur votre base de données, l'empêchant de souffrir de performances faibles sous une charge importante ou même de tomber en panne sous des pics.

Les hotspots dans la base de données doivent être éliminés

De nombreuses applications ont tendance à récupérer un sous-ensemble de données plus fréquemment que le reste. Par conséquent, des points chauds peuvent se produire dans la base de données et vous devrez peut-être surprovisionner ses ressources en fonction des exigences de débit pour les données les plus fréquemment utilisées. Pour les données fréquemment consultées, un cache en mémoire réduit les exigences de surprovisionnement tout en offrant des performances rapides et prévisibles.

Réduisez le coût de votre base de données

Les opérations d'entrée/sortie par seconde (IOPS) peuvent être effectuées par une seule instance de cache, ce qui lui permet de remplacer plusieurs instances de base de données et de réduire considérablement les coûts. C'est crucial si la base de données principale facture en fonction de la quantité de données. Il pourrait y avoir une grande différence de prix sous certaines conditions.

Des performances prévisibles

Faire face aux pics d'utilisation des applications est un problème répandu dans les systèmes modernes. L'augmentation de la charge de la base de données entraîne des temps de récupération des données plus longs, ce qui rend les performances globales de l'application imprévisibles. Ce problème peut être résolu en utilisant un cache en mémoire à haut débit.

Augmenter le nombre de personnes qui lisent (IOPS)

Les systèmes en mémoire ont des taux de requêtes (IOPS) sensiblement plus élevés qu'une base de données sur disque comparable, en plus d'avoir une latence réduite. Lorsqu'elle est utilisée comme cache secondaire distribué, une seule instance peut traiter des centaines, voire des milliers de requêtes par seconde.

Qu'est-ce que la mise en cache des ressources ?

La mise en cache est une notion simple. Lorsqu'un navigateur télécharge un actif, il utilise la politique du serveur pour déterminer s'il doit ou non le télécharger à nouveau lors de visites ultérieures. Si le serveur ne fournit pas de stratégie, le navigateur est utilisé par défaut, ce qui signifie généralement la mise en cache des fichiers pour cette session.

Qu'est-ce que la mise en cache des ressources statiques ?

spécifier la durée pendant laquelle le navigateur doit temporairement conserver ou mettre en cache la ressource. Toutes les requêtes ultérieures pour cette ressource sont servies à partir de la copie locale du navigateur plutôt qu'à partir du réseau.

Chaque fois qu'un visiteur de votre site récupère une nouvelle version de quelque chose qui n'est pas déjà mis en cache dans le navigateur ou le serveur, vous utilisez une politique de cache inefficace. Quand, en réalité, vous pouvez leur servir du contenu enregistré en cache et prêt à l'emploi.

Lisez aussi : Comment réparer les permaliens cassés dans WordPress

Qu'est-ce qu'une politique de cache efficace ?

Si vos fichiers statiques ne changent pas (ou si vous disposez d'un mécanisme de contournement de cache acceptable), nous vous suggérons de définir votre politique de cache sur 6 mois ou 1 an.

Des éléments tels que les fichiers CSS/JS globaux, les logos, les graphiques, etc. changent rarement sur les sites Web finis, donc 6 mois ou un an est une expiration de cache équitable avec laquelle travailler.

Bien sûr, si vous modifiez fréquemment les fichiers statiques ci-dessus, vous pouvez choisir un délai d'expiration du cache plus court tant qu'il est supérieur à 3 mois.

Servir des actifs statiques avec une politique de cache efficace

Il existe plusieurs façons de servir des fichiers statiques en utilisant une politique de cache efficace, nous discuterons de 3 méthodes

  1. Utilisation du fichier .htaccess si vous utilisez LiteSpeed ​​Enterprise ou Apache
  2. Utilisation du cache LiteSpeed
  3. Utilisation du plug-in W3 Total Cache

Servir les actifs statiques à l'aide du fichier .htaccess sur Apache et LiteSpeed ​​Enterprise

Remarque : Si vous utilisez OpenLiteSpeed ​​ou NGINX, cette méthode ne fonctionnera pas.

Connectez-vous à votre tableau de bord WordPress

Cliquez sur Plugins -> Ajouter nouveau dans le menu de gauche

Recherchez "Gestionnaire de fichiers". Installer et activer le plugin

Cliquez sur "Gestionnaire de fichiers" dans le menu de gauche

Dans le dossier public_html, faites un clic droit sur .htaccess et cliquez sur renommer

Changer le nom du fichier (.htaccess-error)

Cliquez sur l'icône "nouveau fichier" en haut

Nommez le fichier ".htacess"

Collez le code suivant et enregistrez et fermez

 <IfModule mod_expires.c> ExpiresActive On # CSS, JavaScript ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" # Images ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" # Video ExpiresByType video/webm "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" # Others ExpiresByType application/pdf "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule>

Servir des actifs statiques à l'aide de LiteSpeed ​​Cache

Vous devez installer et activer le plugin LiteSpeed ​​Cache, une fois installé, suivez le guide ci-dessous :

  • Accédez à votre tableau de bord WordPress
Servir des actifs statiques avec une politique de cache efficace
  • Cliquez sur LiteSpeed ​​Cache -> Cache dans le menu de gauche
  • Cliquez sur l'onglet "Navigateur" en haut
  • Activez la bascule "Cache du navigateur"
  • Cliquez sur "Enregistrer les modifications"

Servir des actifs statiques à l'aide de W3 Total Cache

Installez et activez d'abord le plugin W3 Total Cache, puis suivez le guide ci-dessous.

  • Accédez à votre tableau de bord WordPress
  • Cliquez sur Performances -> Cache du navigateur dans le menu de gauche
  • Faites défiler jusqu'à "Médias et autres fichiers". Modifiez la "Durée de vie de l'en-tête d'expiration" à au moins 15552000s (180 jours).
  • Cliquez sur "Enregistrer tous les paramètres"

Conclusion

Lorsque vous fournissez des ressources statiques avec une stratégie de cache efficace, le navigateur de l'utilisateur enregistre ces fichiers localement, ce qui réduit le temps nécessaire au chargement de la page. Toutes les ressources d'une page, telles que HTML, CSS, JavaScript et images, doivent être téléchargées dès qu'elles sont chargées.