{"id":226887,"date":"2022-09-05T10:50:00","date_gmt":"2022-09-05T07:50:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=226887"},"modified":"2022-11-09T01:12:14","modified_gmt":"2022-11-08T22:12:14","slug":"comment-eliminer-javascript-et-css-bloquant-le-rendu-dans-le-contenu-au-dessus-du-pli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-eliminer-javascript-et-css-bloquant-le-rendu-dans-le-contenu-au-dessus-du-pli\/","title":{"rendered":"Comment \u00e9liminer JavaScript et CSS bloquant le rendu dans le contenu au-dessus du pli"},"content":{"rendered":"\n

Lors de la cr\u00e9ation d’un site Web, certains aspects sont primordiaux pour offrir aux utilisateurs une exp\u00e9rience fluide. L’un de ces aspects est repr\u00e9sent\u00e9 par le temps de chargement. Un site Web qui se charge rapidement<\/a> est toujours appr\u00e9ci\u00e9 par les visiteurs qui souhaitent trouver ce qu’ils recherchent le plus rapidement possible. Afin d’obtenir un temps de chargement rapide, vous devez apprendre \u00e0 \u00e9liminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison.<\/p>\n

La vitesse d’un site Web peut \u00eatre influenc\u00e9e par un large \u00e9ventail de facteurs, mais les facteurs abord\u00e9s dans cet article ont le plus grand impact. L’\u00e9quation parfaite du site Web peut \u00eatre d\u00e9licate \u00e0 r\u00e9soudre, car certains \u00e9l\u00e9ments ne d\u00e9pendent pas de vos actions. Ils sont dict\u00e9s par chaque situation en particulier (ex. emplacement g\u00e9ographique, d\u00e9bit Internet). Cependant, vous pouvez optimiser la livraison CSS en modifiant les \u00e9l\u00e9ments que vous pouvez contr\u00f4ler enti\u00e8rement. En savoir plus sur ce sujet ci-dessous dans cet article cr\u00e9\u00e9 par notre \u00e9quipe de wpDataTables<\/a>.<\/p>\n

D\u00e9finir le blocage du rendu et le contenu au-dessus de la ligne de flottaison<\/h2>\n

Blocage du rendu<\/h3>\n

Le blocage du rendu fait r\u00e9f\u00e9rence aux \u00e9l\u00e9ments qui emp\u00eachent le contenu crucial d’un site Web (par exemple, le corps du texte principal d’un article) de se charger avant que la page enti\u00e8re ne soit charg\u00e9e. Un bon exemple d’un tel \u00e9l\u00e9ment est repr\u00e9sent\u00e9 par tout code JavaScript ou CSS suppl\u00e9mentaire ajout\u00e9 \u00e0 un site Web. Ce code peut emp\u00eacher l’utilisateur de voir quoi que ce soit dans son navigateur tant que le code n’a pas \u00e9t\u00e9 enti\u00e8rement ex\u00e9cut\u00e9, devenant ainsi un blocage du rendu.<\/p>\n

Contenu au-dessus de la ligne de flottaison<\/h3>\n

Lorsqu’un visiteur acc\u00e8de \u00e0 un site Web, il est accueilli par une certaine partie du site, c’est-\u00e0-dire la partie la plus haute. Pour voir la suite, l’utilisateur devra faire d\u00e9filer vers le bas ou effectuer d’autres actions sur le site. Le contenu que les visiteurs voient imm\u00e9diatement apr\u00e8s y avoir acc\u00e9d\u00e9 est appel\u00e9 contenu au-dessus de la ligne de flottaison.<\/p>\n

\u00c0 propos du blocage du rendu en JavaScript et CSS<\/h3>\n

Les navigateurs lisent le HTML pour afficher un site. Il s’agit d’un processus qui comporte plusieurs \u00e9tapes. Si le navigateur tombe sur des \u00e9l\u00e9ments faisant r\u00e9f\u00e9rence \u00e0 un script\/une feuille de style, des \u00e9tapes suppl\u00e9mentaires sont n\u00e9cessaires pour lire le code. Le navigateur devra demander un fichier, attendre une r\u00e9ponse, t\u00e9l\u00e9charger le fichier depuis le serveur, puis ex\u00e9cuter le fichier.<\/p>\n

Bien entendu, ces \u00e9tapes suppl\u00e9mentaires peuvent ralentir le temps de chargement. Gardez \u00e0 l’esprit que certains th\u00e8mes WordPress impliquent plusieurs fichiers CSS ou JavaScript. Le temps de chargement peut \u00eatre consid\u00e9rablement ralenti \u00e0 cause de ces fichiers. C’est la raison pour laquelle vous devrez \u00e9liminer les ressources bloquant le rendu de votre site. Le plus souvent, ce ne sont pas des fichiers critiques, vous pouvez donc diff\u00e9rer l’analyse JavaScript pour r\u00e9duire le blocage du rendu des pages, am\u00e9liorant ainsi la vitesse sur votre site.<\/p>\n

Identifier JavaScript et CSS bloquant le rendu<\/strong><\/h3>\n

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

Pour \u00e9liminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison, vous devrez identifier ces \u00e9l\u00e9ments. L’un des moyens les plus simples de les identifier consiste \u00e0 ouvrir votre site Web avec un outil de vitesse de page qui vous indique les probl\u00e8mes auxquels il est confront\u00e9 lors du chargement. PageSpeed \u200b\u200bInsights de Google<\/a> est l’un de ces outils qui devrait vous aider \u00e0 trouver les fichiers qui bloquent le rendu sur votre site. Une fois que vous avez compris quels sont les fichiers, vous pouvez proc\u00e9der \u00e0 la suppression ou \u00e0 la r\u00e9organisation du JavaScript bloquant le rendu.<\/p>\n

Comment \u00e9liminer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison\u00a0?<\/h3>\n

Vous avez deux options dans cette situation\u00a0: apprenez \u00e0 \u00e9liminer vous-m\u00eame JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus de la ligne de flottaison ou utilisez un plugin pour le faire. Si vous \u00eates f\u00e9ru de technologie et que vous souhaitez apprendre comment les ressources bloquant le rendu sont \u00e9limin\u00e9es, appliquez l’une de ces m\u00e9thodes\u00a0:<\/p>\n

Effacer JavaScript du chemin de rendu critique<\/h3>\n

Le chemin de rendu critique ne doit inclure que les \u00e9l\u00e9ments essentiels pour le site Web. Vous pouvez d\u00e9placer les ressources JavaScript inutiles hors de ce chemin. Cela se fait en ajoutant certains attributs l\u00e0 o\u00f9 JavaScript est requis. Les attributs sont\u00a0:<\/p>\n