![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR_Intext-banners_Mega-WordPress-Cheat-Sheet-1024x283-1.png\/public\")
<\/a><\/figure>Qu’est ce que « blocage de rendu dans le contenu au dessus de la ligne de flotaison » veut dire ?<\/span><\/h2>Pour comprendre cette suggestion, nous devons regarder les critères de Google pour la notation des sites sur PageSpeed Insights. Il existe dix règles de vitesse définies par Google<\/a>, et l’échec dans l’un de ces résultats entraîne une réduction des points.<\/p>Les codes Javascript et les styles CSS qui bloquent l’affichage du contenu constituent l’une de ces règles. En règle générale, les scripts JS et CSS forcent le navigateur Web à retarder le chargement de la page HTML. Bien sûr, ce n’est pas un problème. En fait, c’est précisément ce que vous voulez; personne ne souhaite regarder un contenu qui n’a pas été mis en forme.<\/p>
JS et les styles CSS qui bloquent l’affichage du contenu, cependant, se réfère aux scripts qui introduisent une latence de chargement mais ne sont pas utilisés dans le contenu au-dessus de la ligne de flottaison (ATF). Le contenu ATF se réfère à la partie de la page web qui est visible lorsque la page est chargée; toute partie de la page que vous devez faire défiler vers le bas pour atteindre, est non-ATF. Ainsi, avec cette suggestion, Google vous permet de savoir qu’il existe des scripts JS et CSS sur cette page Web qui ralentissent votre site inutilement<\/strong>, car la partie de la page qu’ils affectent n’est même pas observable pour l’utilisateur.<\/p>Dans ce tutoriel WordPress, nous utiliserons Google PageSpeed Insights pour identifier les scripts de blocage de rendu. Ensuite, nous vous montrerons comment résoudre ce problème pour votre site WordPress, en utilisant 3 méthodes différentes. En plus de ce guide, vous devriez également regarder d’autres façons d’accélérer votre site WordPress <\/a>pour une expérience utilisateur optimale.<\/p>Ce dont vous aurez besoin<\/h2>
Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants<\/p>
\n- Accès au panneau d’administration de WordPress<\/li>\n<\/ul>
Eliminer les codes Javascript et les styles CSS qui bloquent l’affichage du contenu above-the-fold<\/h2>
JS et CSS sont essentiels pour tout site web moderne, non seulement pour fonctionner à un niveau élevé, mais aussi pour l’améliorer. Cependant, il existe un compromis. Bien qu’il y ait quelques mesures que vous pourriez prendre pour rendre votre site plus rapide, comme retarder l’analyse de JavaScript, parfois cela peut ne pas suffire. Nous parlons évidemment de JavaScript et de CSS lorsqu’ils bloquent des fichiers. Pour s’occuper de ce problème, nous devons tout d’abord nous assurer qu’il existe. Après avoir confirmé les scripts de blocage des fichiers sur notre site web, nous pouvons passer à des corrections possibles.<\/p>
Étape 1 – Utilisation de Google PageSpeed Insights pour trouver les JS et CSS qui bloquent le rendu<\/h3>
La première étape dans la résolution du blocage des fichiers est de tester la vitesse de votre site à l’aide de Google PageSpeed Insights. Il suffit de visiter cette page<\/a>, et dans le champ de saisie, collez l’URL de votre site. Cliquez sur Analyser<\/strong> pour obtenir un rapport de votre site. La plupart des sites ont un score entre 50-70; cela devrait servir de référence pour votre score. Avec le score, Google présentera également des suggestions pour améliorer les performances de votre site.<\/p>\n![\"Eliminate](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/eliminate-render-blocking-javascript-css-above-the-fold-1.png\")
<\/figure><\/div>Eliminez les codes Javascript et les styles CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison<\/p>
Afin de montrer comment réparer l’erreur de blocage du rendu, nous allons utiliser un véritable site web. Dans la capture d’écran ci-dessus, vous pouvez voir qu’il contient actuellement assez de ressources bloquant JS et CSS.<\/p>
Si après avoir testé votre site web avec l’outil PageSpeed Insights, vous trouvez également la suggestion
\n« Eliminez les codes Javascript et les styles CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison<\/strong> ».
\nalors continuez de lire ce tutoriel WordPress. Gardez cet onglet ouvert dans votre navigateur web, car vous pourriez en avoir besoin lors de la résolution de ce problème.
\n<\/p>\n\n\n
Une chose importante à garder en tête – votre objectif ici ne devrait pas être d’atteindre le score parfait de 100 sur PageSpeed Insights. Au lieu de cela, ce devrait être de faire de votre mieux pour obtenir un bon score, sans sacrifier l’expérience de l’utilisateur. S’il existe des scripts sur votre site WordPress essentiels pour un UX robuste, vous ne devez pas les supprimer uniquement pour obtenir un score légèrement plus élevé sur PageSpeed Insights. Les règles que Google utilise pour noter vos sites ne sont que des lignes directrices, et doivent être considérées comme telles.<\/p><\/div>\n\n\n\n<\/p>
Étape 2 – Régler le blocage de rendu par JavaScript et les CSS<\/h3>Option 1 – Utiliser W3 Total Cache<\/h4>
Maintenant que vous êtes au courant du code de blocage des fichiers sur votre site web, vous avez quelques options sur la façon de le résoudre. Nous vous recommandons de télécharger un plugin qui vous facilite la vie en prenant soin de ce problème. L’un de nos favoris est le plugin W3 Total Cache<\/a>. Installez-le et activez-le<\/a>. Une fois que vous l’avez configuré, procédez comme suit :<\/p>\n- Allez dans Performance<\/strong> -> Paramètres généraux<\/strong>. Trouvez l’en-tête Minifier<\/strong> sur la page.<\/li>\n\n\n\n
- Vous verrez quelques options sous cette rubrique. La première s’appelle Minifier<\/strong> ; cochez la case Activer en face.<\/li>\n\n\n\n
- Dans l’option Mode Minifier<\/strong>, choisissez Manuel<\/strong>, puis cliquez sur le bouton Enregistrer tous les paramètres<\/strong>.
\n![\"minifier](\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/09\/minifier-w3.png\")
<\/li>\n\n\n\n- À ce stade, vous devez récupérer tous les scripts JS et CSS provoquant le blocage des fichiers. Vous trouverez ces scripts via Google PageSpeed Insights. Si vous maintenez l’onglet PageSpeed ouvert tel que suggéré à l’étape 1, vous trouverez la section Comment réparer<\/strong> le texte cliquable sous la suggestion de blocage de rendu. Cliquez dessus. Cela répertorie tous les scripts et les feuilles de style qui causent le blocage des fichiers.<\/li>\n\n\n\n
- Revenez sur WordPress. Naviguez vers Performance<\/strong> -> Minifier<\/strong>. Vous allez devoir « minifier » les fichiers JS et CSS séparément.<\/li>\n\n\n\n
- D’abord, occupons-nous de JS. Sur la page, trouvez l’en-tête JS, vous verrez ensuite la section Opérations dans les zones<\/strong>. Là, choisissez Ne pas bloquer en utilisant « defer »<\/strong>, en tant que type d’intégration pour la balise avant <head><\/strong>.
\n![\"utiliser](\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/09\/utiliser-defer.png\")
<\/li>\n\n\n\n- Ensuite, sous le sous-titre Gestion de fichier JS<\/strong>, choisissez votre thème actif et cliquez sur le bouton Ajouter un script<\/strong>. Maintenant, il suffit de copier les URL des scripts JS à partir de l’onglet PageSpeed, et de les coller ici un par un. a correction pour les fichiers JS est terminée.
\n![\"chemin](\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/09\/chemin-script.png\")
<\/li>\n\n\n\n- On passe à CSS. Faites défiler vers le bas sur la même page pour trouver la section CSS. Dans le sous-titre Gestion des fichiers CSS<\/strong>, choisissez votre thème actif et cliquez sur Ajout de feuille de style<\/strong>. Comme pour les scripts JS, copiez\/collez des feuilles de style CSS<\/a> de PageSpeed Insights vers cette section.
![\"chemin](\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/09\/chemin-feuille.png\")
<\/li>\n\n\n\n- Enfin, cliquez sur le bouton Enregistrer les paramètres<\/strong> et sur le bouton Vider le cache<\/strong>.
\nVous devriez maintenant revenir sur Google PageSpeed Insights pour vérifier si le blocage des fichiers a été corrigé. À partir de la capture d’écran ci-dessous, vous pouvez voir que l’ajustement des paramètres de W3 Total Cache corrige le verrouillage des fichiers JavaScript et CSS dans le contenu au-dessus de la ligne de flottaison pour notre site test.
\n![\"Eliminate](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2017\/06\/eliminate-render-blocking-js-css-fixed.png\")
\nSi vous voulez encore plus de contrôle sur votre contenu au-dessus de la ligne de flottaison, allez voir Above The Fold Optimization<\/a>. Ce plugin est conçu spécifiquement pour le contenu ATF et fonctionne avec d’autres plugins populaires comme W3 Total Cache et Autoptimize.<\/li>\n<\/ol>Option 2 – Utilisation de Autoptimize<\/h4>
Une méthode comparativement plus simple pour résoudre le problème de blocage du rendu utilise un autre plugin appelé Autoptimize<\/a>. Téléchargez et installez le plugin, ce qui ne devrait pas durer longtemps. Une fois que vous avez terminé l’installation, accédez à la zone Réglages<\/strong> -> Autoptimize<\/strong> de WordPress. Là, il suffit de cocher les cases intitulées Optimiser le code JavaScript?<\/strong> et optimiser le code CSS?<\/strong>, puis appuyez sur Enregistrer les modifications et vider le cache<\/strong>.<\/p>\n![\"optimiser](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/optimiser-code.png\/public\")
<\/figure><\/div>Dans la plupart des cas, cela suffit pour réparer le blocage des fichiers (cela dépend de votre thème et de vos plugins actifs). Pour savoir si cela fonctionne pour vous, exécutez votre site via PageSpeed Insights à nouveau.<\/p>
\n![\"1](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/05\/nouveau-theme-active-wordpress-1.png\/public\")
<\/figure><\/div>Comme vous pouvez le voir à partir de la capture d’écran ci-dessus, Autoptimize a laissé 1 ressource bloquant les scripts JS et 1 ressource bloquant les CSS les.<\/p>
Si vous souhaitez poursuivre l’optimisation, revenez dans Réglages -> Autoptimize<\/strong>. Cliquez sur le bouton Afficher les paramètres avancés<\/strong>. À partir de là, cochez les options Agréger le JS<\/strong> en ligne et Egalement agréger le CSS en ligne<\/strong>. Terminez en cliquant sur Enregistrer les modifications et Vider le cache<\/strong>. Pour voir si cela a fonctionné, visitez encore une fois PageSpeed Insights.<\/p>Option 3 – Utilisation de Speed Booster Pack<\/h4>
Les codes Javascript et les styles CSS qui bloquent l’affichage du contenu constituent l’une de ces règles. En règle générale, les scripts JS et CSS forcent le navigateur Web à retarder le chargement de la page HTML. Bien sûr, ce n’est pas un problème. En fait, c’est précisément ce que vous voulez; personne ne souhaite regarder un contenu qui n’a pas été mis en forme.<\/p>
JS et les styles CSS qui bloquent l’affichage du contenu, cependant, se réfère aux scripts qui introduisent une latence de chargement mais ne sont pas utilisés dans le contenu au-dessus de la ligne de flottaison (ATF). Le contenu ATF se réfère à la partie de la page web qui est visible lorsque la page est chargée; toute partie de la page que vous devez faire défiler vers le bas pour atteindre, est non-ATF. Ainsi, avec cette suggestion, Google vous permet de savoir qu’il existe des scripts JS et CSS sur cette page Web qui ralentissent votre site inutilement<\/strong>, car la partie de la page qu’ils affectent n’est même pas observable pour l’utilisateur.<\/p> Dans ce tutoriel WordPress, nous utiliserons Google PageSpeed Insights pour identifier les scripts de blocage de rendu. Ensuite, nous vous montrerons comment résoudre ce problème pour votre site WordPress, en utilisant 3 méthodes différentes. En plus de ce guide, vous devriez également regarder d’autres façons d’accélérer votre site WordPress <\/a>pour une expérience utilisateur optimale.<\/p> Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants<\/p> JS et CSS sont essentiels pour tout site web moderne, non seulement pour fonctionner à un niveau élevé, mais aussi pour l’améliorer. Cependant, il existe un compromis. Bien qu’il y ait quelques mesures que vous pourriez prendre pour rendre votre site plus rapide, comme retarder l’analyse de JavaScript, parfois cela peut ne pas suffire. Nous parlons évidemment de JavaScript et de CSS lorsqu’ils bloquent des fichiers. Pour s’occuper de ce problème, nous devons tout d’abord nous assurer qu’il existe. Après avoir confirmé les scripts de blocage des fichiers sur notre site web, nous pouvons passer à des corrections possibles.<\/p> La première étape dans la résolution du blocage des fichiers est de tester la vitesse de votre site à l’aide de Google PageSpeed Insights. Il suffit de visiter cette page<\/a>, et dans le champ de saisie, collez l’URL de votre site. Cliquez sur Analyser<\/strong> pour obtenir un rapport de votre site. La plupart des sites ont un score entre 50-70; cela devrait servir de référence pour votre score. Avec le score, Google présentera également des suggestions pour améliorer les performances de votre site.<\/p> Eliminez les codes Javascript et les styles CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison<\/p> Afin de montrer comment réparer l’erreur de blocage du rendu, nous allons utiliser un véritable site web. Dans la capture d’écran ci-dessus, vous pouvez voir qu’il contient actuellement assez de ressources bloquant JS et CSS.<\/p> Si après avoir testé votre site web avec l’outil PageSpeed Insights, vous trouvez également la suggestion \n\n\n Une chose importante à garder en tête – votre objectif ici ne devrait pas être d’atteindre le score parfait de 100 sur PageSpeed Insights. Au lieu de cela, ce devrait être de faire de votre mieux pour obtenir un bon score, sans sacrifier l’expérience de l’utilisateur. S’il existe des scripts sur votre site WordPress essentiels pour un UX robuste, vous ne devez pas les supprimer uniquement pour obtenir un score légèrement plus élevé sur PageSpeed Insights. Les règles que Google utilise pour noter vos sites ne sont que des lignes directrices, et doivent être considérées comme telles.<\/p><\/div>\n\n\n\n<\/p> Maintenant que vous êtes au courant du code de blocage des fichiers sur votre site web, vous avez quelques options sur la façon de le résoudre. Nous vous recommandons de télécharger un plugin qui vous facilite la vie en prenant soin de ce problème. L’un de nos favoris est le plugin W3 Total Cache<\/a>. Installez-le et activez-le<\/a>. Une fois que vous l’avez configuré, procédez comme suit :<\/p> Une méthode comparativement plus simple pour résoudre le problème de blocage du rendu utilise un autre plugin appelé Autoptimize<\/a>. Téléchargez et installez le plugin, ce qui ne devrait pas durer longtemps. Une fois que vous avez terminé l’installation, accédez à la zone Réglages<\/strong> -> Autoptimize<\/strong> de WordPress. Là, il suffit de cocher les cases intitulées Optimiser le code JavaScript?<\/strong> et optimiser le code CSS?<\/strong>, puis appuyez sur Enregistrer les modifications et vider le cache<\/strong>.<\/p> Dans la plupart des cas, cela suffit pour réparer le blocage des fichiers (cela dépend de votre thème et de vos plugins actifs). Pour savoir si cela fonctionne pour vous, exécutez votre site via PageSpeed Insights à nouveau.<\/p> Comme vous pouvez le voir à partir de la capture d’écran ci-dessus, Autoptimize a laissé 1 ressource bloquant les scripts JS et 1 ressource bloquant les CSS les.<\/p> Si vous souhaitez poursuivre l’optimisation, revenez dans Réglages -> Autoptimize<\/strong>. Cliquez sur le bouton Afficher les paramètres avancés<\/strong>. À partir de là, cochez les options Agréger le JS<\/strong> en ligne et Egalement agréger le CSS en ligne<\/strong>. Terminez en cliquant sur Enregistrer les modifications et Vider le cache<\/strong>. Pour voir si cela a fonctionné, visitez encore une fois PageSpeed Insights.<\/p>Ce dont vous aurez besoin<\/h2>
\n
Eliminer les codes Javascript et les styles CSS qui bloquent l’affichage du contenu above-the-fold<\/h2>
Étape 1 – Utilisation de Google PageSpeed Insights pour trouver les JS et CSS qui bloquent le rendu<\/h3>
<\/figure><\/div>
\n« Eliminez les codes Javascript et les styles CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison<\/strong> ».
\nalors continuez de lire ce tutoriel WordPress. Gardez cet onglet ouvert dans votre navigateur web, car vous pourriez en avoir besoin lors de la résolution de ce problème.
\n<\/p>Étape 2 – Régler le blocage de rendu par JavaScript et les CSS<\/h3>
Option 1 – Utiliser W3 Total Cache<\/h4>
\n
\n<\/li>\n\n\n\n
\n<\/li>\n\n\n\n
\n<\/li>\n\n\n\n
<\/li>\n\n\n\n
\nVous devriez maintenant revenir sur Google PageSpeed Insights pour vérifier si le blocage des fichiers a été corrigé. À partir de la capture d’écran ci-dessous, vous pouvez voir que l’ajustement des paramètres de W3 Total Cache corrige le verrouillage des fichiers JavaScript et CSS dans le contenu au-dessus de la ligne de flottaison pour notre site test.
\n
\nSi vous voulez encore plus de contrôle sur votre contenu au-dessus de la ligne de flottaison, allez voir Above The Fold Optimization<\/a>. Ce plugin est conçu spécifiquement pour le contenu ATF et fonctionne avec d’autres plugins populaires comme W3 Total Cache et Autoptimize.<\/li>\n<\/ol>Option 2 – Utilisation de Autoptimize<\/h4>
<\/figure><\/div><\/figure><\/div>Option 3 – Utilisation de Speed Booster Pack<\/h4>
![\"options](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/options-speed-booster.png\/public\")
<\/figure><\/div>![\"options](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2017\/09\/options-speed-booster-2.png\/public\")
<\/figure><\/div>![\"\"](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\")
<\/a><\/figure><\/div>