Cet article traite de 20 méthodes pour optimiser le CSS, visant à améliorer la vitesse de chargement, à simplifier le développement et à améliorer l'efficacité. Selon le dernier rapport d'archives HTTP, il existe un problème généralisé de redondance des ressources sur les sites Web, les sites Web médians nécessitent 1700 Ko de données, 80 demandes HTTP et il faut 17 secondes pour charger pleinement sur les appareils mobiles. Un guide complet pour réduire le poids de la page fournit une variété de suggestions, et cet article se concentrera sur l'optimisation du CSS. Bien que CSS ne soit généralement pas le coupable des problèmes de performances, un site Web typique n'utilise que 40 Ko de CSS dispersés dans cinq feuilles de style, il y a encore place à l'optimisation et modifier la façon dont CSS est utilisé peut également améliorer les performances du site Web.
Points clés
Le problème de performance ne peut être résolu que si vous connaissez le problème. Les outils de développeur de navigateur sont le meilleur point de départ: Démarrez à partir du menu ou appuyez sur F12 , Ctrl Shift i ou safari sur macOS Cmd alt i . Tous les navigateurs offrent des fonctionnalités similaires et l'outil se chargera lentement sur des pages mal exécutées! Cependant, les onglets les plus utiles incluent les éléments suivants… L'onglet réseau affiche un diagramme en cascade du téléchargement des ressources. Pour de meilleurs résultats, désactivez la mise en cache et envisagez de ralentir la vitesse du réseau. Trouvez des fichiers qui téléchargent lentement ou bloquez d'autres ressources. Les navigateurs bloquent généralement le rendu du navigateur lorsque les fichiers CSS et JavaScript sont téléchargés et analysés. L'onglet Performance analyse les processus du navigateur. Commencez à enregistrer, exécutez des activités telles que le rechargement des pages, puis arrêtez d'enregistrer pour afficher les résultats. Recherche: 1. Trop d'opérations de mise en page / réarrangement , le navigateur est obligé de recalculer la position et la taille des éléments de la page; 2. Dans le fonctionnement coûteux Drawing , le pixel change; 3. Composition Fonctionnement, regroupant les parties dessinées de la page pour afficher à l'écran. Il s'agit généralement de l'opération consommée de ressources le moins processeur.
Le navigateur basé sur Chrome fournit un onglet "Audit" qui exécute l'outil de phare de Google. Il est généralement utilisé par les développeurs d'applications Web progressives, mais fournit également des recommandations de performances CSS.
Options en ligne
ou, utilisez des outils d'analyse en ligne qui ne sont pas affectés par la vitesse et les capacités du périphérique et du réseau. La plupart des outils peuvent être testés à partir de différents endroits du monde:
CSS est peu susceptible d'être une cause directe de problèmes de performance. Cependant, il peut charger des ressources lourdes qui doivent être optimisées en quelques minutes. Par exemple:
Les images sont généralement la raison de la plus grande taille de page, mais de nombreux sites Web ne parviennent pas à optimiser efficacement:
C'est-à-dire, veuillez noter que les données d'image de x kb ne sont pas équivalentes au code CSS de x kb. Les images binaires sont téléchargées en parallèle et ont besoin de peu de traitement à placer sur la page. CSS bloque le rendu et doit être analysé dans un modèle d'objet pour continuer.
Il est rare d'utiliser des images de fond pour créer des bordures, des ombres, des coins arrondis, des gradients et certaines formes géométriques. La définition des "images" avec le code CSS utilisera moins de bande passante et sera plus facile à modifier ou à animer plus tard.
Les services tels que les polices Google facilitent l'ajouter des polices personnalisées à n'importe quelle page. Malheureusement, une ou deux lignes de code peuvent récupérer des centaines de kilobytes de données de police. Suggestions:
Utilisez uniquement les polices requises.
Chargez uniquement l'épaisseur et les styles requis - par exemple, romain, 400 épaisseur, pas d'italique.
Limiter les ensembles de caractères autant que possible. Google Fonts vous permet de sélectionner certains caractères en ajoutant une valeur &text= à l'URL de police - par exemple, fonts.googleapis.com/css?family=Open Sans&text=SitePon pour afficher "SitePoint" dans Open SANS.
Considérons les polices variables, qui définissent plusieurs épaisseurs et styles par interpolation, donc le fichier est plus petit. Le support est actuellement limité à Chrome, Edge et certaines versions de Safari, mais il devrait croître rapidement.
Envisagez des polices de système d'exploitation. Votre police Web de 500 Ko peut être conviviale, mais si vous passez à l'Helvetica ou Arial couramment utilisé, quelqu'un le remarquera-t-il? De nombreux sites Web utilisent des polices Web personnalisées, donc les polices de système d'exploitation standard sont beaucoup moins qu'auparavant!
Évitez d'utiliser @Import
@import Les règles permettent à tous les fichiers CSS d'être inclus dans un autre fichier CSS. Par exemple:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css"); Cela semble être un moyen raisonnable de charger des composants et des polices plus petites. Ce n'est pas le cas. Les règles peuvent être imbriquées, donc le navigateur doit charger et analyser chaque fichier dans l'ordre. Les balises multiples @import dans HTML chargeront les fichiers CSS en parallèle, ce qui est beaucoup plus efficace - en particulier lorsque vous utilisez HTTP / 2: <link>
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
widgets/_carousel.css. !important pour écraser les cascades. Les outils tels que les UNCS peuvent aider à supprimer le code redondant en analysant votre HTML, mais faites attention à l'état CSS causé par les interactions JavaScript.
L'essor de CSS-in-JS permet aux développeurs d'éviter les espaces de noms mondiaux CSS. Habituellement, les noms de classe générés au hasard sont créés au moment de la construction, de sorte que les composants ne peuvent pas entrer en conflit. Si CSS-in-JS améliore votre vie, continuez à l'utiliser. Cependant, cela vaut la peine de comprendre les avantages de la cascade CSS, plutôt que de le combattre dans chaque projet. Par exemple, vous pouvez définir la police par défaut, la couleur, la taille, la table et la forme des champs qui sont couramment appliqués à chaque élément dans un seul emplacement. Il est rare de déclarer chaque style dans chaque composant.
Même les sélecteurs CSS les plus complexes prennent quelques millisecondes pour analyser, mais la réduction de la complexité réduira la taille du fichier et aidera l'analyse du navigateur. Avez-vous vraiment besoin de ce sélecteur? !
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");De même, soyez conscient de la nidification profonde dans des préprocesseurs tels que SASS, où des sélecteurs complexes peuvent être créés par inadvertance.
Certaines propriétés rendent plus lentement que d'autres. Pour augmenter le décalage, essayez de placer des ombres de boîte sur tous les éléments!
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
Les performances du navigateur varieront, mais d'une manière générale, toute opération qui provoque un recalcul avant le dessin sera plus coûteuse en termes de performances:
border-radius box-shadow opacity transform filter position: fixed Les conversions et les animations CSS natives sont toujours plus rapides que les pilotes JavaScript qui modifient les mêmes propriétés. Les animations CSS ne fonctionnent pas dans des navigateurs plus âgés comme IE9 et ci-dessous, mais ces utilisateurs ne sauront jamais ce qui leur manque. C'est-à-dire éviter l'animation pour l'animation. Les effets subtils peuvent améliorer l'expérience utilisateur sans affecter négativement les performances. Trop d'animation peut ralentir le navigateur et peut provoquer le mal des transports chez certains utilisateurs.
L'animation de la taille ou de la position de l'élément peut entraîner la rediffusion de la page entière sur chaque trame. Si l'animation n'affecte que la scène Synthèse , les performances peuvent être améliorées. L'utilisation de l'animation la plus efficace:
opacity et / ou transform pour pan (bouger), échelle ou rotation des éléments (l'espace d'origine utilisé par l'élément ne changera pas). Les navigateurs utilisent généralement des GPU accélérés en matériel pour rendre ces effets. Si ni l'un ni l'autre n'est idéal, envisagez d'utiliser position: absolute pour supprimer les éléments du flux de page afin qu'ils puissent être animés dans leurs propres couches.
will-change permet à l'auteur CSS d'indiquer que les éléments seront animés afin que le navigateur puisse effectuer à l'avance l'optimisation des performances. Par exemple, pour déclarer que l'application est convertie en un élément:
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");Un certain nombre de propriétés séparées par des virgules peuvent être définies. Mais:
will-change en dernier recours pour résoudre les problèmes de performances Les graphiques vectoriels évolutifs (SVG) sont couramment utilisés pour les logos, les graphiques, les icônes et les graphiques plus simples. Au lieu de définir la couleur de chaque pixel comme les bitmaps JPG et PNG, SVG définit des formes telles que les lignes, les rectangles et les cercles à l'aide de XML. Par exemple:
<link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">
Les SVG plus simples sont plus petits que les bitmaps équivalents et peuvent être mis à l'échelle à l'infini sans perdre de clarté. SVG peut être incliné directement sous forme d'images d'arrière-plan dans le code CSS. Cela peut être idéal pour les icônes plus petites et réutilisables et évite les demandes HTTP supplémentaires. Par exemple:
body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]
Plus typique, SVG est intégré directement dans des documents HTML:
*, ::before, ::after {
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}Cela ajoutera directement le nœud SVG au DOM. Par conséquent, toutes les propriétés de style SVG peuvent être appliquées à l'aide de CSS:
.myelement {
will-change: transform;
} Le nombre de code SVG embarqué est réduit et les styles CSS peuvent être réutilisés ou animés au besoin. Notez que l'utilisation de Tags SVG à l'intérieur img ou en tant qu'images d'arrière-plan CSS signifie qu'elles sont séparées du DOM et le style CSS ne fonctionnera pas.
Bitmap standard JPG, PNG et GIF peuvent être codés sous forme de chaînes de base64 dans les données URI. Par exemple:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> </svg>
malheureusement:
Tout en réduisant les demandes HTTP, il offre rarement des avantages évidents, en particulier sur les connexions HTTP / 2. Généralement, évitez les bitmaps en ligne, sauf s'il est peu probable que l'image change fréquemment et que la chaîne de base64 résultante ne dépasse pas quelques centaines de caractères.
Les utilisateurs utilisant Google Page Analytics Tools verront généralement des suggestions "en ligne CRITIQUE CSS" ou "Réduire les styles de blocage de rendu" . Chargement d'un rendu de blocs de fichiers CSS, vous pouvez donc utiliser les étapes suivantes pour améliorer les performances:
<head> dans html <style>. Cette technologie améliore sans aucun doute les performances et peut bénéficier aux applications Web ou à une seule page progressives avec une interface continue. Pour d'autres sites Web / applications, les avantages peuvent être moins évidents:
chacun
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");. Le rendu progressif peut bénéficier à de grands sites Web où les pages individuelles sont construites avec des choix de composants différents. <link>
Le conseil le plus important: Apprenez votre feuille de style! Ajouter beaucoup de CSS à partir de StackOverflow ou Bootstrap peut produire des résultats rapides, mais il bloe également votre base de code avec des ordures inutilisées. Une personnalisation plus approfondie devient frustrante et difficile et l'application ne sera jamais efficace. CSS est facile à apprendre, mais difficile à maîtriser. Si vous souhaitez créer un code client valide, vous ne pouvez pas éviter cette technique. Comprendre certaines bases du CSS peut révolutionner votre flux de travail, améliorer votre application et améliorer considérablement les performances. Est-ce que je manque vos conseils de performances CSS préférés?
Des questions fréquemment posées sur l'optimisation des performances CSS
CSS sont affectées par une variété de facteurs. Le premier est la taille du fichier CSS. Les fichiers plus grands prennent plus de temps à télécharger et à analyser, ralentissant ainsi le site Web. Le deuxième facteur est la complexité du sélecteur CSS. Les sélecteurs complexes nécessitent plus de puissance de traitement pour correspondre aux éléments sur la page. Enfin, l'utilisation d'animations et de transformations CSS peut également affecter les performances, en particulier sur les appareils mobiles avec une puissance de traitement limitée.
Il existe différentes stratégies pour réduire la taille des fichiers CSS. L'une consiste à supprimer des styles inutilisés. Des outils comme PurifyCSS peuvent aider à identifier et supprimer le CSS inutilisé. Une autre stratégie consiste à comprimer CSS, qui supprime des personnages inutiles tels que les espaces et les commentaires. Enfin, envisagez d'utiliser l'outil de compression CSS ou d'activer la compression GZIP sur le serveur pour réduire davantage la taille du fichier.
Les sélecteurs CSS complexes ralentissent les sites Web car ils nécessitent plus de puissance de traitement pour correspondre aux éléments sur la page. Par exemple, les sélecteurs descendants (par exemple, .parent .child) sont plus chers que les sélecteurs de classe (par exemple, .class). En règle générale, les sélecteurs doivent être maintenus aussi simples et spécifiques que possible pour améliorer les performances.
Les animations et transformations CSS peuvent affecter considérablement les performances, en particulier sur les appareils mobiles avec une puissance de traitement limitée. Ils peuvent provoquer des décalages de mise en page et des refonte, ce qui peut ralentir le site Web. Pour améliorer les performances, envisagez d'utiliser l'attribut will-change pour dire au navigateur à l'avance quels attributs et des éléments seront animés.
L'optimisation de CSS pour les appareils mobiles implique une variété de stratégies. Tout d'abord, envisagez d'utiliser des requêtes multimédias pour fournir des styles différents en fonction des caractéristiques de l'appareil. Deuxièmement, évitez les animations et les transformations complexes qui ralentissent les performances sur les appareils mobiles. Enfin, envisagez d'utiliser des images réactives et un chargement paresseux pour réduire la quantité de données que vous devez télécharger.
Vous pouvez utiliser une variété d'outils pour mesurer les performances CSS. Le phare de Google et PageSpeed Insights peuvent fournir un aperçu complet des performances du site Web, y compris CSS. De plus, le panneau de performance des outils de développeur Chrome peut vous aider à identifier et à optimiser les CSS coûteux.
Bien que le CSS lui-même n'affecte pas directement le SEO, il affectera indirectement votre classement. Les sites Web de chargement lent (généralement causés par un grand CSS non optimisé) peuvent conduire à une mauvaise expérience utilisateur, ce qui peut affecter négativement votre référencement. De plus, Google traite la vitesse de la page comme un facteur de classement, donc l'optimisation du CSS peut aider à améliorer votre référencement.
Les préprocesseurs CSS tels que SASS et moins peuvent aider à améliorer les performances en vous permettant d'écrire plus efficace et plus facile à maintenir le code. Ils fournissent des fonctionnalités telles que les variables, la nidification et les mixins qui réduisent la quantité de code dont vous avez besoin pour écrire et faciliter la gestion.
CSS Critical est la quantité minimale de blocage CSS requise pour rendre le contenu au-dessus de l'écran de la page Web. En identifiant et en inclinant CSS critique, vous pouvez accélérer le rendu initial de votre page, améliorant ainsi les performances perceptuelles.
L'optimisation de la livraison CSS implique une variété de stratégies. Tout d'abord, envisagez d'inlinter les petits CSS directement dans HTML pour éviter des demandes HTTP supplémentaires. Deuxièmement, retardez le CSS non critique pour réduire les ressources de blocage des rendements. Enfin, envisagez d'utiliser HTTP / 2 pour livrer plus efficacement les fichiers CSS.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
L'ordinateur indique que msvcr110.dll est manquant et comment le résoudre
échange de devises
Comment ouvrir les fichiers .dat
Méthode d'optimisation du classement des mots clés Baidu SEO
Linux ajoute une méthode de source de mise à jour
Plateforme nationale de monnaie numérique
Quel est le meilleur moyen d'apprendre en premier, le langage C ou le C++ ?
403solution interdite
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
