Catégories
Astuces et Design

Éviter les CSS «  inutiles '' dans vos projets

Il semble que les concepteurs Web s'efforcent constamment d'optimiser leurs créations. À court terme, cela profite aux performances. Sur le long terme, cela peut également simplifier la maintenance.

Très souvent, cela signifie l'optimisation des images, la mise en œuvre de la mise en cache des pages et la diffusion de fichiers via un réseau de diffusion de contenu (CDN). Ce sont toutes des mesures efficaces. Mais un élément qui ne retient pas suffisamment l'attention est le gonflement potentiel du CSS d'un site Web.

Bien que vous puissiez réduire vos feuilles de style ou les diffuser sur un CDN, vous pouvez en faire plus. Plus précisément, éliminer le balisage inutile qui n'est pas utilisé et resserrer les styles qui sont toujours pertinents.

Il est préférable de le faire dès le début du processus de construction. Mais il est également possible d'alléger la charge sur les sites Web existants. Jetons un coup d'œil aux défis à relever, ainsi qu'à quelques outils et techniques qui peuvent permettre un site Web plus rapide.

La boîte à outils Web Designer

Téléchargements illimités: plus de 1 000 000 modèles Web, thèmes, plug-ins, éléments de conception et bien plus encore!

Gérer les ballonnements intégrés dans les thèmes et les cadres

Auparavant, les sites Web étaient essentiellement construits à partir de zéro. C'était une excellente approche dans la mesure où les concepteurs pouvaient inclure uniquement les styles et les scripts nécessaires. Si cela est fait avec soin, ce processus pourrait donner lieu à un site Web finement réglé.

Bien entendu, il y a un certain nombre de raisons pour lesquelles cette pratique a été abandonnée par nombre d’entre nous. Ce n’est tout simplement pas efficace en termes de délais et de contraintes budgétaires.

Les sites Web modernes sont souvent construits sur un produit prédéfini. Cela pourrait être un cadre CSS tel que Bootstrap ou un thème WordPress élaboré. Dans certains cas, un thème CMS peut même inclure un cadre.

Ces produits sont censés être une taille unique. En incluant tout ce dont vous pourriez avoir besoin, le développement est d'autant plus rapide. Malheureusement, on ne peut pas en dire autant de leur impact sur les performances.

Alors, que peut-on faire pour améliorer la situation?

Utilisez des cadres basés sur les composants ou légers, si possible

Théoriquement, il est possible à la fois d’obtenir les avantages d’un cadre tout en évitant les ballonnements. Cela peut être réalisé en utilisant des packages basés sur des composants qui vous permettent de charger des fonctionnalités spécifiques tout en laissant les autres de côté. Le Bootstrap susmentionné permet ce type de personnalisation – jusqu'à un certain point.

Une autre alternative est Tailwind CSS, qui fournit des styles de base et suppose que vous construirez dessus. Si vous recherchez un bon point de départ, par opposition à un produit plus fini, cela pourrait vous convenir.

Il n’y a rien de mal à utiliser un framework. Mais recherchez-en un qui soit: a) vous laisse choisir les composants à charger, ou; b) propose une feuille de style barebones qui peut être facilement personnalisée. Dans tous les cas, votre projet bénéficiera de la charge réduite.

Écran d'accueil CSS de Tailwind.

Que faire avec les thèmes CMS?

Les produits tels que les thèmes WordPress commerciaux peuvent être délicats, car ils incluent souvent une multitude de styles, que vous en ayez besoin ou non.

Il est possible qu’un thème spécifique soit bien organisé au point qu’il soit assez facile de retirer les feuilles de style dont vous ne voulez pas. Il peut même y avoir un panneau d'options de thème qui vous permet de le faire en quelques clics. Cependant, il s'agit plus probablement de l'exception que de la règle.

La meilleure façon d'éviter un thème gonflé est de créer le vôtre. Par exemple, un thème de démarrage WordPress offrira des CSS simples que vous pouvez personnaliser. Cela permet de garantir une feuille de style plus légère et de supprimer au moins une infime partie des frais généraux associés à un CMS.

