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
[ASP.NET] NE PAS SE FAIRE AVOIR PAR IHTTPMODULE ET SA MéTHODE INIT()[ASP.NET] NE PAS SE FAIRE AVOIR PAR IHTTPMODULE ET SA MéTHODE INIT() par tja
Beaucoup de développeurs pensent que lorsqu'on créé et enregistre un IHttpModule, il n'en existe qu'une seule instance et la méthode Init() sera appelée qu'une fois.
C'est faux
Cela peut vraiment créer des bugs subtils dont en ne se rend pas compte ...
Cliquez pour lire la suite de l'article par tja [MSTD10] SHAREPOINT 2010 ET TEAM FOUNDATION SERVER[MSTD10] SHAREPOINT 2010 ET TEAM FOUNDATION SERVER par phil
Un post rapide pour vous informer de la disponibilité de la vidéo de ma présentation sur SharePoint 2010 & Team Foundation Server. http://www.microsoft.com/france/vision/mstechdays10/Webcast.aspx?EID=20215d48-02e3-4d43-8c36-e53505c3b316 Dans la ...
Cliquez pour lire la suite de l'article par phil [MSTD10] SQL SERVER 2008 POUR LES DéVELOPPEURS ET VISUAL STUDIO TEAM SYSTEM DATABASE EDITION[MSTD10] SQL SERVER 2008 POUR LES DéVELOPPEURS ET VISUAL STUDIO TEAM SYSTEM DATABASE EDITION par Miiitch
Lors de cette session que j'ai animé avec Rui , j'ai eu l'occasion de présenter, en plus des nouveautés de SQL Server 2008, comment utiliser l'édition "database" de Visual Studio 2008. Le principe? Avoir les mêmes outils lors que l'on travaille avec une b...
Cliquez pour lire la suite de l'article par Miiitch [WF4] LOCALISER SIMPLEMENT UNE ACTIVITé ET SON DESIGNER WPF[WF4] LOCALISER SIMPLEMENT UNE ACTIVITé ET SON DESIGNER WPF par JeremyJeanson
La localisation . vous connaissez ce system miraculeux qui permet à votre application de s'afficher dans la langue de l'utilisateur (à condition de l'avoir intégrée dans votre programme). Comment mettre en place la localisation dans WF4? Cette question m'...
Cliquez pour lire la suite de l'article par JeremyJeanson [TECHDAYS 2010] WEBCASTS ET SLIDES[TECHDAYS 2010] WEBCASTS ET SLIDES par Audrey
Les webcasts des sessions des Techdays 2010 sont maintenant disponibles en ligne ! Me concernant, voici les slides et le webcast de la session Blend 3 / Skechtflow : Dessinez c'est gagné ! (animée avec Michel Perfetti ) Les slides et le webcast : Blend 3/...
Cliquez pour lire la suite de l'article par Audrey
Logiciels
Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor Xlite (v 3.0 build 41150)XLITE (V 3.0 BUILD 41150)c'est un logiciel qui permet de téléphoner par Internet à l'aide d'un compte SIP pratique pour le... Cliquez pour télécharger Xlite Academy System (10.9.3.0)ACADEMY SYSTEM (10.9.3.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|