5 astuces pour CSS super-rapide

Sep 14, 2025

Comment

[dix] [dix] [dix]

[dix]

Avez-vous pensé à la taille du CSS de votre site? Si votre feuille de style est la montgolière, cela pourrait retarder le rendu de la page.

[dix]

16 exemples d'animation TOP CSS

Bien que CSS ne soit pas le plus grand type d'actif que vous servirez, c'est l'un des premiers que le navigateur découvre. Étant donné que le navigateur est bloqué de rendu la page jusqu'à ce que CSS soit téléchargée et analysée, elle doit être aussi maigre que possible. Voici cinq conseils pour vous aider à y arriver.

Vous avez un site complexe? Vous avez besoin du parfait hébergement Web un service. Ou, si vous voulez faire un site sans le problème, essayez un Générateur de site Web .

01. Utilisez des sélecteurs peu profonds

Vos parents vous ont dit que Shallowness n'est pas une vertu, mais quand il s'agit de CSS, ils ont tort. Utilisé de manière cohérente, les sélecteurs peu profonds peuvent couper des kilo-octets sur de grandes feuilles de style. Prenez ce sélecteur:

nav ul li.nav-item

Cela pourrait être exprimé plus succinctement:

[dix]

.nav-item

En plus d'aider à garder votre CSS Sviveau, le navigateur rendra également les éléments ciblés par des sélecteurs peu profonds plus rapidement. Les navigateurs lisent les sélecteurs de droite à gauche. Plus les sélecteurs sont plus profonds, plus il prend plus longtemps pour le navigateur de rendre et de reporter les éléments que ces sélecteurs sont appliqués. Pour les DOM complexes qui refoule souvent, les sélecteurs courts peuvent également réduire à Jank.

Idéalement, vous voulez que les sélecteurs soient aussi superficiels que possible, mais cela ne signifie pas que vous devriez tout couper jusqu'à l'os. Parfois, vous avez besoin de spécificité supplémentaire pour étendre les composants. Frappez le bon équilibre, mais être pragmatique aussi.

02. Utilisez Shorthand Properties

Using shorthand CSS will speed up your site — Utiliser Shorthand CSS accélérera votre site

Cela semble être bon sens, mais vous serez surpris de la fréquence à la fréquence de la plupart des propriétés de Longhand. Voici un exemple de propriétés de Longhand utilisées:

 Taille de la police: 1.5rem;
hauteur de ligne: 1.618;
Font-famille: "Arial", "Helvetica", Sans Serif;

C'est beaucoup de CSS! Retons-nous ça:

 Police: 1.5rem / 1.618 "Arial", "Helvetica", Sans Serif;

Le Police de caractère La propriété sténique condense plusieurs déclarations dans une doublure pratique qui prend beaucoup moins d'espace.

Dans l'exemple présenté ci-dessus, le sténographique utilise environ 40% moins d'espace que son équivalent de Longhand. Ce n'est pas aussi lisible à première vue, mais la syntaxe devient une seconde nature après avoir passé du temps à l'utiliser.

Bien sûr, Police de caractère N'est-ce pas le seul sténographie disponible pour vous. Par exemple, marge peut être utilisé à la place de propriétés plus longues telles que marge , marge-droite etc.

Le rembourrage la propriété fonctionne de la même manière. Pour plus de façons de nettoyer votre CSS, Mozilla Developer Network offre une liste utile de Références de propriété sténographique .

Et si vous avez besoin de remplacer une valeur plus loin dans la cascade? Par exemple, disons que vous avez un élément de rubrique qui doit changer sa taille de police pour les plus grands affichages.

Dans ce cas, vous devez utiliser plus précisément taille de police propriété à la place:

 H1 {
    police: 1.5rem / 1.618 "Arial", "Helvetica", Sans Serif;
}
@media (min-largeur: 60rem) {
    h1 {
        Taille de la police: 2REM;
    }
}

Ce n'est pas seulement pratique, il augmente également la flexibilité des composants. Si une autre partie du sous-jacent Police de caractère La propriété est modifiée, ces changements percolent les affichages plus grands. Cela fonctionne bien pour les substitutions de composants lorsqu'un nouveau contexte nécessite un traitement différent.

03. Utilisez l'indice de ressource précharge

Le précharger L'indice de ressources peut donner au navigateur une tête de démarrer sur charger le CSS de votre site. Le précharger L'indice de ressources indique au navigateur d'initier une excellente récupération pour un actif.

Vous pouvez le définir comme un & lt; link & gt; Tag en HTML:


          & lt; link rel = "précharge" href = "/ css / styles.css" as = "style" & gt;

Ou comme un en-tête HTTP dans votre configuration serveur:


  lien: & lt; /css/styles.css> ;; rel. précharge; AS = style

[dix]

Dans ces deux scénarios, précharger donne au navigateur une tête de départ sur le chargement /css/styles.css . Utilisant précharger Dans un en-tête HTTP est préférable, car cela signifie que le navigateur découvrira l'indice plus tôt dans les en-têtes de réponse, au lieu de plus tard dans le corps de réponse.

