web-dev-qa-db-fra.com

Comment spécifier un en-tête Vary: Accept-Encoding?

Google et pingdom.com disent que je devrais "Spécifier un en-tête Vary: Accept-Encoding"

je ne sais pas ou ne comprends pas comment faire cela. Quelqu'un peut-il expliquer ce que c'est et ce qu'il fait?

13
jshariar

J'obtiens un score de près de 100% dans https://tools.pingdom.com/ et https://developers.google.com/speed/pagespeed/insights/

J'ai trouvé un article utile pour accélérer wordpress site Web ou blog https://www.keycdn.com/blog/speed-up-wordpress/

Avec quelques autres optimisations, j'utilise également le code ci-dessous sur mon site dans .htaccess fichier (généralement masqué dans le dossier principal du site Web)

Mon serveur est Apache, vous pouvez vous enregistrer dans le panneau de contrôle d'hébergement (comme cPanel/WHM Panel) (si votre serveur est nginx, consultez l'article de keycdn.com)

(Copiez et collez le code ci-dessous dans le fichier .htaccess, cela fonctionne bien pour moi)

(Évaluez cette réponse si cela fonctionne pour vous)

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 month"
ExpiresByType image/jpeg "access 1 month"
ExpiresByType image/gif "access 1 month"
ExpiresByType image/png "access 1 month"
ExpiresByType image/svg "access 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/xhtml+xml "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>

<ifModule mod_headers.c>
  <filesMatch ".(css|jpg|jpeg|png|gif|swf|svg|js|ico)$">
    Header set Cache-Control "max-age=2592000, public"
  </filesMatch>
  <filesMatch ".(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/json
  AddOutputFilterByType DEFLATE application/atom+xml
  AddOutputFilterByType DEFLATE application/rdf+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/truetype
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml
</IfModule>
18
BlackFire

Je pense que vous devez activer la compression pour des fichiers spécifiques comme css, js et xml. Le code suivant ajouté au fichier .htaccess racine de votre domaine activera ce type de fonctionnalité sur votre serveur:

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

Si vous souhaitez ajouter plus de type de fichier à cette règle, ajoutez simplement son extension à l'instruction! <FilesMatch "\.(js|css|xml|gz|newone)$">

16
Patartics Milán

J'ai aussi eu des problèmes avec ça ne fonctionnait pas

Que s'est-il passé si j'avais une autre directive d'en-tête pour mes fichiers php

J'avais un Header set Cache-control - et il écrase le Header append Vary, donc vous devez les mettre dans le même bloc.
Ce que je devais faire était de définir le Vary pour tous les autres fichiers dans une instruction Filesmatch et le Cache et Vary pour les fichiers php dans une instruction FilesMatch distincte comme ceci:

<IfModule mod_headers.c>
<FilesMatch "\.(js|css|gz)$">
 Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>


<IfModule mod_headers.c>
<FilesMatch "\.(php)$">
 Header set Cache-Control "max-age=300"
 Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

Ce n'est pas ma véritable instruction Cache-Control - juste simplifiée pour l'exemple de code.

3
Nat