{"id":226851,"date":"2022-09-04T18:47:00","date_gmt":"2022-09-04T15:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226851"},"modified":"2022-11-09T00:06:48","modified_gmt":"2022-11-08T21:06:48","slug":"comment-optimiser-la-livraison-css-dans-wordpress-avec-peu-de-tracas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-optimiser-la-livraison-css-dans-wordpress-avec-peu-de-tracas\/","title":{"rendered":"Comment optimiser la livraison CSS dans WordPress avec peu de tracas"},"content":{"rendered":"\n

Le CSS peut am\u00e9liorer l’apparence g\u00e9n\u00e9rale de votre site Web et il est facile \u00e0 utiliser, \u00e0 modifier et \u00e0 entretenir. Le seul inconv\u00e9nient est la possibilit\u00e9 de ralentir la vitesse de chargement de votre page. Par cons\u00e9quent, cet article cr\u00e9\u00e9 par notre \u00e9quipe de WpDataTables<\/a> vous montrera comment optimiser la livraison CSS dans WordPress.<\/p>\n

Si le CSS n’est pas bien livr\u00e9, le navigateur devra traiter et t\u00e9l\u00e9charger les donn\u00e9es avant d’avoir fini de rendre votre page. Cela signifie que les visiteurs conna\u00eetront un d\u00e9lai avant de voir votre page et pourront cliquer dessus, car elle ne semble pas se charger. D’o\u00f9 l’importance d’optimiser la livraison CSS alors lisez la suite pour savoir comment \u00e9viter les pi\u00e8ges qui pourraient ralentir votre page web.<\/p>\n

Tout sur la livraison CSS<\/strong><\/h3>\n

Fondamentalement,<\/strong> CSS, une feuille de style en cascade, rend les sites Web attrayants, et sans eux, les sites Web seraient toujours bloqu\u00e9s dans les ann\u00e9es 90.<\/p>\n

Les pages Web, y compris les pages Web WordPress, sont stylis\u00e9es par CSS. Chaque th\u00e8me WordPress utilise un fichier style.cc pour cr\u00e9er un look \u00e9l\u00e9gant. L’ajout de plugins ajoutera plus de feuilles de style, par exemple, si vous t\u00e9l\u00e9chargez un plugin de widget, il ajoutera un fichier CSS suppl\u00e9mentaire (feuille de style) pour cr\u00e9er l’apparence souhait\u00e9e.<\/p>\n

Les scripts CSS sont charg\u00e9s 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\u00e9es. .Cela entra\u00eene un blocage du rendu qui se produit lorsqu’un navigateur charge tous les scripts CSS avant d’afficher un site.<\/p>\n

CSS peut \u00eatre utilis\u00e9 de plusieurs fa\u00e7ons pour la livraison dans WordPress, avec de nombreuses configurations diff\u00e9rentes.<\/p>\n

Ind\u00e9pendamment de la fa\u00e7on dont vous avez configur\u00e9 votre page Web, CSS peut r\u00e9ellement aider \u00e0 rendre votre site plus rapide.<\/p>\n

JavaScript et CSS bloquant le rendu – Qu’est-ce que c’est ?<\/strong><\/h3>\n

\"Comment<\/a><\/p>\n

Les sites de chargement rapide sont attendus dans notre soci\u00e9t\u00e9 de haute technologie et c’est vital pour un r\u00e9f\u00e9rencement de haut niveau. PageSpeed \u200b\u200bInsights de Google<\/a> peut vous aider \u00e0 comprendre la vitesse de chargement de votre site. Parfois, un avertissement appara\u00eet lorsque vous utilisez l’outil – "\u00c9liminer le JavaScript et le CSS bloquant le rendu dans le contenu au-dessus de la ligne de flottaison", mais voici une solution \u00e0 ce probl\u00e8me.<\/p>\n

Le rendu du HTML est n\u00e9cessaire 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\u00eater pour demander et t\u00e9l\u00e9charger ce fichier. Ensuite, il l’ex\u00e9cute et continue \u00e0 parcourir le HTML. La plupart des th\u00e8mes 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.<\/p>\n

Cela emp\u00eache 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’\u00eatre charg\u00e9s imm\u00e9diatement.<\/p>\n

Ces fichiers inutiles sont appel\u00e9s CSS et JavaScript bloquant le rendu. Continuez \u00e0 lire pour savoir ce qu’ils sont et comment les \u00e9liminer de votre site WordPress.<\/p>\n

Utilisez Google Pagespeed Insights pour d\u00e9couvrir les CSS et JavaScript bloquant le rendu<\/strong><\/h3>\n

Les navigateurs \u00e0 chargement lent essaient g\u00e9n\u00e9ralement de traiter une quantit\u00e9 importante de code CSS et ne peuvent donc pas rendre la page, cependant, toutes les ressources CSS ne bloquent pas le rendu.<\/p>\n

Les sites Web apparaissent vides ou seulement partiellement visibles si le CSS n’a pas \u00e9t\u00e9 charg\u00e9 correctement ou \u00e0 moins que le CSS ne soit optimis\u00e9, ce qui peut entra\u00eener des polices ou des mises en page incorrectes.<\/p>\n

Il est important de comprendre quels \u00e9l\u00e9ments sont n\u00e9cessaires et lesquels ne le sont pas, afin d’optimiser la livraison du CSS.<\/p>\n

Pour d\u00e9marrer le processus de blocage du rendu, testez d’abord la vitesse de votre site avec Google PageSpeed \u200b\u200bInsights<\/a>.<\/p>\n

Voici comment:<\/p>\n

\"Comment<\/a><\/p>\n