Comment supprimer les ressources de blocage de rendu dans WordPress

Ressources de blocage de rendu: Vous pouvez être confus si vous voyez ce pop – up pendant les tests de vitesse du site, ou si vous entendez qu’il est une cause commune de faible vitesse de chargement. Cherchez – vous des moyens d’accélérer votre site et d’éliminer tout code étranger qui ralentit votre site, mais par où commencer à résoudre ce problème? Heureusement, une fois que vous savez quoi faire, il est moins difficile de supprimer les ressources qui bloquent le rendu. Un plug – in simple peut le faire, ou le manipuler manuellement si vous le souhaitez.
Complètement perdu? Nous expliquerons brièvement ce qu’est une ressource de blocage de rendu, comment savoir si votre site en a et ce que vous pouvez faire à ce sujet. Qu’est – ce qu’une ressource de blocage de rendu? Lorsque quelqu’un visite une page de votre site Web, il doit télécharger (ou « rendre ») tout son contenu. Cela inclut le Code, c’est – à – dire HTML, css et JavaScript. À moins que vous ne fassiez tout ce qui est en votre pouvoir pour le modifier, vous devez charger le dernier script avant que l’utilisateur puisse voir quoi que ce soit. Voici ce que signifie bloquer le rendu: arrêter de voir la page jusqu’à ce que l’utilisateur ait terminé le chargement. Ils n’auront qu’un écran blanc vide.
Mais pourquoi? Pour le HTML, il est logique qu’il bloque le rendu. Le HTML est au cœur du site et tout le contenu y réside. Sans ça, vous n’auriez pas de site à charger. Et le HTML est généralement petit, de sorte que le téléchargement ne prend pas beaucoup de temps. Les problèmes possibles sont CSS et JavaScript. CSS affectera le style de la page; Placez le projet, déterminez la mise en page et laissez votre site répondre. Sans CSS, votre site ressemble à un gros morceau de texte avec des liens et des images. JavaScript rend votre site web dynamique, changeant dynamiquement son apparence. Le plugin wordpress peut également être utilisé pour
Site Web.
Mais le fait est que tous les scripts ne sont pas immédiatement visibles. Pour afficher tout correctement, il suffit d’afficher le style css et les éléments JavaScript au – dessus de l’effondrement. Le reste peut être déplacé en toute sécurité vers l’arrière afin que vous puissiez voir la page jusqu’à ce que le chargement soit terminé. Si vous avez des ressources Javascript et CSS inutiles qui forcent les utilisateurs à attendre plus longtemps, vous verrez une erreur de vue bloquant les ressources lorsque vous testez le site. Pourquoi supprimer les ressources qui bloquent le rendu? Les gens doivent donc attendre encore quelques secondes (même quelques millisecondes!) Chargement – qui s’en soucie? Mais cela peut avoir un impact plus important sur les visiteurs que vous ne le pensez.
Source: chaque seconde est importante pour Google en termes de temps de chargement. De plus en plus de propriétaires de sites Web apprennent à compresser des images et du Code, et les gens comptent sur des vitesses de téléchargement plus élevées. Si vous ne suivez pas, ils vont probablement cliquer et trouver un site différent. On a également envisagé l’utilisation d’appareils mobiles moins fonctionnels ou d’Internet plus lent. Vous pouvez télécharger votre site sur votre ordinateur de bureau assez rapidement, mais les utilisateurs de votre téléphone ou tablette peuvent éprouver des difficultés et doivent attendre quelques secondes pour passer à travers l’écran blanc.
Vous voulez vous débarrasser de tout ce qui pourrait bloquer votre site. Même de petites optimisations comme la suppression des ressources qui bloquent le rendu peuvent avoir un impact énorme sur certaines personnes. Votre site a – t – il des ressources pour bloquer le rendu? Vous pouvez apparaître ici parce que quelqu’un vous a dit que votre site a une ressource de blocage de rendu et vous ne savez pas comment la réparer. Mais si vous ne l’avez pas encore testé, c’est le moment. Avec div
Le téléchargement sera brièvement arrêté pour exécuter le script. La propriété defer fait de même, mais n’exécute le script qu’une fois l’analyse HTML terminée. Quand dois – je utiliser l’un de ces deux attributs? Async arrête parfois de charger des scripts liés à l’ordre, comme jquery, donc en cas de doute, utilisez defer; Toujours exécuter les scripts dans le bon ordre. Vous pouvez utiliser async sur des scripts autonomes qui ne dépendent d’aucun autre chargement.
La réparation des CSS qui bloquent le rendu peut nécessiter plus de travail. Vous pouvez intégrer le CSS affiché au – dessus de l’effondrement dans la Section Du document HTML. Cependant, vous ne pouvez le faire qu’avec de petits fichiers et des styles que le visionneur verra immédiatement. Pour le reste du CSS, vous pouvez ajouter des attributs asynchrones ou retardés comme JavaScript. Vous pouvez également ajouter des requêtes médias à certains styles afin qu’elles ne soient chargées que dans certaines circonstances. N’oubliez pas que l’onglet couverture de l’outil de développement du navigateur vous aide à déterminer rapidement quels éléments les visiteurs doivent d’abord charger et vous aide à identifier le Code inutilisé qui pourrait être supprimé.
Supprimer le plug – in pour rendre les ressources de blocage bien que vous puissiez optimiser JavaScript et CSS sans toucher le plug – in WordPress, vous n’avez pas besoin de faire tout cela. Vous n’avez peut – être pas confiance dans le traitement du Code sensible, ou vous voulez juste un outil qui simplifie le processus. Dans ce cas, l’un des plug – ins peut bien faire le travail. Remarque: Avant d’utiliser ces plug – ins, assurez – vous de sauvegarder votre site Web en cas de problème. L’optimisation automatique et le javascript asynchrone ont été créés par le même développeur, deux plug – ins conçus pour vous aider à arrêter les scripts qui gonflent les pages et déplacent le Code
J’a I une attitude critique à l’égard de l’endroit où la tête est placée en premier. Autooptimize est un plug – in d’optimisation polyvalent. En plus de minimiser les images, le HTML et d’autres scripts, il peut intégrer CSS et retarder les scripts non critiques. Toutes ces informations sont disponibles en un seul clic. Les développeurs peuvent utiliser des options avancées et des plug – ins personnalisés API pour répondre à leurs besoins. Mais la plupart des utilisateurs n’ont qu’à cocher deux cases pour corriger les problèmes de bloc de rendu. Allez à paramètres d’arrière – plan > auto – tuning pour activer l’optimisation du code JavaScript et l’optimisation du code CSS. C’est généralement le cas, mais si vous rencontrez des problèmes, vous pouvez essayer d’utiliser les options et activer ou désactiver les fichiers js \/ CSS agrégés. C’est une bonne idée de commencer par l’optimisation automatique, si vous êtes toujours pénalisé pour le blocage des ressources de rendu, essayez de nettoyer les parties libres en utilisant asyncjs. C’est aussi simple à utiliser. Accédez aux paramètres > javascript asynchrone et sélectionnez pour l’activer. Ici, vous pouvez choisir entre asynchrone ou retardée. Essayez d’activer defer à la place si async provoque une interruption de page. Vous devriez également reporter ou exclure jquery parce que l’activation de l’asynchrone sur lui interrompt presque certainement votre site. Fusée WP Un inconvénient de l’optimisation automatique est qu’elle peut être un peu difficile à configurer. WP Rocket est un plug – in avancé conçu pour être facile à utiliser, quel que soit votre niveau de compétence. Cache, compresse, minimise et, bien sûr, retarde les ressources qui bloquent le rendu. Pour 49 $par an (vous pouvez toujours l’utiliser sans support ni mise à jour), toutes les fonctionnalités qu’il offre sont très pratiques et l’installation est simple. WP Rocket fournit deux paramètres pour supprimer les scripts qui bloquent le rendu: optimiser la livraison CSS et charger le javascript retardé. Pour les activer, allez aux paramètres
Zioni > WP Rocket > optimisation des fichiers. Activez les deux paramètres mentionnés ci – dessus. Ici, vous pouvez également minimiser JavaScript et css pour un chargement plus rapide. Cache total W3 Ce dernier plug – in est un peu plus compliqué. Vous devez identifier et verrouiller manuellement les fichiers qui causent des erreurs de blocage de rendu. Si vous ne voulez sélectionner qu’une seule case à cocher, vous devriez essayer WP Rocket ou autooptimize, mais W3 total cache vous permet de contrôler plus précisément les fichiers à référencer. Un autre avantage de W3 total cache par rapport à d’autres plug – ins est que vous l’avez peut – être déjà installé. C’est l’un des plug – ins de mise en cache les plus populaires (il devrait y en avoir un pour chaque installation WordPress), donc vous n’avez pas à gonfler votre site avec des add – ons. La première chose à faire après l’installation du plug – in est de retourner à la page des résultats des aperçus de la vitesse de la page. Sous supprimer les ressources de blocage de rendu, vous devriez voir une liste des fichiers JavaScript et CSS qui causent le problème. Gardez la page ouverte pour une copie ultérieure. Retournez au tableau de bord WordPress et allez à performance > paramètres généraux pour vous assurer que minify est activé et réglé en mode manuel. Allez maintenant à l’icône performance > réduire. Dans la boîte opérations dans la zone des paramètres mineurs JS, dans Utilisez Delay sur un programme non bloquant. Ensuite, dans le gestionnaire de fichiers JS, cliquez sur Ajouter un script et collez les fichiers JavaScript à partir de la page speed, ce qui peut causer des problèmes un par un. Puis faites défiler vers le bas vers le gestionnaire de fichiers CSS et cliquez sur Ajouter une feuille de style. Collez l’URL de la Feuille de style pénalisée. Après cela, cliquez sur Enregistrer les paramètres et videz le cache. Si la configuration est correcte, votre site devrait maintenant pouvoir être chargé plus rapidement et obtenir de meilleurs scores dans la page speed. Se débarrasser des ressources
Le rendu de bloc dans WordPress sera toujours présent lorsque vous aurez pour la première fois la tâche de vous débarrasser des ressources qui bloquent le rendu (et tout le reste dans les résultats de pagesespeed!). Essayer de résoudre ce problème peut être déroutant. Mais grâce au plugin wordpress, il est très facile de bloquer les scripts problématiques. Vous n’aurez jamais besoin d’éditer directement du Code et vous risquez d’endommager votre site. Les ressources de blocage du rendu peuvent perturber le temps de chargement si elles restent en cours d’exécution à chaque chargement. Il est important de retarder le chargement de JavaScript et CSS non essentiels. Utilisez des outils comme page speed Insights pour déterminer si votre site Web a du Code non chiffré, puis réparez – le manuellement ou en téléchargeant un plug – in. Autooptimize et son double plug – in asyncjs sont un excellent choix de démarrage gratuit. Si vous avez du mal à les configurer ou si vous ne remarquez aucun changement, WP Rocket est avancé, mais fournit un support et une configuration plus rapides. W3 total cache est le plus difficile à utiliser, mais c’est certainement le meilleur choix si vous voulez avoir un contrôle séparé sur chaque fichier que vous voulez bloquer. Quel est le score de votre page speed avant et après l’optimisation du site? Dites – nous dans les commentaires combien vous avez été promu!