Une autre raison d'utiliser précharger Dans un en-tête HTTP, il s'agira d'initier un événement Push Server sur la plupart des implémentations HTTP / 2. Le serveur Push est un mécanisme permettant de faire pousser des actifs au client lorsque des demandes de contenu sont effectuées et offre des avantages de performance similaires à ceux de l'inlinage CSS.

La poussée du serveur n'est pas disponible sur http / 1. Cependant, en utilisant précharger Dans un environnement HTTP / 1, vous pouvez toujours améliorer les performances.

04. Redondances de Cull avec CSSCSS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — Les CSSCSS analyseront tous les fichiers CSS que vous le donnez et vous permettront de savoir quels règles de règles ont des déclarations dupliquées

Il peut payer pour vérifier votre CSS pour des règles en double avec un vérificateur de redondance. Prenez l'outil de Ruby CSSCSS, par exemple.

Les utilisateurs de rubis peuvent l'installer avec:


   GEM Installez les CSSCSS

Une fois installé, vous pouvez examiner votre CSS pour des licenciements comme:


  CSSCSS -V styles.css

Cette commande répertorie les sélecteurs partageant des règles que vous pouvez supprimer pour économiser de l'espace:

 {H1} et {P} Share 3 déclarations
  - Couleur: #000
  - Hauteur de ligne: 1.618
  - Marge: 0 0 1.5rem

Vous pouvez déplacer des règles en double sous un sélecteur:

 H1, P {
    Couleur: # 000;
    hauteur de ligne: 1.618;
    Marge: 0 0 1.5rem;
}

Vous seriez surpris de savoir combien d'espace ce processus peut économiser dans de grands projets. Utilisez le --aider Option Pour voir plus de commandes que vous pouvez utiliser pour modifier plus loin.

05. Allez le mile supplémentaire avec CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO prend votre CSS bien formaté et le gère à travers de nombreuses optimisations ciblées.

Pour la cerise sur le dessus, vous pouvez utiliser CSSNANO - un nœud et un outil dépendant des points postales. CSSnano non seulement des miniquies CSS, il rend de nombreuses optimisations ciblées susceptibles de réduire encore votre CSS. Installez-le sur votre système avec NPM, comme:

 NPM I -g CSSNANO-CLI

Ensuite, utilisez-le pour optimiser votre CSS:

 CSSNANO styles.css optimisés-styles.css

Si les commandes d'exécution ad hoc ne sont pas votre style, vous pouvez automatiser CSSNANO avec un système de construction. Voici comment utiliser CSSNANO dans une gulpfile:

 const gulp = exiger ("gulp");
const postcss = nécessite ("gulp-postcsss");
const cssnano = exiger ("CSSNANO");

const buildcsss = () = & gt; {
    retour gulp.src ("CSS / styles.css")
        .Pipe (PostCSS ([CSSNANO ()])
        .ppe (gulp.Dest ("CSS / optimisé"));
};
const watch = () = & gt; {
    gulp.watch ("CSS / styles.css", buildcss);
};
Exports.Buildcsss = Buildcss;
ExporterS.Watch = Watch;

Le buildcss tâche lit le CSS que vous écrivez dans CSS / styles.css , puis tuyes la sortie optimisée à la CSS / optimisé annuaire. Le Regardez la tâche commence buildcss Chaque fois que des changements se produisent dans CSS / styles.css .

Le Regardez La tâche peut alors être invoquée dans le terminal comme si:

 Gulp Watch

Avec certains peaufinages, vous pouvez créer un flux de travail qui effectue cette optimisation spécifique en plus des autres tâches liées au CSS, telles que la construction de fichiers SASS / Moins, de la mesure automatique, etc.

Vous souhaitez enregistrer vos pages de site Web? Exporter comme pdfs et sauvegarder en fiable stockage en ligne .

Cet article est apparu à l'origine dans rapporter , le magazine leader du monde pour les concepteurs Web. S'abonner ici .

Articles Liés:

Comprendre la propriété d'affichage CSS
La nouvelle frontière de l'animation CSS
Comment construire des mises en page complexes à l'aide de CSS

[dix] [dix]

[dix]

5 astuces pour CSS super-rapide

01. Utilisez des sélecteurs peu profonds

02. Utilisez Shorthand Properties

03. Utilisez l'indice de ressource précharge

04. Redondances de Cull avec CSSCSS

05. Allez le mile supplémentaire avec CSSNANO

Comment - Most Popular Articles

Comment créer des pin-up art

Créer un bot mou sur mesure

Construire des prototypes avec Adobe XD

Contrôle de la version principale pour les équipes distantes

Créer un chevalier fantastique réaliste

Comment dessiner des réflexions métalliques

Comment créer des personnages de dessins animés dans le cinéma 4D

Peindre une scène épique de New York

Catégories