ibdi.it

Comment supprimer JavaScript et CSS qui bloquent le rendu sur WordPress

Comment supprimer JavaScript et CSS qui bloquent le rendu sur WordPress

Avoir un site Web qui se charge rapidement est crucial si vous voulez vous classer haut sur les résultats des moteurs de recherche (SERPs) pages.C’est pourquoi PageSpeed Insights de Google est là pour vous aider à optimiser la vitesse de téléchargement de votre site.Si vous recevez l’outil " Supprimer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus du pli " lors de l’utilisation de l’outil, ne vous inquiétez pas.Dans cet article, nous allons vous montrer comment résoudre le problème.

Savoir " Supprimer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus du pli " Avertissement

Si vous regardez les règles de vitesse de page de Google, la suppression de JavaScript et CSS qui bloquent le rendu est l’une d’entre elles.Toute erreur à cet égard se traduira par une vitesse de charge de page plus lente.Mais comment JavaScript et CSS sur votre page HTML peuvent-ils ralentir votre site ?

Eh bien, chaque fois que vous installez un nouveau thème ou plugin, ils ajoutent javascript et code CSS à l’extrémité avant.Par conséquent, les navigateurs peuvent prendre plus de temps à charger la page.

Above-the-fold (ATF) est la partie de votre page Web qui est visible la première fois que la page se charge.N’importe quelle partie de la page que vous devez faire défiler vers le bas pour atteindre n’est pas ATF.

Par conséquent, si le code JavaScript et CSS non pertinent apparaît lorsque les visiteurs chargent votre site Web, vous pouvez recevoir une alerte pour réduire le nombre de JavaScript et CSS qui bloquent le rendu dans les ressources de contenu au-dessus du pli.

En savoir plus sur JavaScript et CSS bloquant le rendu à l’aide de Google Page Speed Insights

La première étape pour fixer le verrou de rendu est de tester la vitesse de votre site à l’aide de Google PageSpeed Insights.Suivez ces étapes pour ce faire :

  1. Visitez la page et coller l’URL de votre site Web dans le champ " Entrez l’URL d’une page Web « .
  2. Cliquez sur Analyser pour obtenir le rapport.

    La plupart des sites ont un score compris entre 50 et 70; cela devrait servir de référence pour votre score.Google énumére également des conseils pour améliorer les performances de votre site Web.

Si vous trouvez également la suggestion de supprimer JavaScript et CSS qui bloquent le rendu dans le contenu au-dessus du pli, vous devrez résoudre le problème.

Gardez à l’esprit que vous ne devriez pas forcer votre site web à obtenir un score parfait de 100. Il suffit de faire de votre mieux pour obtenir un bon score sans sacrifier l’expérience utilisateur.

S’il y a des scripts sur votre site WordPress qui sont essentiels pour un UX robuste, vous ne devriez pas les supprimer juste pour obtenir un score légèrement plus élevé sur PageSpeed Insights.

Les règles sur lesquelles Google classe vos sites Web ne sont que des lignes directrices et doivent être considérées comme telles.

Correction de l’erreur « Supprimer javascript et css bloquant le rendu dans le contenu au-dessus du pli »

Avec WordPress, réduire les ressources JavaScript et CSS qui bloquent le rendu sur votre site WordPress est simple.Vous pouvez utiliser les trois plugins que nous avons énumérés ci-dessous :

W3 cache total

