Mise en cache des pages du site à l'aide de .htaccess - Cache

imprimer · Время на чтение: 9мин · par · Publié · Mis à jour

reproduireÉcouter l'article

Mise en cache des fichiers et pages statiques.

Mise en cache des pages du site avec .htaccess. Une étape d'optimisation technique tout aussi importante, activation de la compression gzip ou alors Minification CSS. L'activation des pages et des fichiers de cache vous permettra d'augmenter considérablement la vitesse du site. Et aussi parfois réduire la charge sur le serveur. Grâce à de simples manipulations, votre site se mettra à voler.

Dans cet article, nous parlerons de tous les aspects de ce sujet. Quelle est l'importance du cache pour le site et son application. Je vais décrire des exemples que vous pouvez appliquer dans la pratique. De plus, il y aura un bref examen de quelques plugins de cache assez bons pour WordPress.

Qu'est-ce qu'un cache de site - comment la mise en cache affecte-t-elle un site

En termes simples, la mise en cache - il s'agit d'enregistrer des informations sur le site de l'utilisateur dans le navigateur. Ainsi, la charge principale sur le serveur est réduite. Une partie importante du site n'aura pas besoin d'être chargée, puisque sa partie sauvegardée sera chargée par le navigateur de l'utilisateur. C'est une méthode extrêmement efficace pour accélérer le chargement du site.

Cache ou cache ou Cache est un presse-papiers intermédiaire avec un accès rapide. Conserver et contenir les informations fréquemment demandées. L'accès aux données en cache est plus rapide qu'à partir de sources de mémoire plus lentes. Mais il y a une limite de mémoire. En langage clair, Cache est une courte mémoire.

Dans le même temps, la mise en cache ne nuit pas à l'utilisateur. Mais cela améliore l'affichage de votre projet dans son navigateur. Comment cela peut-il arriver! Lorsque l'utilisateur visite le site. Son chargement est un peu plus lent qu'il ne devrait l'être. Cela est dû au fait que le navigateur à ce moment enregistre une copie du site. Dans une plus large mesure, cela s'applique à:

  1. aux logos ;
  2. petites images;
  3. fichiers css ;
  4. structure générale des pages.

Ainsi, une partie du site se trouve en permanence dans la mémoire (cache) du navigateur de l'utilisateur. De ce fait, lors du rechargement du site, le visiteur obtient la vitesse de réponse la plus élevée possible. Le navigateur décharge à ce moment certains des éléments de sa mémoire. Et le site, il n'est pas nécessaire de retransmettre une grande quantité d'informations.

Lorsque le site a un cache activé et configuré. Une certaine partie sera sauvegardée pendant la période requise dans le cache local du navigateur du visiteur. Quelles pages Web se chargeront beaucoup plus rapidement lors de visites répétées.

Comment activer et configurer la mise en cache du site

Ce n'est pas du tout difficile à faire. Nous continuerons à travailler avec le fichier htaccess, qui définit les règles du serveur. Comment travailler avec, j'ai décrit dans de nombreux articles. Je vais donc droit au but. Selon la norme, la mise en cache est définie pour les fichiers nécessaires et pour une certaine période de temps. Après l'expiration du délai imparti pour stocker le fichier, sa version actuelle sera à nouveau téléchargée à partir du serveur. Pour cela, vous avez besoin de :

  • Créez une construction de type FilesMatch. Dans celui-ci, nous spécifions les extensions de fichier nécessaires pour la mise en cache.
  • Ensuite, nous spécifions l'en-tête Cache-Control avec la variable max-age. Ici, Cache-Control est l'en-tête de réponse du serveur. Max-age est une variable qui spécifie le temps de stockage du fichier en secondes.

Une liste typique d'extensions utilisées dans la construction FilesMatch :

(ico|pdf|flv|jpg|jpeg|png|gif|webp|js|css|swf|x-html|css|xml|js|woff|woff2|ttf|svg|eot)(\.gz)

Les fichiers que vous ne souhaitez pas mettre en cache n'ont pas besoin d'être inclus dans la liste de la construction FilesMatch.

Exemple de code Jeu d'en-têtes Cache-Control

Contrôle du cache #

# 30 jours

Jeu d'en-tête Cache-Control "max-age=2592000, public"

# 30 jours

Jeu d'en-tête Cache-Control "max-age=2592000, public"

# 2 jours

Jeu d'en-tête Cache-Control "max-age=172800, public, must-revalidate"

Valeur -#- commentaire ! Comme vous pouvez le voir, les commentaires indiquent les termes pour lesquels les fichiers seront enregistrés. Il existe également une option pour désactiver le cache forcé. Cette option convient aux fichiers dynamiques. Plus lié aux scripts et à divers scénarios.

