Optimiser le CSS pour la vitesse du site - 9 façons
· Время на чтение: 6мин · par
·
Publié
· Mis à jour
Écoutez cet article
Un site lent est toujours mauvais ! je pense que la phrase optimisation du code CSS pour accélérer le site, est souvent présent dans les recherches ainsi que dans les redirections 301 ou robots.txt. Ou peut-être êtes-vous le genre de développeur qui soumet des sites Web sans se soucier des performances optimales ?
Si vous appartenez à la première option, alors cet article est pour vous. Je vais maintenant vous parler des 9 meilleures façons de vous aider à optimiser votre CSS. Ces conseils permettront d'accélérer votre site et de grimper dans les SERPs. Cet effet augmentera considérablement le flux de nouveaux visiteurs sur votre site.
Le contenu de l'article :
- L'importance de la vitesse du site Web
- Utiliser des sprites d'image
- Optimisation CSS
- Réduire le code inutile
- Mettez les tableaux dans le head et les scripts JS dans le footer
- Séparer les fichiers CSS
- Réduisez le nombre d'espaces dans votre code
- Documentez votre code
- Organisez votre code
- Technique KISS (Keep it Simple Stupid)
L'importance de la vitesse du site pour le classement organique
Vous serez surpris de l'importance des sites Web plus rapides. Il existe plusieurs raisons principales, mais leur influence affecte considérablement la position du site. Raisons principales:
- Les visiteurs du site Web n'aiment pas attendre longtemps le chargement complet d'une page ;
- Vos clients reviendront certainement sur le site s'il fonctionne rapidement ; les sites plus rapides sont toujours mieux classés dans les moteurs de recherche ;
- La vitesse du site ajoute également de la valeur à votre stratégie de référencement ;
Ces ressources sont tout simplement géniales et font bonne impression. Maintenant, que feriez-vous pour rendre votre site plus rapide ? Bien sûr, l'amélioration de cette situation peut nécessiter de nombreuses actions de votre part.
Par exemple la mise à niveau de votre serveur, de votre RAM, de votre stockage ou de votre matériel en général, mais saviez-vous que la raison principale d'un site lent réside dans votre code source ? Le manque de CSS optimisé est la raison la plus courante. Cela signifie que la réduction de la taille du fichier de votre feuille de style, même de quelques kilo-octets, aura un impact significatif sur le temps de chargement de votre page.
Utiliser des sprites d'image
CSS Sprites est un moyen de combiner plusieurs images en un seul fichier image. Utilisez-le davantage sur le site Web pour améliorer les performances. Cette utilisation de sprites d'image est une technique ancienne. Lorsqu'il s'agit de réduire la taille du fichier CSS et de réduire les temps de chargement des pages, cette technique est indispensable.
Les sprites d'image vous permettent de regrouper des images dans un seul gros fichier .png. Cette méthode réduit les requêtes HTTP et accélère les temps de chargement des pages. Un sprite d'image est un excellent choix si vous utilisez beaucoup d'icônes et de graphiques sur votre site. Cette option réduira considérablement la surcharge liée à l'extraction de plusieurs images.
Optimisation CSS
Raccourcissement CSS consiste simplement à compresser votre fichier dans un nouveau fichier avec le moins d'espace possible. Plus le code est petit, plus il sera lu rapidement par le navigateur de l'utilisateur.
Bien sûr, vous n'avez pas à le faire manuellement car il existe des compresseurs automatiques sur Internet. Ce n'est que grâce à des outils en ligne aussi simples qu'il est possible d'effectuer une compression en quelques minutes. Voici un tel minificateur : http://www.cssminifier.com
Réduire le code inutile
Nous n'avons pas besoin de code répété. Un code comme celui-ci ralentit considérablement le chargement des éléments. Le navigateur doit passer par du code en double à plusieurs reprises, y consacrant une fraction de seconde supplémentaire.Une autre astuce pour augmenter la vitesse de chargement des pages consiste à réduire le code inutile. Une telle amélioration peut être obtenue en vérifiant le code redondant ou en double.
Mettez les tables CSS dans la tête et les scripts JS dans le pied de page
Il est recommandé de placer la feuille de style en haut (entre les balises head) et le code JavaScript en bas. Assurez-vous que votre code se charge avant le reste de la page. La principale raison de placer JavaScript en bas du site est sa grande taille. Ainsi que son impact supplémentaire sur la vitesse du site Web. Par conséquent, ces scripts sont placés au bas du site. Cela leur permet de se charger après les composants principaux de la page.
Les styles essentiels nécessaires pour styliser le contenu en haut de la page sont intégrés et immédiatement appliqués au document. Le fichier small.css complet est chargé après le rendu initial de la page. Ses styles sont appliqués à la page après son chargement, sans bloquer le rendu initial du contenu critique.
Ne pas intégrer d'URI Big Data
Soyez prudent lorsque vous incorporez des URI de données dans des fichiers de style. Bien que l'utilisation sélective d'URI de petites données dans votre CSS puisse avoir du sens, l'intégration d'URI de Big Data peut entraîner une taille plus grande de votre CSS en haut du pli, ce qui ralentit les temps de rendu des pages.
Ne pas intégrer d'attributs CSS
L'intégration d'attributs CSS dans des éléments HTML (tels que ) doit être évitée dans la mesure du possible, car cela conduit souvent à une duplication inutile du code. De plus, le CSS intégré dans les éléments HTML est bloqué par la politique de sécurité du contenu (CSP) par défaut.
Séparer les fichiers CSS
Vous pouvez également séparer les fichiers CSS, c'est-à-dire différentes feuilles de style. Par exemple, si vous ciblez plusieurs navigateurs tels que IE, Chrome ou Firefox. Par exemple, au lieu de rechercher des hacks CSS dans une feuille de style, vous pouvez utiliser des instructions conditionnelles IE pour charger une autre feuille de style (pour IE6, par exemple). De cette façon, vous ne chargerez pas de code IE lors de l'utilisation de Chrome. Cela réduira considérablement la taille du fichier.
Réduisez le nombre d'espaces dans votre code
Vous devriez toujours essayer de réduire le nombre d'espaces dans votre feuille de style. L'augmentation de l'espace blanc occupe des octets libres. Cela peut faire la différence entre un site plus rapide et plus lent dans les très grands projets.En réduisant le nombre d'espaces blancs, la taille du fichier est réduite. Ainsi, nous accélérons le téléchargement du fichier, en raison du poids inférieur.
Documentez votre code
Vous devez documenter votre code dans la mesure du possible. L'utilisation de commentaires tels que /* Commenter ici */ peut vous aider à identifier le code inutile. Bien que l'ajout de commentaires prenne beaucoup de place, il est facile de les négliger : dans certains cas, les commentaires inutiles sont simplement supprimés. Cette technique vous permet de vous débarrasser de l'excès de poids de CSS de manière très productive.
Organisez votre code
Optimisation du code CSS est une technique dont beaucoup ne penseraient même pas à parler. En fait, à plusieurs niveaux, l'organisation de votre code peut vous aider à réduire considérablement la taille des fichiers. En conséquence, augmentez la vitesse de votre site.Je me demande comment ? C'est très simple.
Placez vos classes CSS dans le bon ensemble de branches. Cette méthode garantit une duplication minimale. Le code non organisé est un problème courant dans la conception Web moderne. Dans certains scénarios, organiser votre code désordonné en branches hiérarchiques est tout ce dont vous avez besoin pour charger votre site. Essayez d'éviter les hacks CSS dans une seule feuille de style. Utilisez plutôt les méthodes indiquées aux points 5 et 8.
Technique KISS (Keep it Simple Stupid)
Le dernier mot est de s'assurer que tout ce que vous faites est conforme à la technique KISS. KISS signifie Keep it Simple Stupid. Si vous créez à nouveau un fichier ! Ensuite, vous devriez certainement être sur la bonne voie pour un code organisé, bien écrit, moins redondant et propre. Comme vous pouvez le constater, l'optimisation du CSS n'est pas difficile. Surtout dans certains cas, vous pouvez vous débrouiller avec quelques paragraphes de cet article. Ces techniques aideront parfois à accélérer le site.
Lire cet article :
- Optimisation du code de site JS et CSS en ligne - un guide détaillé
- Optimisation technique du site Web - les actions les plus importantes
Merci d'avoir lu : SEO HELPER | NICOLA.TOP
