Tayo
Astuce et Tutorial » Programmation / Developpement » css-et-design » tutoriel rédigé par Zabuza
Description de cet article : L'optimisation css pour gagner de la bande passante.
Lire les commentaires

Optimisation des fichiers .CSS


A l'heure où de nombreuses personnes essaient d'optimiser leurs blogs / site  que ce soit au niveau du temps de chargement ( primordial ), à travers des images de qualité raisonable , et un code source de page fluide, un détail est souvent oublié, à tord :


Optimiser ses fichiers .css. Pour rappel ( sinon vous ne seriez pas en train de lire cet article ) voici une petite définition de ce que réprésente les fichiers .css


[quote]Le terme CSS est l'abréviation de Cascading Styles Sheet (feuilles de styles en cascade). Les styles CSS permettent d'enrichir (ou même de définir entièrement) la mise en forme de pages internet en apportant de nombreux avantages par rapport à une mise en forme directement écrite en HTML[/quote]



 


[url=http://www.tayo.fr/definition--css-aide.php]Définition css[/url]


Il convient donc d'avoir en mémoire, que ces fichiers sont automatiquement chargés sur les différents navigateurs web ( que ce soit Firefox ou Internet explorer, qu'importe ), en plus de la page en elle même.

Un fichier .css peut facilement faire 50 ko, ce qui, pour chaque utilisateur peut être colossal, entraînant un temps de chargement légèrement plus long ( même s'il a l'adsl ), mais surtout une plus grosse capacité de bande passante nécessaire, et elle est plutôt chère chez les hébergeurs de sites web. Faire diminuer la taille de son fichier .css est "indispensable".


Facilement calculable, prenez un site ayant  1000 visiteurs par mois ( chiffre rond ), en partant du principe que Firefox garde en cache les fichiers .css ( qu'il ne le recharge pas à chaque changement de page ), cela représente 50000 ko, soit près de 50 mo.


Quelques optimiseur "automatique" css


Comment optimiser ses feuilles de styles ?


Pour le faire soit même, il convient de ne pas introduire de lignes inutiles, des propriétés invisibles ou autre... Mais surtout, à chaque fois que l'on saute une ligne ou que l'on réalise un espace, le fichier gagne en taille.

Finalement, optimiser ses feuilles de styles revient à analyser clairement son code, et à se dire "ceci est inutile, je le vire". Mais nous n'avons pas spécifiquement envie de passer 40 heures à le faire.


Fort heureusement, il existe divers optimiseurs css en ligne, qui viennent faire le travail de gain de place en deux petits clics de souris.

 


Mise en guarde :


Votre code .css doit être "valide. Ce n'est pas un validateur css. Si une erreur est présente, celui-ci ne va pas la réparer.


1-Le meilleur ( avis subjectif ) :




http://iceyboard.no-ip.org/projects/css_compressor

Cet optimisateur s'avère simple, mais aussi le plus efficace. Il est possible de copier son code .css à "optimiser", de l'uploader, ou un robot ira télécharger un fichier .css déjà présent sur votre serveur.

Un clic plus tard, le gain de place apparaît, commenté :

 


Statistiques de css_compressor :



  • Taille du fichier original  : 14.1 kB (14,437 B)

  • Taille du fichier .css après optimisation : 10.46 kB (10,707 B)

  • Gain: 3.64 kB (3,730 B)

  • Réduction: 25.84%


2-Le finaliste ( avis subjectif ) :


[img]http://images4.hiboox.com/images/3108/4bae35aeb9c2c9985eb93ffbcbd5ce68.jpg[/img]


http://www.cleancss.com/

Cleancss offre l'avantage d'être "en français" ( approximatif tout de même.. ). Il optimise un peu moins bien que css_compressor, néanmoins il propose de surligner les modifications. En outre, celui-ci nous offre le choix de diverses optimisations selon nos "goûts". Ainsi à droite si vous selectionnez une compresse "compacte", aucune lisibilité ne sera possible, mais le code sera fluide.


Statistiques de Cleancss :



  • Taille du fichier original  : 14.1 kB (14,437 B)

  • Taille du fichier .css après optimisation : 10.981KB

  • Gain: 3.46 kB (3,460 B)

  • Réduction: 23.9%


3-Un dernier pour la route :



http://flumpcakes.co.uk/css/optimiser/


Flumpcakes a le défaut d'être Overmoche. Il propose peu d'options, mais fait également bien son travail, même si quelques rares problèmes pourrait survenir à la suite de ces "optimisations". ( Il optimise tellement que le désign est altéré ).



L'optimisation certes, mais garder une lecture aisée est indispensable


Ce code est optimisé pour "l'ordinateur" :


body{height:100%;font-size:12px;font-family:Geneva, Arial, Helvetica, sans-serif;color:#000;background-color:#c3cfe5}.tbin{vertical-align:top;margin-bottom:5px;width:250px;height:110px;border:solid 1px #666}.tbin:link{color:#09C;text-align:center}.tbin:hover{border:solid 1px #9F3;background-color:#DAF2FE}.affichdiv{background-image:url(/images/cherche.png);width:275px;height:150px;background-repeat:no-repeat;font-family:Arial, Helvetica, sans-serif;padding-top:29px;padding-left:35px;padding-right:20px;color:#FFF}.tutovousetes{font-size:10px;font-family:Verdana, Arial, Helvetica, sans-serif;color:#FFF;background-color:#069;overflow:hidden}.infobulle{position:absolute;visibility:hidden;border:1px solid Black;padding:10px;font-family:Verdana, Arial;font-size:10px;background-color:#FFC}#menu{width:154px;margin-top:3px;margin-bottom:4px;float:left;margin-right:auto;display:block}.menutitre{background-image:url(/images/image015.png);background-position:center;border-color:#000;border:2px solid black;border-bottom-width:0;border-bottom-style:hidden;color:#F90;font-size:12px}.


Est-il facilement lisible pour une modification ultérieure ?

Si c'est le cas pour vous, bravo, vous êtes un champion. Néanmoins, un pense bête pour que le code soit lisible et facilement modifiable par vous même :

Placez le fichier .css optimisé sur FTP ( en ligne donc ), et gardez bien au chaud chez vous votre fichier .css "bancal".

 




 



réduireNews
réduireTutoriel lié
  • Optimiser le cache disque sous XP
    Optimisation du cache disque sous xp
  • Optimisation registre DLL Vista
    Mini astuce registre pour accélérer le cache / ntfs..
  • Diminuer taille fichier javascript
    Bande passante, vitesse chargement...
  • Optimiser Firefox
    Optimiser, booster Firefox
  • Dans la même catégorie : css-et-design

    Passer l'activation de Windows 7 temporairement avec invite de commande

    Faire tourner un div d'un certain angle en css
    réduireSocial

    rss 3D png rss 3D png


    Pseudo :
    Pass :
    Les lecteurs ont donné une note moyenne de :
    note 1
    Note: 1 sur 10

    Donnez votre note à ce tuto sur 10 :

    Comment éviter les longs mots de détruire le désign ?

    Faire tourner un div d'un certain angle en css

    Liste des commentaires pour Optimisation .CSS °° Tutoriel


    Votre PseudoIl y a 0mn
    Votre commentaire forum
    Vous avez la parole
    Laissez un commentaire sur cet article.
    Pseudo :


    Facultatif : Cliquez ici pour choisir une tête
    Votre email ( non publié ) :

    Image anti spam :
    Code Image
    Recopier les 5 chiffres de cette image :






    Prendre contact avec Tayo.fr : Formulaire Tayo

    Tayo.fr, copyright jusqu'en 2233 ( Au moins ! ).