Un exemple de la construction "FilesMatch" qui désactive la mise en cache forcée


En-tête non défini Cache-Control

Comme vous pouvez le voir, il n'y a pas de délais. Par conséquent, ces extensions de fichiers ne seront pas mises en cache. Dans cette conception, vous pouvez ajouter vos extensions de fichier.

Il existe également un autre moyen de gérer le cache - qui est utilisé par de nombreux plugins sur WordPrees. Dans cette méthode, nous utiliserons le module mod_expires. Ce module a la capacité de contrôler les en-têtes de réponse HTTP côté serveur. Ici, vous pouvez définir l'heure principale de stockage des données dans le cache.

Il dispose de plusieurs paramètres pour la durée de stockage des données :

  1. par temps d'accès client ;
  2. soit par la dernière modification du fichier ;
  3. réglage de l'heure;

Exemple de code de cache simple

# expire les en-têtes - 2678400s = 31 jours

Expire Actif le
ExpiresDefault "accès plus 1 secondes"
ExpiresByType text/html "accès plus 7200 secondes"
ExpiresByType image/gif "accès plus 2678400 secondes"
ExpiresByType image/jpeg "accès plus 2678400 secondes"
ExpiresByType image/png "accès plus 2678400 secondes"
ExpiresByType text/css "accès plus 518400 secondes"
ExpiresByType text/javascript "accès plus 2678400 secondes"
Application ExpiresByType/x-javascript "accès plus 2678400 secondes"

Un cas d'utilisation plus sérieux pour Cache

Expire Actif le
ExpireByType texte/css A31536000
ExpiresByType texte/composant x A31536000
Application ExpiresByType/x-javascript A31536000
Application ExpiresByType/javascript A31536000
ExpireByType texte/javascript A31536000
ExpiresByType texte/x-js A31536000
ExpireByType texte/html A3600
ExpiresByType texte/texte enrichi A3600
ExpireParType image/svg+xml A3600
ExpiresByType texte/simple A3600
ExpireByType text/xsd A3600
ExpiresByType texte/xsl A3600
ExpiresByType texte/xml A3600
Expire par type vidéo/asf A31536000
Expire par type vidéo/avi A31536000
ExpireByType image/bmp A31536000
Application ExpiresByType/java A31536000
ExpireByType vidéo/divx A31536000
ExpireByType application/msword A31536000
Application/vnd.ms-fontobject ExpiresByType A31536000
Application ExpiresByType/téléchargement x-ms A31536000
Expire par type image/gif A31536000
Application ExpiresByType/x-gzip A31536000
Image/x-icône ExpiresByType A31536000
Expire par type image/jpeg A31536000
Expire par type image/webp A31536000
Application ExpiresByType/json A31536000
Application ExpiresByType/accès vnd.ms A31536000
ExpireByType audio/midi A31536000
ExpireByType vidéo/quicktime A31536000
ExpireByType audio/mpeg A31536000
ExpireByType vidéo/mp4 A31536000
ExpireByType vidéo/mpeg A31536000
ExpiresByType application/vnd.ms-projet A31536000
Application ExpiresByType/x-font-otf A31536000
Application ExpiresByType/vnd.ms-opentype A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpireByType audio/ogg A31536000
Application ExpiresByType/pdf A31536000
Expire par type image/png A31536000
Application ExpiresByType/vnd.ms-powerpoint A31536000
Expire par type audio/x-realaudio A31536000
ExpireParType image/svg+xml A31536000
Application ExpiresByType/x-shockwave-flash A31536000
Application ExpiresByType/x-tar A31536000
ExpireByType image/tiff A31536000
Application ExpiresByType/x-font-ttf A31536000
Application ExpiresByType/vnd.ms-opentype A31536000
ExpireByType audio/wav A31536000
ExpireByType audio/wma A31536000
Application ExpiresByType/vnd.ms-écriture A31536000
Application ExpiresByType/police-woff A31536000
Application ExpiresByType/police-woff2 A31536000
Application ExpiresByType/vnd.ms-excel A31536000
Application/zip ExpiresByType A31536000

Comme nous pouvons le voir, un grand nombre d'extensions sont concernées ici. Avec la même durée de conservation.

Mise en cache dans le navigateur côté utilisateur pendant 3 à 7 jours ou pendant un an

Ici, la majeure partie des extensions de fichiers seront enregistrées pendant un an. Dans une plus large mesure, cela est utile pour les images, car je pense que peu de gens les modifient. Ainsi, ils seront chargés dans le navigateur du visiteur au cours de l'année.

Mise en cache du navigateur côté utilisateur #

Expire Actif le
ExpireDéfaut "accès 7 jours"
Application ExpiresByType/javascript "accès plus 1 an"
ExpiresByType text/javascript "accès plus 1 an"
ExpiresByType text/css "accès plus 1 an"
ExpiresByType text/html "accès plus 7 jours"
ExpiresByType text/x-javascript "accès 1 an"
ExpiresByType image/gif "accès plus 1 an"
ExpiresByType image/jpeg "accès plus 1 an"
ExpiresByType image/png "accès plus 1 an"
ExpiresByType image/jpg "accès plus 1 an"
Image ExpiresByType/x-icon "accès 1 an"
Application ExpiresByType/x-shockwave-flash "accès 1 an"
ExpiresByType js "accès 3 jours"

Mise en cache du contenu (Flash, CSS, JS, HTML, XML) et des images

Dans cet exemple, nous n'utilisons le cache que pour certains fichiers. Et pour une durée plus courte.

Expire Actif le
Cache d'images #
Image ExpiresByType/x-icon "accès plus 2592000 secondes"
ExpiresByType image/jpeg "accès plus 2592000 secondes"
ExpiresByType image/png "accès plus 2592000 secondes"
ExpiresByType image/gif "accès plus 2592000 secondes"
Cache de contenu # (Flash, CSS, JS, HTML, XML)
Application ExpiresByType/x-shockwave-flash "accès plus 2592000 secondes"
ExpiresByType text/css "accès plus 604800 secondes"
ExpiresByType text/javascript "accès plus 2592000 secondes"
Application ExpiresByType/javascript "accès plus 2592000 secondes"
Application ExpiresByType/x-javascript "accès plus 2592000 secondes"
ExpiresByType text/html "accès plus 600 secondes"
ExpiresByType application/xhtml+xml "accès plus 600 secondes"

La mise en place de la mise en cache des pages et des fichiers du site n'est pas si difficile. L'essentiel est de choisir la bonne stratégie. Tous les exemples ci-dessus, vous pouvez les utiliser à votre discrétion. Testez les stratégies et choisissez la bonne option de code. Ci-dessous, je parlerai de quelques plugins de cache pour WordPress.

Configuration de la mise en cache avec les plugins WordPress

Pour ceux qui utilisent le CMS, WordPress propose une grande variété de plugins de cache. Tous ont une solution complète et une configuration automatique. Il ne devrait pas y avoir de problèmes particuliers lors de l'utilisation de ces plugins. Après avoir installé un tel plugin, il vous suffit d'appliquer les paramètres dont vous avez besoin. Le plugin les enregistrera automatiquement dans le fichier htaccess.

Cache le plus rapide de WP

WP Fastest Cache Premium Plugin de cache le plus rapide.

Un plugin de mise en cache populaire et assez puissant pour WP. Il a une grande variété de paramètres, y compris Optimisation HTML, CSS et Js. Même un utilisateur novice peut le comprendre.

WP SuperCache

WP Super Cache est un plugin pour accélérer le chargement des pages.

Plugin très populaire ! Excellente fonctionnalité et réglages pratiques. Capable de mettre en cache un grand nombre d'objets différents. La configuration du plugin est très simple.

Cache total W3

Le meilleur plugin de mise en cache WordPress est W3 Total Cache.

Solution puissante pour les grands sites. Le plugin le plus populaire en son genre. Il existe une grande variété de paramètres et de fonctionnalités. Vous devez le configurer avec soin, car il peut provoquer des erreurs critiques. Il y a une possibilité de conflits avec d'autres plugins ou thèmes. Mais en termes de fonctionnalité, un plugin très bon et puissant.

Ce sont les plugins de cache principaux et les plus populaires que j'ai moi-même utilisés. Vous pouvez en choisir en fonction de vos préférences.

Pour terminer

Dans cet article, j'ai essayé de couvrir autant que possible le sujet de la mise en cache. Spécification d'exemples pouvant être utilisés en fonction de vos caractéristiques. La configuration de la mise en cache avec ce guide ira comme sur des roulettes pour vous. J'espère que cet article sera pertinent pendant longtemps. Je vous remercie de votre attention, mais je ne dis pas au revoir. Rendez-vous dans les prochains articles.

Merci d'avoir lu Nicola Top

Quelle est l'utilité du poste ?

Cliquez sur le smiley pour noter !

note moyenne 4.9 / 5. Nombre de notes : 25

Il n'y a pas encore d'évaluations. Évaluez d'abord.

Vous aimerez aussi...

Laisser un commentaire

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

dix-huit − 12 =