Comment optimiser la livraison CSS dans WordPress avec peu de tracas
Le CSS peut améliorer l’apparence générale de votre site Web et il est facile à utiliser, à modifier et à entretenir. Le seul inconvénient est la possibilité de ralentir la vitesse de chargement de votre page. Par conséquent, cet article créé par notre équipe de WpDataTables vous montrera comment optimiser la livraison CSS dans WordPress.
Si le CSS n’est pas bien livré, le navigateur devra traiter et télécharger les données avant d’avoir fini de rendre votre page. Cela signifie que les visiteurs connaîtront un délai avant de voir votre page et pourront cliquer dessus, car elle ne semble pas se charger. D’où l’importance d’optimiser la livraison CSS alors lisez la suite pour savoir comment éviter les pièges qui pourraient ralentir votre page web.
Tout sur la livraison CSS
Fondamentalement, CSS, une feuille de style en cascade, rend les sites Web attrayants, et sans eux, les sites Web seraient toujours bloqués dans les années 90.
Les pages Web, y compris les pages Web WordPress, sont stylisées par CSS. Chaque thème WordPress utilise un fichier style.cc pour créer un look élégant. L’ajout de plugins ajoutera plus de feuilles de style, par exemple, si vous téléchargez un plugin de widget, il ajoutera un fichier CSS supplémentaire (feuille de style) pour créer l’apparence souhaitée.
Les scripts CSS sont chargés avant que votre site ne soit visible, ce qui signifie que votre navigateur n’affichera aucun contenu tant que les informations CSS fournies ne seront pas traitées. .Cela entraîne un blocage du rendu qui se produit lorsqu’un navigateur charge tous les scripts CSS avant d’afficher un site.
CSS peut être utilisé de plusieurs façons pour la livraison dans WordPress, avec de nombreuses configurations différentes.
Indépendamment de la façon dont vous avez configuré votre page Web, CSS peut réellement aider à rendre votre site plus rapide.
JavaScript et CSS bloquant le rendu – Qu’est-ce que c’est ?
Les sites de chargement rapide sont attendus dans notre société de haute technologie et c’est vital pour un référencement de haut niveau. PageSpeed Insights de Google peut vous aider à comprendre la vitesse de chargement de votre site. Parfois, un avertissement apparaît lorsque vous utilisez l’outil – "Éliminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison", mais voici une solution à ce problème.
Le rendu du HTML est nécessaire avant qu’un navigateur puisse afficher une page Web. Pendant ce temps, il rencontrera des scripts et des feuilles de style et devra s’arrêter pour demander et télécharger ce fichier. Ensuite, il l’exécute et continue à parcourir le HTML. La plupart des thèmes et plugins pour WordPress utilisent de nombreux fichiers JavaScript et/ou CSS, ce qui peut prendre beaucoup de temps pour afficher ne serait-ce qu’une seule page de votre site.
Cela empêche les visiteurs de votre site de voir rapidement les informations des pages Web et, pour aggraver les choses, ces scripts n’ont pas besoin d’être chargés immédiatement.
Ces fichiers inutiles sont appelés CSS et JavaScript bloquant le rendu. Continuez à lire pour savoir ce qu’ils sont et comment les éliminer de votre site WordPress.
Utilisez Google Pagespeed Insights pour découvrir les CSS et JavaScript bloquant le rendu
Les navigateurs à chargement lent essaient généralement de traiter une quantité importante de code CSS et ne peuvent donc pas rendre la page, cependant, toutes les ressources CSS ne bloquent pas le rendu.
Les sites Web apparaissent vides ou seulement partiellement visibles si le CSS n’a pas été chargé correctement ou à moins que le CSS ne soit optimisé, ce qui peut entraîner des polices ou des mises en page incorrectes.
Il est important de comprendre quels éléments sont nécessaires et lesquels ne le sont pas, afin d’optimiser la livraison du CSS.
Pour démarrer le processus de blocage du rendu, testez d’abord la vitesse de votre site avec Google PageSpeed Insights.
Voici comment:
- Accédez à la page Google PageSpeed Insights
- Copiez et collez l’URL de notre site dans le champ correspondant
- Cliquez sur "Analyser"
- Cela donnera lieu à un rapport. Notez les scripts qui apparaissent comme "Éliminer JavaScript et CSS bloquant le rendu"
Habituellement, ces CSS sont cruciaux pour votre site :
- Au-dessus des styles de page de pliage
- Thèmes
- Couleur du fond
- Autres, selon le type de site
Ces CSS sont généralement moins importants :
- Sous le pli CSS
- CSS destiné à d’autres appareils
Réduire les scripts bloquant le rendu
Il est possible de minimiser le nombre de scripts bloquant le rendu que vous avez sur votre site en :
- Réduire la quantité de CSS et de JavaScript. Vous pouvez supprimer tout espace blanc inutile et tout commentaire
- Combiner votre CSS et JavaScript. Prenez différents fichiers .css et .js et ajoutez-les ensemble, ce qui entraînera moins de fichiers.
- Différer le chargement de JavaScript. Vous pouvez les faire charger en dernier après que tout le reste a été chargé, en utilisant le chargement asynchrone.
WordPress utilise un filtre combiné pour enregistrer les scripts frontaux, afin que vous puissiez voir les fichiers CSS ou JavaScript entrants. Vous ne savez peut-être pas quoi rechercher, il est donc utile d’utiliser un plugin.
lLe CSS n’est pas nécessaire sur toutes les pages tout le temps. Cependant, il est là pour une raison et vous l’utiliserez entièrement à un moment donné, là où un chemin de rendu critique est requis.
Différentes parties du CSS peuvent être requises à partir d’une page Contactez-nous et d’une page Services que nous offrons. Lorsque quelqu’un charge la page Services que nous offrons, les parties CSS qui sont uniquement destinées à la page Contactez-nous ne sont pas nécessaires à ce moment-là, cependant, ce CSS est toujours chargé, car le webmaster a besoin de tous les fichiers CSS chargés pour afficher la page Web.
Par conséquent, le site Web a besoin de tous les CSS, mais pas de tous les CSS pour chaque page. Par conséquent, le CSS critique est différent sur chaque page et pour chaque utilisateur de votre site.
CSS et JavaScript qui bloquent le rendu au-dessus du pli sont un problème sérieux et doivent être corrigés dès que possible.
Il n’est pas réaliste de s’attendre à ce que votre site obtienne un score de 100/100, alors visez un bon score qui donnera à vos visiteurs une page de chargement rapide.
Ne supprimez pas les scripts nécessaires à une bonne UX ; ceux-ci sont plus importants que d’essayer d’obtenir un score plus élevé.
Optimisation du chemin de rendu critique dans WordPress
Le chemin de rendu critique indique l’ordre dans lequel le navigateur exécute les tâches pour rendre votre page, c’est-à-dire la séquence dans laquelle il télécharge et traite CSS, HTML et JavaScript et les affiche sur le navigateur.
Le contenu au-dessus du pli est important car c’est la première partie que l’utilisateur verra. Il y a plus de temps pour charger le contenu sous le pli, car l’utilisateur devra faire défiler pour le voir.
Pour charger la section ci-dessus le pli aussi rapidement que possible, vous devez :
- Créez le code HTML afin qu’il donne la priorité au chargement des parties au-dessus du pli
- Minimiser les données utilisées par CSS, JS et HTML
Vous trouverez plus d’explications dans le guide PageSpeed de Google. Parfois, les données dont vous avez besoin pour charger l’ATF dépassent la fenêtre de congestion (s’élevant à 14,6 Ko). Dans ce cas, d’autres trajets réseau doivent se produire du serveur au navigateur et inversement. Les réseaux mobiles qui ont une latence élevée constateront que cela empêche la page de se charger.
Le DOM est construit une partie à la fois par le navigateur, ce qui peut réduire le temps nécessaire pour rendre l’ATF. Structurez le code HTML de sorte qu’au-dessus du pli, le contenu se charge en premier et le reste de la page ensuite.
Le processus d’optimisation nécessite une amélioration, une surveillance et une mesure continues.
Bien que CSS puisse être utilisé de plusieurs façons pour créer des pages Web élégantes, le plus important est qu’il se charge rapidement. Nettoyez le code et suivez les étapes ci-dessus pour accélérer le chargement de vos pages.
Si vous avez apprécié la lecture de cet article sur la façon d’optimiser la livraison CSS dans WordPress, vous devriez consulter celui-ci sur la façon d’ajouter des balises méta dans WordPress sans plugin.
Nous avons également écrit sur quelques sujets connexes tels que comment intégrer un pdf dans WordPress, comment intégrer Excel dans html, comment masquer une image en vedette dans un article WordPress, comment savoir si un site est WordPress, comment désinstaller WordPress de cPanel et comment créer un site Web comme Amazon.