Un de nos favoris est le plugin W3 Total Cache.Une fois installé et activé, suivez ces étapes sur le panneau d’administration WordPress :

  1. Passez à Performance -> General Settings .
  2. Trouvez l’en-tête Minify sur la page.Ensuite, vous verrez quelques options sous ce titre.
  3. Cochez la case Activer pour minify.Ensuite, pour l’option Minimiser le mode, sélectionnez Manuel .
  4. Appuyez sur Enregistrer tous les paramètres .
  5. Téléchargez tous les scripts JavaScript et CSS qui bloquent le rendu, que vous pouvez trouver via Google PageSpeed Insights.
  6. Une fois que vous avez trouvé le plantain d’étage, retournez à Performance -> minimiser sur le tableau de bord WordPress.
  7. Retrouvez la section JS.Dans la section Opérations dans les régions, sélectionnez le type d’intégration non bloquant à l’aide de « différer » pour l’étiquette Efore B <head>.</head>
  8. Pour la gestion de fichiers JS, choisissez le thème actif et cliquez sur le bouton Ajouter script.Copiez et coller des URL JavaScript à partir de Google Page Speed Insights dans les champs fournis, comme indiqué ci-dessous.
  9. Faites défiler vers le bas et trouvez la section CSS.Pour la gestion de fichiers CSS, choisissez le thème actif et cliquez sur Ajouter une feuille de style .Comme à l’étape précédente, copiez les URL des feuilles de style CSS de PageSpeed Insights et coller dans les champs requis.
  10. Enfin, cliquez sur le bouton Enregistrer les paramètres et supprimer le cache .

Propriété Autoptimize

Alternativement, vous pouvez utiliser le plug-in Autoptimize pour résoudre l’erreur javascript et css qui bloque le rendu.Effectuez ces étapes sur le tableau de bord après avoir installé et activé le plug-in :

  1. Passez aux paramètres -> automatiquement.
  2. Cochez les cases pour optimiser le code JavaScript ?« Et optimiser le code CSS?
  3. Appuyez sur le bouton Enregistrer les modifications et effacer le cache.

Dans la plupart des cas, cela suffit à corriger l’alerte.Toutefois, le résultat peut varier en fonction du thème et des plug-ins actifs.

Pour vous assurer que votre problème a été résolu, exécutez à nouveau votre site via PageSpeed Insights.S’il vous reste des ressources JS et CSS bloquantes, apportez encore plus d’optimisation en suivant ces étapes :

  1. Retour aux paramètres -> optimiser automatiquement .
  2. Appuyez sur le bouton Afficher les paramètres avancés.
  3. Ensuite, consultez les options pour également regrouper JS en ligne et aussi l’agrégat CSS en ligne.
  4. Enregistrez vos modifications.

Pack booster de vitesse

Un autre plugin populaire que vous pourriez trouver utile pour corriger les erreurs javascript et le rendu css de verrouillage pour votre site WordPress est Speed Booster Pack.Pour ce faire, suivez ces étapes dans votre zone wp-admin :

  1. Allez à la section Speed Booster Pack et allez à l’onglet Advanced.
  2. Sur le menu d’optimisation JavaScript, activer déplacer le script à Footer , et reporter JavaScript File Parsing .
  3. Faites défiler vers le bas pour le menu d’optimisation CSS pour définir l’optimisation du bloc de rendu css.
  4. Vous trouverez des paramètres supplémentaires pour aligner tous les CSS, minimiser tous les CSS (précédemment) intégrés, et déplacer tous les CSS intégrés dans le pied.Expérimentez ces options pour trouver une solution appropriée.

    Il suffit d’activer tous ces éléments chargera votre site plus rapidement, mais il pourrait également introduire l’artefact indésirable de contenu non repassé (FOUC).Cela se produit lorsque le navigateur charge la page Web sans attendre que la feuille de style se charge, provoquant un flash de page momentané non modifié.

Après avoir essayé les méthodes ci-dessus, rendez-vous sur PageSpeed Insights de Google pour vous assurer que le blocage du rendu n’est plus un problème.

Conclusion

La vitesse du site Web est l’un des facteurs les plus importants pour attirer et retenir les visiteurs.C’est parce que les moteurs de recherche prennent en compte la vitesse du site lors de la classification des résultats.

PageSpeed Insights de Google marque des sites Web basés sur la vitesse de téléchargement.Si vous obtenez l’infâme Supprimer JavaScript et CSS qui bloquent le rendu dans les suggestions ci-dessus-le-pli lors de l’analyse des performances de votre site WordPress, il suffit de résoudre le problème avec les plugins.

Nous espérons que ce tutoriel sera utile pour vous.N’hésitez pas à commenter ci-dessous si vous avez des questions.Bonne chance!

Quitter la version mobile