web-dev-qa-db-fra.com

Comment rendre une page HTML statique et ses ressources en cache?

Je viens d'effectuer une analyse de la vitesse page par page et je suis tombé sur le pointeur suivant de google pagespeed:

Exploiter la mise en cache du navigateur

Définir une date d'expiration ou un âge maximum dans les en-têtes HTTP pour les ressources statiques indique au navigateur de charger les ressources précédemment téléchargées à partir du disque local plutôt que sur le réseau. **

Je suis tombé sur quelques articles qui parlent de la mise en cache:

Il existe également un petit article fourni par Google ici . Dans l'article, les étapes suivantes sont mentionnées:

  1. Utilisez des URL cohérentes: si vous diffusez le même contenu sur différentes URL, ce contenu sera récupéré et stocké plusieurs fois. Astuce: notez que les URL sont sensibles à la casse!
  2. Assurez-vous que le serveur fournit un jeton de validation (ETag): les jetons de validation éliminent la nécessité de transférer les mêmes octets lorsqu'une ressource n'a pas été modifiée sur le serveur.
  3. Identifiez les ressources pouvant être mises en cache par les intermédiaires: celles dont les réponses sont identiques pour tous les utilisateurs sont d'excellents candidats pour la mise en cache par un CDN et d'autres intermédiaires.
  4. Déterminez la durée de vie optimale du cache pour chaque ressource: différentes ressources peuvent avoir différentes exigences en matière de fraîcheur. Auditer et déterminer l'âge maximum approprié pour chacun.
  5. Déterminez la meilleure hiérarchie de cache pour votre site: la combinaison d'URL de ressources avec des empreintes de contenu et de durées de vie courtes ou sans cache pour les documents HTML vous permet de contrôler la rapidité avec laquelle le client collecte les mises à jour.
  6. Réduisez au minimum le désabonnement: certaines ressources sont mises à jour plus souvent que d'autres. Si une partie particulière de la ressource (par exemple, une fonction JavaScript ou un ensemble de styles CSS) est souvent mise à jour, envisagez de fournir ce code dans un fichier séparé. Cela permet d'extraire le contenu restant du cache (par exemple, un code de bibliothèque qui ne change pas très souvent) et de minimiser la quantité de contenu téléchargé chaque fois qu'une mise à jour est extraite.

Je suis toujours confus après avoir lu cela. Dois-je définir quelque chose dans ma feuille de style css pour le rendre cachable ou dois-je définir quelque chose dans mon code HTML pour le rendre cachable? Comment créer un fichier html, css ou js utilisé dans un fichier html pouvant être mis en cache et où définir le temps pendant lequel un fichier doit être mis en cache?

cachecache-control
1
Alexander Solonik

Si vous avez Apache, vous pouvez vous référer à cette page pour savoir comment utiliser le mot clé expires dans les fichiers de configuration Apache ou .htaccess.

http://httpd.Apache.org/docs/2.2/mod/mod_expires.html

Leur exemple de configuration devrait fonctionner mais j'ai ajouté quelques lignes. Voir ci-dessous:

 # enable expirations
 ExpiresActive On
 # expire GIF images after a month in the client's cache
 ExpiresByType image/gif A2592000
 ExpiresByType image/jpg A2592000
 # HTML documents are good for a week from the
 # time they were changed
 ExpiresByType text/html M604800
 ExpiresByType text/css M604800
1
Mike