Accueil > > > COMPACTEZ VOS CSS
COMPACTEZ VOS CSS
Information sur la source
Description
Bonjour à tous ! Si vous êtes un webmaster consciencieux, vous devez livrer un site web léger afin de satisfaire vos clients les plus démunis (56k, 28k!) ainsi que d'économiser la bande passante qui vous est gracieusement louée contre une belle poignée de billets. 1-Pour ceux qui ont la possibilité de le faire, activer premièrement gzip sur votre serveur afin que les pages envoyées soient compressées. Si vous ne savez pas si votre serveur compresse, utilisez cet outil http://www.pipeboost.com/report.asp. 2-La deuxième solution qui peut être mis en place est un compacteur de CSS. J'en entend déjà qui commencent à marmonner que gzip est largement suffisant et je les invite à tester ;-). L'idée du compacteur de CSS est de supprimer les espaces et sauts de ligne inutiles grâce à de bonnes vieilles expressions régulières. En plus de compacter le fichier css, ça permet de le rendre plutôt illisible Pour la mise en place, il faut ajouter dans la configuration du répertoire virtuel de IIS l'extension css et mettre comme exécutable la dll isapi d'asp.net 2. Si vous ne faîte pas ça, le HttpHandler que nous allons développer ne fonctionnera pas. Nous allons créer notre HttpHandler dans le répertoire App_Code mais il est possible de le créer dans une dll externe...c'est une affaire de goût, à vous de voir. Vous devez aussi déclarer le HttpHandler dans le fichier Web.config comme ceci: <httpHandlers> <add verb="POST,GET" path="*.css" type="CSSHandler"/> </httpHandlers> Au niveau du gain j'ai personnellement gagné ~10% avec gzip activé en aval, ce qui n'est pas rien. Notez que c'est à vous d'ouvrir le fichier CSS dans ProcessRequest et que les compactages effectués peuvent être améliorés, quoique :-P. -------------------------------------------- ---------------------- Tableau des performances avec une CSS : Originale : 36661 octets Compactée : 25,240 octets GZIP : 7,365 octets GZIP + Compactée : 5,054 octets
Source
- using System;
- using System.Data;
- using System.Collections;
- using System.IO;
- using System.Configuration;
- using System.Web;
- using System.Web.Security;
- using System.Web.UI;
- using System.Web.UI.HtmlControls;
- using System.Text.RegularExpressions;
-
-
- /// <summary>
- /// CSSHandler Compacteur de CSS
- /// </summary>
- public class CSSHandler : IHttpHandler
- {
- /// <summary>
- /// Compacte la CSS, sinon on envoie une erreur 404 si le fichier css n'existe pas
- /// </summary>
- /// <param name="context">Context</param>
- public void ProcessRequest(HttpContext context)
- {
- //on test l'existence du fichier et on déclenche une erreur 404
- //s'il n'existe pas
- if (!new FileInfo(context.Request.PhysicalPath).Exists)
- throw new HttpException(404, context.Request.Path + " not found");
- else //le fichier exist
- {
- string strCssContenu = "";
-
- //on lit le fichier entièrement
- using (TextReader hFile = new StreamReader(context.Request.PhysicalPath))
- {
- strCssContenu = hFile.ReadToEnd();
- hFile.Close();
- }
-
- //on compacte
-
-
- //supprime les sauts de ligne
- strCssContenu = new Regex("\xd\xa").Replace(strCssContenu,"");
- //supprime les commentaires
- strCssContenu = new Regex(@"(/\*.+?\*/)").Replace(strCssContenu, "");
-
- //1: On isole les chaines " "
- string regChaine = @""".+?[^\\]""";
- MatchCollection MatchesStrings = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Matches(strCssContenu);
- //2: On supprime les chaines
- strCssContenu = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Replace(strCssContenu, "<STRING_CACHE/>");
-
-
- strCssContenu = new Regex(@"\t").Replace(strCssContenu,"");
- strCssContenu = new Regex(@" {2,}").Replace(strCssContenu, " ");
- strCssContenu = new Regex(@" *({|}|:|!|;) *").Replace(strCssContenu, "$1");
-
- //Bug d'iE avec les attributs first-letter, first-line-> il faut un espace avant la parenthèse
- //du coup on le rajoute devant chaque parenthèse ouverte
-
- strCssContenu = new Regex(@"([^ ]){", optCompile).Replace(strCssContenu, @"$1 {");
-
-
- //On replace les chaines
- foreach (Match oneString in MatchesStrings)
- {
- strCssContenu = new Regex(@"<STRING_CACHE/>",
- RegexOptions.IgnoreCase | RegexOptions.Singleline)
- .Replace(strCssContenu, oneString.Value, 1);
- }
-
- //Important pour FireFox oubien il ne reconnait pas la css
- context.Response.ContentType = "text/css";
-
- //on écrit la css compactée dans le flux de reponse
- context.Response.Write(strCssContenu);
- //on envoie explicitement le buffer en cache
- context.Response.Flush();
- //on ferme la connexion
- context.Response.End();
- }
- }
-
-
- public bool IsReusable
- {
- get { return true; }
- }
-
-
- }
using System;
using System.Data;
using System.Collections;
using System.IO;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Text.RegularExpressions;
/// <summary>
/// CSSHandler Compacteur de CSS
/// </summary>
public class CSSHandler : IHttpHandler
{
/// <summary>
/// Compacte la CSS, sinon on envoie une erreur 404 si le fichier css n'existe pas
/// </summary>
/// <param name="context">Context</param>
public void ProcessRequest(HttpContext context)
{
//on test l'existence du fichier et on déclenche une erreur 404
//s'il n'existe pas
if (!new FileInfo(context.Request.PhysicalPath).Exists)
throw new HttpException(404, context.Request.Path + " not found");
else //le fichier exist
{
string strCssContenu = "";
//on lit le fichier entièrement
using (TextReader hFile = new StreamReader(context.Request.PhysicalPath))
{
strCssContenu = hFile.ReadToEnd();
hFile.Close();
}
//on compacte
//supprime les sauts de ligne
strCssContenu = new Regex("\xd\xa").Replace(strCssContenu,"");
//supprime les commentaires
strCssContenu = new Regex(@"(/\*.+?\*/)").Replace(strCssContenu, "");
//1: On isole les chaines " "
string regChaine = @""".+?[^\\]""";
MatchCollection MatchesStrings = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Matches(strCssContenu);
//2: On supprime les chaines
strCssContenu = new Regex(regChaine, RegexOptions.IgnoreCase | RegexOptions.Singleline).Replace(strCssContenu, "<STRING_CACHE/>");
strCssContenu = new Regex(@"\t").Replace(strCssContenu,"");
strCssContenu = new Regex(@" {2,}").Replace(strCssContenu, " ");
strCssContenu = new Regex(@" *({|}|:|!|;) *").Replace(strCssContenu, "$1");
//Bug d'iE avec les attributs first-letter, first-line-> il faut un espace avant la parenthèse
//du coup on le rajoute devant chaque parenthèse ouverte
strCssContenu = new Regex(@"([^ ]){", optCompile).Replace(strCssContenu, @"$1 {");
//On replace les chaines
foreach (Match oneString in MatchesStrings)
{
strCssContenu = new Regex(@"<STRING_CACHE/>",
RegexOptions.IgnoreCase | RegexOptions.Singleline)
.Replace(strCssContenu, oneString.Value, 1);
}
//Important pour FireFox oubien il ne reconnait pas la css
context.Response.ContentType = "text/css";
//on écrit la css compactée dans le flux de reponse
context.Response.Write(strCssContenu);
//on envoie explicitement le buffer en cache
context.Response.Flush();
//on ferme la connexion
context.Response.End();
}
}
public bool IsReusable
{
get { return true; }
}
}
Conclusion
Je remercie Sebastien "Regexp" Ferrand pour son aide. Autre chose, je ne l'ai pas mis dans le code, mais dans le cas où la css n'est pas générée dynamiquement, mettez la css compactée dans le Cache, le serveur vous en sera reconnaissant !
Historique
- 12 décembre 2005 09:47:52 :
- Correction ortographique
- 12 décembre 2005 09:49:29 :
- *Orthographique pardon ;-) et réindentation du code.
- 12 décembre 2005 11:43:20 :
- FireFox ne reconnait pas le css si le ContentType "text/css" n'est pas explicite
- 13 décembre 2005 01:02:12 :
- simplification d'une expression
- 21 décembre 2005 12:56:58 :
- Les chaines " chaine chaine" sont mises en cache. Le compacteur a été validé par Cyril.
- 25 janvier 2006 15:18:04 :
- Bug CSS repéré sur IE6 (Les pseudo class doivent être suivies par un espace ou un saut de ligne !) donc j'ai modifié le code en conséquent en rajoutant un espace juste avant une accolade ouvrant ".maclass:first-line{" devient ".maclass:first-line {"
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Problème avec les expressions régulières et les navigateurs [ par Manu94600 ]
Petit souci, je suis en train de faire un site et j'utilise des ControlValidator.J'ai un petit souci que peut être certain ont déjà rencontré.Donc j'u
Expressions Régulières [ par Kraken ]
Bonjour,Je veux faire un split sur une chaîne de caractères en fonction des caractères + et -, comment faire ? Existe il les expressions régulières co
problème sur les expressions régulières [ par guitza87 ]
Bonjour, j'ai réalisé une page en asp qui récupère le contenu d'une autre page dans le but de retrouver les valeurs affichées
css et asp.net relativiser les adresses [ par badrbadr ]
salut tout le monde.J'ai une masterpage dans laquelle j'inclue une feuille de style.<link rel="stylesheet" type="text/css" id="document" href="them
expressions regulieres [ par hudon77 ]
Bonjour a tous!J'ai une expresssion réguliere qui fonctionne bien qui sert à valider un mot de passe pouvant comporter des lettres et des chiffres,
ATLAS : updatepanel + CSS [ par somsom ]
Bonjour,Dans mon update panel, j'ai un tableau dont les image et le style sont liée à une feuille CSSà chaque mise à jour de l'update panel, il y a un
recuperer propriété css dans le code behind [ par lilippx ]
Salut à tous, mon petit soucis : <div class="centre"> <div id="Content"> <asp:contentplaceholder id="ContentPlace
pb avec CSS [ par Jabba from mars ]
J'utile une feuille de style css externe standard pour gérer l'affichage de toutes les pages de mon site (html 4 + asp 2 + javascript).Or si en intran
Perte de mémoire sur les css et en plus c URGENT [ par polluxtroll ]
Peut-on colorer les scrollbars d'une balise select ?? MERCIPoLlUx_TrOlLPrenez un troll au petit-déjeuner!! (avis d'expert : y'a rien de mieux)
CssCollection et Feuille de stylle .CSS [ par alk ]
HellloVoila en ASP.NET avec C# je voudrait savoir si il est faisable d'affecter une feuille de style .CSS à un objet CssCollection car c pas marrant d
|
Derniers Blogs
CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT)CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY
Bonjour à tous, Je viens de publier une proposition comprenant 5 pseudo-classes pour le CSS Working Group ayant trait à l'état de chargement d'un élément (ex: IMG,VIDEO,AUDIO,OBJECT pour l'HTML.). Si le c½ur vous en dit, vous pouvez retrouver cette p...
Cliquez pour lire la suite de l'article par FREMYCOMPANY MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ?MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice
Formation initiale Durant la formation, le découpage classique est le suivant (je donnerai les équivalences Suisse lorsque je les connaîtrais) : Ecole primaire jusqu'au Collège : Formation générale permettant d'obtenir les méthodes...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENTY'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks
Quand on a ce genre d'erreur sans log :
Et bas on a juste envie de choper le gas de Microsoft qu'a développé ça et lui foutre des baffes de Coboye ! ...
Cliquez pour lire la suite de l'article par Aleks [HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET
Avec la sortie prochaine de la Beta Consumer Preview de Windows 8, j'avais envie de revenir sur une des fonctionnalités que j'attends le plus et que, en bon geek que je suis, j'utilise déjà : Hyper-V 3 ainsi son module PowerShell.
Il y a déjà pléthor...
Cliquez pour lire la suite de l'article par Pierrick CATRO-BROUILLET IIS7 - COMPRESSION GZIPIIS7 - COMPRESSION GZIP par cyril
La compression GZIP permet d'améliorer les performances de navigation en compressant ce qu'envoie le serveur à un client. Pour comprendre comment cela fonctionne, regardons ce qu'il se passe au niveau HTTP lorsqu'un client tente d'accéder à une ress...
Cliquez pour lire la suite de l'article par cyril
Forum
SCRIPTSCRIPT par nadialadypower
Cliquez pour lire la suite par nadialadypower
Logiciels
Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning Academy System (17.1.3.0)ACADEMY SYSTEM (17.1.3.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System COLLECTOR PLUS (3.00B)COLLECTOR PLUS (3.00B)COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par :
- L... Cliquez pour télécharger COLLECTOR PLUS PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO LettresFaciles 2011 (8.0.0.1)LETTRESFACILES 2011 (8.0.0.1)LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types.
Son inte... Cliquez pour télécharger LettresFaciles 2011
|