Souligne l'écran d'accueil du thème WordPress Starter.

Désencombrer les feuilles de style existantes

Changer notre orientation vers un site Web existant, désencombrer et refactoriser le CSS peut être effectué de deux manières:

Révision manuelle des styles

Lancer votre éditeur de code préféré et ouvrir les feuilles de style de votre site est toujours un bon point de départ. Oui, cela peut être une expérience fastidieuse. Mais c'est aussi un moyen efficace de prendre soin des fruits à portée de main.

Il n'est pas nécessaire de scruter chaque ligne de CSS. Au lieu de cela, l'idée est de trouver tous les éléments dont vous savez qu'ils ne sont pas utilisés ou ne sont pas aussi efficaces qu'ils pourraient l'être.

Par exemple, supposons que vous exécutiez un site Web WordPress qui a des styles personnalisés pour écraser ceux d'un plugin. Et si vous n'utilisez plus ce plugin en particulier? Dans ce cas, les styles peuvent être facilement supprimés.

Ou peut-être existe-t-il une sélection de styles que vous n'utilisez que sporadiquement – comme pendant les vacances d'hiver. Il peut être intéressant de déplacer ces styles dans un fichier séparé et de les appeler uniquement lorsque cela est nécessaire.

Ensuite, il y a des sélecteurs CSS qui ne sont tout simplement pas très bien écrits. Peut-être qu'ils ont un certain nombre de préfixes de navigateur dont on n'a plus besoin ou des propriétés dupliquées inutiles. C'est une zone mûre pour le nettoyage.

Si la conception de votre site date de plus de deux ans, vous serez peut-être surpris de voir à quel point vous pouvez trouver un style excessif.

Code CSS affiché sur un écran.

Utilisez un outil automatisé

Il existe un certain nombre d'outils qui analyseront votre site (ou au moins une partie de celui-ci) et vous présenteront une liste des CSS inutilisés. Cependant, ne retenez pas votre souffle en attendant la perfection.

Tout comme les outils d'accessibilité automatisés, les scanners CSS inutilisés ne peuvent vous donner qu'une quantité limitée d'informations. Par conséquent, il est préférable de prendre les résultats avec un grain de sel et de les utiliser comme guide, et non comme une réponse définitive à votre question.

Chris Coyier de CSS-Tricks a écrit un article remarquable sur ce problème particulier qui mérite d'être vérifié. Il teste non seulement certains de ces outils, mais examine également les problèmes plus importants, tels que les requêtes médiatiques.

Cependant, si vous souhaitez essayer un ou plusieurs de ces outils, voici quelques-uns des choix les plus populaires:

Une combinaison d'un outil automatisé et d'un examen manuel est probablement la meilleure solution. Faire les deux vous donnera une image plus complète des optimisations de performances potentielles. Il se peut que vous n'attrapiez pas tous les éléments, mais vous avez toujours la possibilité d'avoir un impact mesurable. Vous pouvez en faire avant et après les tests avec un outil tel que GTmetrix pour voir les résultats.

Écran d'accueil CSS inutilisé.

Quand il s'agit de CSS: ne gaspillez pas, ne voulez pas

La taille d’une feuille de style est incroyable, en particulier lors de l’utilisation d’un framework CSS prêt à l'emploi. Bien sûr, c’est bien que l’auteur ait fait beaucoup de travail pour vous en termes d’éléments de style. En même temps, cela laisse beaucoup sur la table en ce qui concerne le rendu des pages et les temps de chargement.

C'est quelque chose qui mérite d'être pris en compte dès le début d'un projet. En cherchant à réduire le poids d'une feuille de style, vous contribuez à éliminer la moindre goutte d'optimisation de votre site.

Si votre site Web est déjà accessible au monde entier, vous pouvez encore prendre des mesures positives. Passez en revue le CSS et recherchez les éléments à rationaliser ou à supprimer. Utilisez l'un des nombreux outils automatisés disponibles pour trouver des éléments que vous avez peut-être manqués.

L'essentiel est que réduire votre CSS à l'essentiel n'est pas un processus parfait. Cependant, cela vaut toujours votre temps et vos efforts.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *