Dans le paysage numérique concurrentiel d'aujourd'hui, la vitesse du site Web compte beaucoup pour le succès d'une entreprise en ligne. Les géants des moteurs de recherche comme Google donnent la priorité aux sites à chargement rapide, reconnaissant la nécessité de fournir une expérience utilisateur transparente.
Selon des études, des chargements de page plus rapides augmentent l'engagement des utilisateurs et les taux de conversion. En fait, un délai d'une seconde dans le temps nécessaire au chargement d'une page peut entraîner une baisse de 7 % des conversions des clients. Compte tenu de cela, il est évident que les propriétaires de sites Web doivent accorder une grande importance aux performances du site Web.
Google prend au sérieux les performances du site Web et en tient compte lors de la détermination des résultats de recherche. Par conséquent, les sites Web qui se chargent rapidement sont plus susceptibles d'apparaître en premier dans les résultats de recherche, attirant plus de visiteurs et, éventuellement, générant plus de revenus. Mais comment pouvez-vous répondre aux exigences de Google et charger votre site Web rapidement ?
Vous vous débarrassez des ressources qui pourraient bloquer le rendu d'un temps de chargement du site, tels que les fichiers CSS et JavaScript.
Cependant, la suppression de ces ressources peut être difficile et prendre du temps, en particulier pour les personnes manquant de compétences techniques.
Dans cet article, nous expliquerons les ressources bloquant le rendu et leur impact sur les performances du site Web et fournirons un guide étape par étape pour les éliminer de votre WordPress placer. Alors, commençons à optimiser votre site Web pour plus de rapidité et de succès !
Render Blocking Resources
Toute ressource qui doit être chargée avant qu'une page Web puisse être affichée est considérée comme une ressource bloquant le rendu. Ces ressources influencent une la performance du site Web & efficacité et prolonger le temps de chargement d'une page.
Un fichier CSS ou JavaScript peut être considéré comme une ressource bloquant le rendu si ce fichier bloque le rendu d'une page Web. Cependant, l'importance du chargement de la page peut varier en fonction de leur nécessité immédiate.
Lorsqu'un utilisateur accède à une page, le navigateur traite d'abord le code HTML pour afficher son contenu au-dessus de la ligne de flottaison. Lorsque le navigateur rencontre des fichiers CSS et JavaScript, il les télécharge et les traite également. Si les fichiers de ressources contiennent des codes supplémentaires ou des parties inutilisées, le chargement de la page Web prend plus de temps.
Types of Render Blocking Resources
Généralement, les fichiers de ressources tels que CSS et JavaScript sont considérés comme des ressources bloquant le rendu dans WordPress. Le navigateur considère ces ressources comme critiques et nécessite un chargement avant que la page puisse être affichée. Mais ce n'est pas ça; il y a plus de fichiers de ressources qui bloquent le rendu d'une page Web.
Voici une liste de ressources bloquant le rendu :
Feuilles de style CSS
La conception et la présentation d'une page Web sont déterminées par les feuilles de style CSS. UN Fichier CSS sera considérée comme une ressource bloquant le rendu si elle est placée dans le section d'une page HTML.
Fichiers JavaScript dans le Section
JavaScript est un langage de script qui peuvent être utilisés pour fournir une page Web avec un comportement et une interaction dynamiques. Un fichier JavaScript sera considéré comme une ressource bloquant le rendu s'il est placé dans une page HTML section.
Polices
Les textes d'une page Web sont affichés à l'aide de différentes polices. Les polices sont également considérées comme une ressource bloquant le rendu si elles sont incluses dans une page HTML. section et chargé à partir d'un serveur local ou d'un CAN.
Importations HTML
Il s'agit de l'ancienne fonctionnalité HTML qui permet aux pages Web d'inclure des éléments d'autres documents HTML. Même si les importations HTML ne sont plus utilisées aussi souvent, elles peuvent toujours être vues sur certains sites plus anciens. Les importations HTML sont également considérées comme des ressources bloquant le rendu.
Why Are Render-Blocking Resources Terrible for Webpages
Si votre site WordPress comprend des ressources bloquant le rendu, vous prendrez du retard dans les résultats de recherche. Même si vous êtes actuellement en première ligne, les sites les plus performants finiront par vous dominer.
Les sites avec des ressources bloquant le rendu chargeront des fichiers supplémentaires lors du rendu du site. Avant de voir le site Web, les utilisateurs doivent attendre que les fichiers soient traités. Les indicateurs de performance suivants pour les sites Web seront impactés par ces ressources :
- La plus grande peinture de contenu : Cela détermine le temps qu'il faudrait pour charger le contenu principal de la page.
- Première peinture contente : Le temps nécessaire à un navigateur pour produire le premier contenu de modèle d'objet de document (DOM) sur votre site Web.
- Temps de blocage total : Cela évalue le temps qu'il faut entre le Frist Contentful Pianto et le temps qu'il faut pour qu'une page devienne entièrement interactive.
Bien que les ressources bloquant le rendu ne soient pas nécessaires pour le chargement, elles peuvent entraver le rendu d'un site Web ou d'une page Web. Par conséquent, il est essentiel de supprimer ces ressources pour éviter de compliquer la navigation des utilisateurs sur votre site Web.
Examinons de plus près pourquoi le blocage du rendu est un problème sérieux pour les pages Web :
Temps de chargement de page lent
Les ressources bloquant le rendu ralentiront le chargement du site Web, ce qui est l'un de ses principaux inconvénients. Une page Web se charge lentement lorsqu'elle contient des fichiers de ressources avec des éléments inutiles. Par conséquent, cela affectera l'apparence des résultats de recherche, réduira l'engagement des utilisateurs et augmentera le taux de rebond.
Rendu bloqué
Souvent, un navigateur arrête de rendre une page Web lorsqu'il rencontre des ressources bloquant le rendu, car il souhaite que les ressources bloquant le rendu soient récupérées et traitées.
En fin de compte, les utilisateurs seront agacés et quitteront votre site en raison de l'absence de réponse de la page ou d'un rendu lent.
De plus, si une ressource se charge lentement, le navigateur peut également abandonner et arrêter de tenter de la charger. Cela peut entraîner des pages cassées ou des informations manquantes.
Diminution de l'engagement des utilisateurs
Lorsque des retards de rendu se produisent, le expérience utilisateur descend avec. Les utilisateurs s'attendent toujours à des temps de chargement rapides et quittent généralement un site à chargement lent. Ainsi, ils se retrouvent sur un site qui se charge plus rapidement.
Les sites à chargement lent ont un effet néfaste sur la satisfaction des consommateurs et la réputation de la marque. Avec ça, le trafic sur le site et le taux de conversion diminue également considérablement.
Il existe différentes approches pour supprimer les ressources bloquant le rendu de WordPress. Cependant, nous vous présenterons des méthodes manuelles pour éliminer les ressources bloquant le rendu. Ensuite, nous montrerons comment vous pouvez le faire en utilisant certains des plugins renommés de WordPress.
Eliminate Render-Blocking Resources Manually
Vous pouvez éviter de le faire manuellement, alors ne soyez pas frustré. Mais parcourir cette section vous aidera sûrement à apprendre quelques Optimisation des performances de WordPress techniques. Mais d'abord, regardez cette vidéo pour vous familiariser avec les termes discutés.
# 1. Identifier les ressources bloquant le rendu
Vous devez d'abord découvrir les ressources bloquant le rendu avant de les supprimer de votre site Web. Suivez simplement ces étapes pour découvrir les ressources bloquant le rendu sur votre site WordPress :
- Accédez à Google PageSpeed Insights.
- Entrez l'URL de votre site dans la barre de recherche.
- Cliquez sur le bouton "Analyser" pour obtenir des informations sur votre site Web.
- Faites défiler vers le bas et vérifiez le Carrière Section.
- Si votre page contient des ressources bloquant le rendu, elles seront répertoriées.
# 2. Utilisation des attributs « Defer » et « Async » pour JS
Après avoir identifié les ressources bloquant le rendu, il est temps de les éliminer pour de meilleures performances du site Web. À partir de diverses méthodes, l'utilisation de la méthode "différer" ou "asynchrone" pour les fichiers JavaScript est une approche pour y parvenir.
En ce qui concerne l'attribut "différer", il permet au navigateur de télécharger le fichier JS, puis de l'exécuter. Mais cela se produit lorsque la page a fini de se charger et est prête à afficher son contenu.
Ainsi, le reste des éléments de la page peut se charger en parallèle avec le fichier JavaScript. En conséquence, le temps nécessaire pour charger la page diminue.
Une autre approche est l'attribut "async" qui permet au navigateur de télécharger le fichier JS chaque fois qu'il est disponible. Cela se produit sans bloquer aucun autre élément de la page. Par conséquent, le fichier JS peut se charger en parallèle avec d'autres éléments, ce qui accélère le processus de chargement.
Vous pouvez vous débarrasser des ressources bloquant le rendu et augmenter la vitesse de votre site Web en utilisant l'attribut "différer" ou "asynchrone".
# 3. Utilisation de l'attribut "Media" pour le CSS conditionnel
L'utilisation des attributs "media" pour le CSS conditionnel est une autre approche pour éliminer les ressources bloquant le rendu. Avec cet attribut, vous pouvez définir des fichiers CSS uniques pour les navigateurs de bureau et mobiles.
Par exemple, vous pouvez inclure un fichier CSS dédié aux appareils de bureau et un autre fichier CSS adapté aux appareils mobiles. Vous pouvez indiquer au navigateur que le fichier CSS du bureau sera chargé lors de l'accès via un périphérique de bureau.
De même, le CSS mobile ne doit être chargé que lorsqu'il est accessible via des appareils mobiles. En chargeant le CSS spécifique à l'appareil pour les appareils désignés, vous pouvez réduire les ressources bloquant le rendu et augmenter le temps de chargement de votre site.
# 4. Différer les CSS non critiques
En plus d'utiliser l'attribut "media" pour le CSS conditionnel, essayez de différer le CSS non critique. Pour cette approche, vous devez charger principalement le CSS essentiel. Ensuite, vous chargez le reste du CSS au fur et à mesure que la page se charge.
Par exemple, vous pouvez avoir un énorme fichier CSS qui inclut tous les styles de votre site Web. Mais seule une petite partie de ce fichier CSS est nécessaire pour afficher le contenu dans la région au-dessus de la ligne de flottaison de votre site. Le contenu au-dessus de la ligne de flottaison peut être affiché rapidement en retardant le CSS non critique, et le CSS restant peut être chargé lors du chargement de la page.
# 5. Suppression des CSS et JS inutilisés
La suppression des fichiers CSS et JavaScript inutiles est une autre technique pour supprimer les ressources bloquant le rendu. Ces fichiers peuvent alourdir votre page et augmenter le temps de chargement.
En supprimant tous les fichiers CSS et JS inutilisés, vous pouvez réduire le nombre de ressources bloquant le rendu. Vous pouvez facilement utiliser des outils tels que PurifyCSS ou UnusedCSS pour supprimer tout fichier CSS inutilisé de votre site Web.
# 6. Chargement local de polices personnalisées
Les polices personnalisées peuvent également inclure des ressources qui limitent le rendu. Au lieu de dépendre de sources externes telles que Google Fonts, vous devez charger localement vos propres polices personnalisées pour éviter d'avoir besoin de ces ressources.
Vous pouvez garantir que vos polices personnalisées se chargent rapidement et efficacement sans ralentir les performances de votre site Web en les chargeant localement. Cela peut conduire à un site Web plus rapide et plus réactif et améliorer l'expérience utilisateur.
# 7. Minification JS & CSS
Enfin, la minimisation de vos fichiers CSS et JavaScript peut aider votre site Web à mieux fonctionner. La minification supprime les caractères inutiles, tels que les espaces blancs et les commentaires, de votre code. Ainsi, la taille de vos fichiers est réduite, ce qui accélère le chargement.
Pour minifier vos fichiers, vous pouvez utiliser des outils tels que MinifyJS ou CSSNano. Conservez une copie de vos fichiers originaux au cas où vous auriez besoin d'y apporter des modifications.
Eliminate Render-Blocking Resources With Plugin
Dans cette section, nous vous montrerons comment vous pouvez éliminer les ressources bloquant le rendu à l'aide des plugins WordPress. Ces plugins sont renommés dans WordPress et peuvent rapidement supprimer les ressources bloquant le rendu. La meilleure partie est que vous pouvez même améliorer les performances de votre site Web sans aucune expertise spécialisée.
# 1. W3 Total Cache
W3 Total Cache (W3TC) améliore l'ensemble de l'expérience utilisateur d'un site Web WordPress. Il élimine les ressources bloquant le rendu et améliore le référencement, Core Web Vitals, et plus. Le plugin utilise des fonctionnalités telles que l'intégration du réseau de diffusion de contenu pour mettre en œuvre les meilleures pratiques.
Pour éliminer les ressources bloquant le rendu, installez et activez le plugin W3 Total Cache et suivez ces étapes :
- Allez à Performance section dans le tableau de bord WordPress et cliquez sur Réglages généraux.
- En vertu des Normes sur l’information et les communications, les organismes doivent rendre leurs sites et applications Web accessibles. Ils y parviennent en conformant leurs sites Web au niveau AA des Web Content Accessibility Guidelines (WCAG) XNUMX. Rapetisser en-tête, activer Rapetisser et sélectionnez Manuel comme mode de minification.
- Maintenant, cliquez sur Enregistrer tous les paramètres.
- Ensuite, collectez tous les fichiers Javascript et CSS bloquant le rendu via Google PageSpeed Insights.
- Suivi d'un retour à Performances > Minifier.
- Maintenant, dans le js section, cliquez d'abord sur Activer pour le Paramètres de minification JS. Ensuite sous le Opérations dans les zones section, sélectionnez Non bloquant à l'aide du "différer" tapez pour le Avant Étiquette.
- Maintenant dirigez-vous vers Gestion des fichiers JS, sélectionnez le thème que vous avez activé, puis cliquez sur le Ajouter un scénario bouton. Collectez maintenant les URL Javascript qui ont des problèmes analysés par Google PageSpeed Insights. Collez les URL sur le champ désigné comme indiqué dans l'image.
- Faites maintenant défiler un peu vers la section CSS. Sélectionnez votre thème dans le menu déroulant de la section Gestion des fichiers CSS et cliquez sur Ajouter une feuille de style. Maintenant, il vous suffit de suivre l'étape précédente et de copier-coller les URL collectées à partir de PageSpeed Insight qui ont des problèmes.
- Puisque tous les paramètres sont configurés, cliquez sur le Enregistrer les paramètres et purger bouton à exécuter.
# 2. Optimiser JCH
Optimiser JCH améliore les performances du site Web WordPress mesurées par Google PageSpeed Insight. Le plugin améliore la première peinture de contenu (FCP), la plus grande peinture de contenu (LCP), l'indice de vitesse (SI), le décalage de mise en page cumulé (CLS), le temps d'interaction (TTI), et plus encore.
Ainsi, l'expérience utilisateur globale et les performances du site Web s'améliorent considérablement.
Après avoir installé et activé JCH Optimize, suivez ces processus pour éliminer les ressources bloquant le rendu :
- Cliquez sur Paramètres> Optimiser JCH, faites défiler un peu vers le bas et accédez aux paramètres des fonctionnalités de base.
- Activez la Optimiser la diffusion CSS pour éliminer le blocage du rendu CSS. Cette fonctionnalité détermine automatiquement le CSS essentiel requis pour afficher le contenu au-dessus du pli sur chaque page Web. De plus, il l'intègre dans le section du contenu HTML de chaque page.
- Les pré-charge link est ensuite utilisé pour charger les fichiers CSS concaténés de manière asynchrone.
- Pour supprimer les ressources bloquant le rendu Javascript, vous devez inclure le asynchrone ou différé attributs à la étiqueter. Le javascript peut échouer s'il y a des dépendances sur eux car cela pourrait changer l'ordre dans lequel ils se chargent.
- Sur le tableau de bord JCH Optimize, accédez au Combiner les fichiers Paramètres automatiques .
- Maintenant, cliquez sur le Optimum, qui active automatiquement la Javascript différé/asynchrone.
- Activation Réglage optimal diffère ou charge JavaScript de manière asynchrone.
- Si les fichiers Javascript sont chargés dynamiquement, ils ne peuvent pas être différés.
# 3. Pack accélérateur de vitesse
Pour améliorer les performances et la convivialité globale de votre site, Pack accélérateur de vitesse est un autre excellent plugin WordPress. Votre site sera mieux classé dans les principaux moteurs de recherche tels que Google. Vous obtiendrez un trafic accru et une vitesse massive avec ce plugin.
Après avoir installé et activé le Speed Booster, suivez simplement les étapes suivantes :
- Cliquez sur Pack accélérateur de vitesse sur votre tableau de bord WordPress.
- Pour supprimer les ressources de blocage de rendu javascript, cliquez sur le Des atouts et faites défiler vers le bas. Aller à Optimiser Javascript option. En cliquant sur tout, vous pouvez différer tous les fichiers JS et JS en ligne, ou vous pouvez sélectionner personnaliser pour inclure vos scripts JS sélectionnés.
- Activez ensuite Déplacer JavaScript vers le pied de page. Cela déplace tous les fichiers JS et JS en ligne vers le bas de vos sources de page.
- Maintenant, cliquez sur le Optimiser CSS option pour supprimer les ressources CSS bloquant le rendu.
- Vous obtiendrez des options pour activer CSS critique, qui optimise la livraison CSS en fonction de Les recommandations de Google. Cette option différera tous les fichiers CSS et alignera le style de votre contenu au-dessus du pli.
Vous pouvez activer Inline tout CSS pour incorporer tous les fichiers CSS dans la sortie HTML. Il existe également une option pour réduire tous les CSS intégrés pour réduire le CSS déjà intégré.
- Après avoir configuré le plug-in, enregistrez tous les paramètres pour éliminer les ressources bloquant le rendu.
# 4. Autoptimize
Autoptimize est encore un autre plugin pour optimiser et éliminer facilement les ressources bloquant le rendu. Le plugin rationalise les scripts JS et les styles CSS en les déplaçant dans le pied de page, en les agrégeant, en les minimisant et en les mettant en cache.
Il optimise le CSS en l'injectant dans l'en-tête de la page, le CSS critique en ligne et en se référant au CSS agrégé complet. De plus, il minimise automatiquement le code HTML pour une meilleure optimisation.
Installez et activez le plug-in Autoptimize, puis suivez ces processus pour supprimer les ressources bloquant le rendu :
- Tout d'abord, aller à Paramètres> Optimisation automatique depuis votre tableau de bord WordPress.
- Dans la section Options Javascript, cochez la case "Optimiser le code JavaScript ? »
- Dans la section des options CSS, cochez la case "Optimiser le code CSS ? »
- Cliquez maintenant sur enregistrer Modifications et cache vide.
Cela suffit généralement pour résoudre les ressources bloquant le rendu. Cependant, le résultat peut changer en fonction du thème et du plugin installés sur votre site WordPress. Pour vérifier que les problèmes sont résolus, exécutez à nouveau votre site via PageSpeed Insights. Pour une optimisation supplémentaire, suivez ces étapes :
- Après l'étape précédente, de nombreuses options sont disponibles sous les options Javascript et CSS.
- Vous pouvez maintenant activer le CSS agrégé également et Agréger les fichiers JS
- Enfin, cliquez sur Enregistrer les modifications.
# 5. WP Rocket
WP Rocket est un plugin WordPress renommé et premium pour l'optimisation des performances de mise en cache. Mais c'est plus qu'un simple plugin de chasse, y compris la suppression des ressources bloquant le rendu de votre site. En conséquence, les performances de base de Web Vitals et le score PageSpeed insight sont considérablement améliorés.
Après avoir installé et activé le plugin WP Rocket, éliminez les ressources bloquant le rendu en procédant comme suit :
- Cliquez sur WP Rocket, allez dans le Optimisation des fichiers et accédez à l'onglet Fichier CSS .
- Activez la Optimiser la diffusion CSS
- Allez maintenant dans la section Fichier JavaScript et sélectionnez Charger JavaScript différé. Vous pouvez également essayer l'option Mode sans échec pour Jaquery. Mais si cela casse la conception frontale de votre site Web, vous pouvez l'annuler.
- Enregistrez toutes vos modifications en cliquant sur le Enregistrer les modifications bouton (dans la fenêtre de contrôle qui apparaît maintenant).
Avantages de la suppression des ressources bloquant le rendu d'un site Web
Un temps de chargement de page plus rapide peut avoir un impact considérable sur la SEO (Référencement) d'un site web. Étant donné que Google préfère toujours les sites qui se chargent plus rapidement et fonctionnent bien. Par conséquent, les pages dont le score est supérieur à 90 auront toujours une priorité plus élevée en ce qui concerne les résultats de recherche. En utilisant les plugins mentionnés ci-dessus, vous pouvez réaliser ce qui suit PageSpeed score:
Des temps de chargement de page plus rapides peuvent entraîner un engagement accru des utilisateurs, car les utilisateurs sont plus susceptibles de rester sur un site qui se charge rapidement. Ainsi, les Utilisateurs peuvent naviguer confortablement sur le site ou effectuer un achat rapidement.
De plus, la suppression des ressources bloquant le rendu peut améliorer considérablement l'expérience de l'utilisateur mobile, car les utilisateurs mobiles sont plus susceptibles d'utiliser des réseaux plus lents avec des données limitées.
Réflexions finales
Nous avons mentionné à la fois les processus manuels et automatisés (Plugin) de suppression des ressources bloquant le rendu. Si vous souhaitez optimiser chaque angle des performances de votre site Web, vous pouvez le faire manuellement. Mais si vous voulez minimiser vos tracas et obtenir immédiatement un meilleur score PageSpeed, essayez les plugins que nous avons mentionnés.
Nous avons déjà été témoins de performances incroyables pratiquement sur plusieurs sites Web. Maintenant, c'est à vous d'optimiser davantage votre site WordPress avec un minimum de connaissances techniques et offrent une expérience de site Web exceptionnelle.
Vous pouvez également explorer des astuces pour rendre votre chargement du site Web à la vitesse de l'éclair.
