web-dev-qa-db-fra.com

Comment ajouter des en-têtes Expires pour un fichier CSS avec? Ver = 4.1

J'optimise mon site web avec Gtmetrix et dans la section Ajouter les en-têtes Expires, cela montre l'erreur ci-dessous.

Il y a 49 composants statiques sans date d'expiration éloignée.

css/front.css?ver=4.1

Comment ajouter des en-têtes Expires pour un fichier CSS avec ?ver=4.1? Je veux le transmettre à mon . Htaccess fichier.

htaccesscsscache-controlexpires
1
Anand Vaishnav

Vous devez définir votre expires pour tout le contenu CSS par type MIME de la manière suivante:

  ExpiresByType text/css "access plus 6 months"

Vous pouvez également définir l'expiration uniquement pour un seul fichier:

<Files css/front.css>
    ExpiresActive on
    ExpiresDefault "access plus 6 months"
</Files>

Cela prend effet pour ce fichier, qu'il y ait ou non des paramètres d'URL (?ver=4.1). La logique derrière ceci est que vous voulez mettre le fichier en cache indéfiniment. Si vous modifiez votre fichier CSS, vous mettez à jour le lien vers ?ver=4.2, forçant ainsi tout le monde à télécharger la version la plus récente (qui, à son tour, sera mise en cache indéfiniment).

1
Stephen Ostermiller

Je suppose que vous voulez qu'un fichier traite différents CSS en fonction de différents paramètres.

J'ai une meilleure réponse, et comme avantage de cette réponse, vous pouvez avoir de jolies URL au lieu de demander à un navigateur client d'appeler des fichiers CSS réels.

Je suppose que la configuration standard de LAMP (Linux, Apache, MySQL et PHP) est effectuée sur l'ordinateur distant. Tout d'abord, demandez à l'administrateur du serveur d'activer le module Mod_rewrite. Créez ensuite un nouveau fichier texte à l'aide du bloc-notes Windows ou similaire, puis entrez le contenu suivant:

RewriteEngine On
RewriteRule ^css/version/(.+)$ css.php?ver=$1 [L]

Enregistrez le fichier au format .htaccess, puis chargez-le dans votre dossier css (ou dans le dossier dans lequel on s'attend à ce que front.css).

Ensuite, créez un nouveau fichier texte dans le bloc-notes (oui, encore une fois.) Puis tapez ce qui suit:

<?php
error_reporting(7); //suppress most errors including undefined errors
$version=$_GET["ver"];
$tm=60*60*24*8; // 8 days in future.
header('Expires: '.gmdate('D, d M Y H:i:s',time() +$tm).' GMT',true);
header('Cache-control: max-age='.$tm,true);
header('Content-type: text/css',true);
switch ($version){
    case "4.1":
       ?>
       .style4point1body {background-color: blue;}
       .style4point1button {color: red;}
       .style4point1header {font-size: 200%;}
       <?php
    break;
    case "2.0":
       ?>
       .style2point0body {background-color: red;}
       .style2point0button {color: green;}
       .style2point0header {font-size: 300%;}
       <?php
    break;
    default:
       ?>
       .undefinedstylebody {background-color: black;}
       .undefinedstylebutton {color: yellow;}
       .undefinedstyleheader {font-size: 50%;}
       <?php
    break;
}
?>

Enregistrez-le sous css.php et placez-le dans le même dossier que celui dans lequel vous avez placé le fichier .htaccess nouvellement créé.

Vous pouvez maintenant accéder à ces URL (où ... est ce que vous tapez normalement avant css/front.css? Ver = 4.1):

...css/version/4.1
...css/version/2.0
...css/version/<anything you want>

Maintenant, c'est là que ça devient intéressant. Si vous accédez à la première URL, le code suivant sera chargé:

.style4point1body {background-color: blue;}
.style4point1button {color: red;}
.style4point1header {font-size: 200%;}

Et si vous accédez à la deuxième URL, le code suivant sera chargé:

.style2point0body {background-color: red;}
.style2point0button {color: green;}
.style2point0header {font-size: 300%;}

Et si vous accédez à la troisième URL ou à toute autre URL commençant par .../css/version /, vous obtiendrez le code suivant:

.undefinedstylebody {background-color: black;}
.undefinedstylebutton {color: yellow;}
.undefinedstyleheader {font-size: 50%;}

J'ai créé le code pour que la page expire 8 jours plus tard à partir de l'heure actuelle, mais si vous devez ajuster les jours, modifiez le 8 dans la ligne commençant par $ tm.

1
Mike