Minimiser vos feuilles de styles CSS
Pour maintenir le code lisible, c’est une bonne idée d’écrire des commentaires et d’utiliser des retraits:
. Centre { largeur : 960 px; marge : 0 auto; } / * --- Structure --- * / . Introduction { marge : 100 px; la position : relative; }
Mais pour le navigateur, rien de tout cela n’importe réellement. Pour cette raison, n’oubliez pas de diminuer votre CSS grâce à des outils.
Cela va diminuer la taille du fichier, ce qui entraînera des temps de téléchargement, d’analyse et d’exécution plus rapides.
Pour ceux qui utilisent des pré-processeurs comme Sass , Moins et Stylus , il est possible de configurer la sortie de votre CSS compilée à minified.
> Des outils utiles: YUI Compressor , CSS Minifier , cssmin.js .
Combinaison de plusieurs fichiers css
Une autre bonne pratique pour l’organisation et l’entretien des styles est de les séparer en composants modulaires.
<link href="structure.css" rel="stylesheet" media="all" /> <link href="banner.css" rel="stylesheet" media="all" /> <link href="layout.css" rel="stylesheet" media="all" /> <link href="component.css" rel="stylesheet" media="all" /> <link href="plugin.css" rel="stylesheet" media="all" />
Cependant, une requête HTTP est requis pour chacun de ces fichiers (et nous savons que les navigateurs ne pouvent télécharger qu’un nombre limité de ressources en parallèle).
<link href="main.css" rel="stylesheet" media="all" />
Donc il faut combiner vos CSS. Avoir un plus petit nombre de fichiers se traduira par un plus petit nombre de demandes et une page de chargement plus rapide.
Vous voulez avoir le meilleur des deux mondes? Automatiser ce processus à travers un outil de build.
> Des outils utiles: Grunt .
Ne pas utiliser le sélecteur universel
Évitez d’utiliser le sélecteur universel car il force le navigateur à effectuer une recherche sur tous les éléments HTML de la page, et d’appliquer la règle à chacun d’eux.
* { marge : 0 ; padding : 0 ; border : none; text-decoration : none; outline : 0 ; }
Il y aura également de nombreux éléments sur lesquels certains attributs n’auront tout simplement pas d’effet.
Pour cette raison, nous vous recommandons d’utiliser un Reset CSS, ou de créer les vôtres.
> Des outils utiles: Yahoo! Réinitialiser , Normaliser e Réinitialiser Eric Meyer .
Préférez <link> sur @ import
Il ya deux façons d’inclure une feuille de style externe dans votre page: soit via l’ <link>
tag:
<link href="style.css" rel="stylesheet" />
Ou par la directive @import
(à l’intérieur d’une feuille de style externe ou dans une balise <style>
):
@import url('style.css');
Lorsque vous utilisez la seconde option avec une feuille de style externe, le navigateur est incapable de télécharger les autres fichiers en parallèle, ce qui peut bloquer le téléchargement globale de la page.
Pensez (et repensez) aux sélecteurs de vos css
Le Sélecteur est la clé de votre expression CSS. En général, les développeurs ne se concentrent pas sur ce point car ils ne savent pas exactement comment il fonctionne.
header nav ul li a {}
Jetez un oeil à l’expression ci-dessus. Ce qui se passe c’est que le navigateur commence l’évaluation de l’expression CSS par la droite, dans ce cas le sélecteur est a
. Cette expression particulière demande au navigateur de faire beaucoup de travail. D’abord, il trouve toutes les éléments a
dans le code HTML, après tous les éléments li
qui contiennent un élément a
, et ainsi de suite jusqu’à ce qu’il trouve header nav ul li a
.
header nav ul li * { /* Bad */ } header nav ul li a { /* Worse */ } nav a { /* Bad */ } nav a.nav-link { /* Better */ } nav .nav-link { /* Better */ } .nav-link { /* Better */ }
Pour lire la suite, cliquez sur la flèche ci-dessous.
- Optimisation de code - comment faire perdre du poids aux pages - le HTML - 1/5
- Optimisation de code - comment faire perdre du poids aux pages - le css - 2/5
- Optimisation de code - comment faire perdre du poids aux pages - le javascript - 3/5
- Optimisation de code - comment faire perdre du poids aux pages - les images - 4/5
- Optimisation de code - comment faire perdre du poids aux pages - le serveur - 5/5
Aujourd’hui, chaque étape que vous prenez pour accélérer votre site Web, pour offrir une meilleure expérience utilisateur est importante. Le processus de minification peut réduire la taille du code de 10% à 95%! Cela permettra au site Web de fonctionner plus rapidement et d’obtenir ainsi un score élevé d’optimisation des moteurs de recherche (SEO). Pour la minification CSS, vous pouvez également obtenir de l’aide à partir des liens en ligne suivants
https://url-decode.com/tool/css-minifier
http://minifycode.com/css-minifier/
https://www.willpeavy.com/tools/minifier/