web-dev-qa-db-fra.com

tirer parti de la mise en cache du navigateur - expire ou âge maximum, dernière modification ou etag

J'ai du mal à trouver une explication claire et pratique de la bonne façon d'utiliser la mise en cache du navigateur pour augmenter la vitesse de la page.

Selon ce site :

Il est important de spécifier l'un de Expires ou Cache-Control max-age, et l'un de Last-Modified ou ETag, pour toutes les ressources pouvant être mises en cache. Il est redondant de spécifier à la fois Expires et Cache-Control: max-age, ou de spécifier Last-Modified et ETag.

Est-ce correct? Si oui, dois-je utiliser Expires ou max-age? Je pense que j'ai une compréhension générale de ce que ces deux sont, mais je ne sais pas lequel est généralement préférable d'utiliser.

Si je dois aussi faire Last-Modified ou ETag, lequel? Je pense que je reçois Last-Modified mais je suis encore très flou sur ce concept ETag.

De plus, pour quels fichiers dois-je activer la mise en cache du navigateur?

53
Andy

Est-ce correct?

Oui, Expires et max-age font la même chose, mais de deux manières différentes. Même chose avec Last-Modified et Etag

Si oui, dois-je faire expire ou max-age?

Expire dépend de la précision de l'horloge de l'utilisateur, c'est donc généralement un mauvais choix (car la plupart des navigateurs prennent en charge HTTP/1.1). Utilisez max-age pour dire au navigateur que le fichier est bon pendant autant de secondes. Par exemple, un cache d'un jour serait:

Cache-Control: max-age = 86400

Notez que lorsque les deux Cache-Control et Expires sont présents, Cache-Control a priorité. lire

Si je dois aussi faire Last-Modified ou ETag, lequel de ceux-ci? Je pense que je reçois la dernière modification

Vous avez raison, Last-Modified devrait être mieux. Bien que ce soit un temps, il est envoyé par le serveur. Par conséquent, aucun problème avec l'horloge de l'utilisateur. C'est la raison pour laquelle Last-Modified est meilleur qu'Expires. Le navigateur envoie le Last-Modified que le serveur a envoyé la dernière fois qu'il a demandé le fichier, et si c'est la même chose, le serveur répond avec une réponse vide "304 Not Modified"

Vous devez également noter que ETag peut également être utile, car Last-Modified a une fenêtre temporelle d'une seconde. Vous ne pouvez donc pas distinguer deux sources différentes avec la même valeur Last-Modified. [2]

Etag a besoin d'un peu plus de calcul que Last-Modified, car c'est une signature de l'état actuel du fichier (similaire à une somme md5 ou un CRC32).

De plus, pour quels fichiers dois-je activer la mise en cache du navigateur?

Tous les fichiers peuvent bénéficier de la mise en cache. Vous avez deux approches différentes:

  • avec max-age: utile pour les fichiers qui ne changent jamais (images, CSS, javascript). Tant que la valeur max-age est atteinte, le navigateur n'enverra aucune demande au serveur. Vous verrez donc la page se charger très rapidement au deuxième chargement. Si vous devez mettre à jour des fichiers, ajoutez simplement un point d'interrogation et la date de modification (par exemple /image.png?20110602, ou pour une meilleure mise en cache des proxys, quelque chose comme /20110602/image.png ou /image.20110602.png) . De cette façon, vous pouvez faire expirer les fichiers en cas d'urgence (rappelez-vous que le navigateur ne touche presque jamais le serveur une fois qu'il a un fichier max-age). L'utilisation principale est d'accélérer les choses et de limiter les demandes envoyées au serveur.
  • avec Last-Modified: peut être défini sur tous les fichiers (y compris ceux avec max-age). Même si vous avez des pages dynamiques, vous ne pouvez pas changer le contenu du fichier pendant un certain temps (même si c'est 10 min), cela pourrait donc être utile. L'utilisation principale ici est de dire au navigateur "continuez à me demander ce fichier, s'il est nouveau, je vous enverrai le nouveau". Il y a donc une demande envoyée à chaque chargement de page, mais la réponse est vide si le fichier est déjà bon (304 non modifié), donc vous économisez de la bande passante.

Plus vous mettez en cache, plus vos pages s'affichent rapidement. Mais il est difficile de vider les caches, alors utilisez-les avec précaution.

Un bon endroit pour apprendre tout cela avec de nombreuses explications: http://www.mnot.net/cache_docs/

[2]: rfc7232 Etag https://tools.ietf.org/html/rfc7232#section-2.

70
Yvan