web-dev-qa-db-fra.com

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

Le compactage de CSS/la suppression des règles inutilisées pour une page spécifique est-il intéressant en termes de bande passante ou pouvons-nous compter sur la mise en cache (en-têtes/dernière modification) pour supprimer ce surcoût à l'état sauvage?

À votre santé

En outre, bonne chance avec la version bêta à tous!

optimizationcssbandwidth
9
Aiden Bell

Réduire la taille des fichiers réduira certainement la bande passante et le temps de chargement des pages. La première fois qu'un utilisateur accède à votre site, rien ne sera mis en cache, et pour la plupart des sites, les visiteurs pour la première fois constituent la majorité du trafic.

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

8
Matthew Shanley

Il y a beaucoup plus de lieux potentiels d'optimisation qui auront un impact plus important ...

Si vous recherchez uniquement un gain de performance, l'optimisation de la source CSS est plutôt faible dans la chaîne alimentaire.

L’excès de fichiers crus dans la source CSS prendra un coup mineur lors du premier chargement des feuilles de style. La mise en cache devrait résoudre le problème à partir de ce moment-là.

2
Evan Plaice

Je ne pense pas que ce soit un ou. La réduction de la taille du fichier aidera l’utilisateur lors de son premier accès au fichier. La mise en cache aidera lors de leur deuxième visite.

2
jessegavin

Chaque fois que vous pouvez supprimer des éléments, vous améliorez la vitesse de chargement, même négligeable. En outre, il est également recommandé de supprimer les éléments que vous n'utilisez pas pour des raisons de clarté du code.

1
Jason

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

premièrement: utilisez htaccess pour indiquer à Apache de traiter tous les fichiers css comme des scripts php et de compresser la sortie lorsqu’il est de type text/css

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

second: 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?

0
The Disintegrator

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

0
Travis Northcutt

Supprimer 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.

N'oubliez pas que gzipping CSS est de loin le moyen le plus efficace d'accélérer le chargement de CSS. La différence entre un fichier avec tout le contenu et un autre avec quelques blocs inutiles supprimés est négligeable après gzip.

0
DisgruntledGoat

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

Cela tient en grande partie au profil d'utilisation de votre site. Si vous êtes vraiment collant, la mise en cache gagne haut la main. Toutefois, si vous avez un taux de rebond élevé, vous pouvez utiliser un CSS optimisé (ou passer du temps à perdre de l'optimisation CSS à rendre votre site plus collant!).

Une approche que vous pouvez adopter si vous utilisez un balisage spécifique à la page consiste à créer 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.

0
JasonBirch