Réduction CSS pour un chargement plus rapide / moins de bande passante

Est-ce que le compactage CSS / Suppression de règles inutilisées pour une page spécifique est utile en termes de bande passante ou pouvons-nous compter sur la mise en cache (en-têtes / dernière modification) pour supprimer cette surcharge dans la nature?

À votre santé

Et bonne chance à tous!

La réduction de la taille des fichiers réduira certainement la bande passante et raccourcira le temps de chargement des pages. La première fois qu'un utilisateur accède à votre site, il n'y a rien en cache, et pour la plupart des sites, les visiteurs pour la première fois représentent la majorité du trafic.

De plus, assurez-vous que la compression gzip est activée. Cela réduira considérablement la bande passante.

Je ne pense pas que ce soit l'un ou l'autre. La réduction de la taille du fichier aidera l'utilisateur la première fois qu'il accédera au fichier. La mise en cache aidera lors de leur deuxième visite.

Il y a beaucoup plus de possibilités d'optimisation qui auront un plus grand impact ...

Si vous recherchez strictement un gain de performances, l'optimisation des sources CSS est assez faible dans la chaîne alimentaire.

L'excès de crufté dans la source CSS prendra un coup mineur la première fois que les feuilles de style seront chargées. La mise en cache doit désormais prendre en charge le problème.

Chaque fois que vous pouvez supprimer des éléments, vous améliorerez la vitesse de chargement, ne serait-ce que de manière négligeable. En outre, il est recommandé de supprimer également les éléments que vous n'utilisez pas pour la clarté du code.

Je soupçonne que cela dépend de la dynamique de votre site. Si vous avez de nombreux visiteurs réguliers et peu de nouveaux visiteurs, la mise en cache est probablement suffisante. Si, cependant, vous avez beaucoup de nouveaux visiteurs (et surtout si vous voulez faire bonne impression), je pense que vous devriez réduire la taille de votre CSS autant que possible.

La suppression de certains CSS inutilisés améliorera évidemment les temps de chargement sur une page, mais vous devez également équilibrer cela avec l'effet sur plusieurs pages. Vous voulez également éviter trop de requêtes HTTP.

Rappelez-vous, le gzipping CSS est de loin le moyen le plus efficace pour accélérer le chargement CSS. La différence entre un fichier contenant tout et un autre avec quelques blocs inutiles supprimés est négligeable après gzip.

Même si les performances sont réduites en supprimant le CSS inutilisé page par page (et je suis assez convaincu que la mise en cache l'emporterait sur cela à moins que vous ne parliez de pages radicalement différentes), vous devez prendre en compte le temps de maintenance requis pour le faire. . Sauf si vous êtes Google, cela ne vaut probablement pas la peine de passer plusieurs jours sur la durée de vie du site pour économiser à chaque utilisateur un dixième de seconde.

Cela est en grande partie lié au profil d'utilisation de votre site. Si vous êtes vraiment collant, la mise en cache gagne haut la main. Cependant, si vous avez un taux de rebond élevé, vous pouvez être mieux avec CSS optimisé (ou passer le temps que vous perdez à optimiser CSS pour rendre votre site plus collant!).

Une approche que vous pouvez adopter si vous avez un balisage spécifique à une page consiste à avoir un fichier CSS générique à l'échelle du site et à intégrer des règles par page dans l'en-tête du document HTML.

Vous pouvez tirer le meilleur parti des deux mondes, réduire le fichier au moment de l'exécution et compresser la sortie.
Le fichier source reste lisible lorsque vous devez le modifier, mais il est compressé lorsque vous le téléchargez

tout d'abord: utilisez htaccess pour dire à apache de traiter tous les fichiers css comme des scripts php et de compresser la sortie lorsque de type text / css

dans .htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

deuxièmement: utilisez la mise en mémoire tampon de sortie avec une fonction de rappel pour réduire le code CSS avant le début du téléchargement, définissez également le délai d'expiration pour que le fichier soit mis en cache

dans votre fichier css

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

Troisièmement: le profit?