Comment éliminer les ressources bloquant le rendu | Buffs WP

Si vous entendez des plaintes concernant la vitesse de chargement de votre site Web ou si vous souhaitez charger vos pages Web plus rapidement et améliorer votre expérience utilisateur, vous voudrez peut-être réfléchir à la manière d'éliminer les ressources qui bloquent le rendu.

Quelle que soit la raison, la vitesse à laquelle un site Web apparaît devant le visage du visiteur peut avoir un impact sur l'expérience utilisateur et faire en sorte que votre entreprise manque des connexions client. L'expérience de l'utilisateur sur le site Web dépend principalement de la voie de rendu critique et de la gestion des scripts que votre site Web charge pendant le processus de rendu.

Qu'est-ce que le rendu ?

Tous les sites Web suivent un parcours permettant à l'utilisateur de voir et d'interagir avec son contenu. La voie de chargement du site Web est appelée voie de rendu critique. Ce parcours décrit les étapes de chaque site pour collecter et créer des données pour le visiteur et son navigateur.

Ce que font les navigateurs avant le rendu

La saisie d'une URL de site Web déclenche le processus suivant :

1. La navigation est terminée lorsqu'un utilisateur demande une URL spécifique.
   1. Une recherche DNS se produit, dans laquelle un serveur fournit une adresse IP
   2. Le navigateur et le serveur du site Web exécutent une poignée de main TCP pour établir une connexion
   3. Les demandes de connexion sécurisées obtiennent une négociation TLS ou un deuxième échange de poignée de main
2. Le navigateur reçoit une réponse et obtient le code du site Web
   1. Le premier paquet de données est reçu dans un TCP Slow Start pour réguler le trafic réseau
   2. L'utilisateur envoie des accusés de réception (ACK) au serveur pour établir les limitations de connexion et les débits d'envoi.
3. Le navigateur analyse les informations et transforme les données en un modèle d'objet CSS (CSSOM) et un modèle d'objet de document (DOM).
   1. L'arborescence DOM est construite (structure du site et de la page)
   2. Un analyseur de préchargement rassemble des ressources externes, telles que des scripts et des images.
   3. Le CSSOM est construit (arbre de style)
   4. JavaScript est compilé pendant la construction du CSSOM
   5. Le modèle d'objet d'accessibilité (AOM) est conçu pour que les dispositifs d'assistance interprètent le contenu.
4. Le rendu s'effectue à l'aide des arborescences CSSOM et DOM précédemment créées.

Que se passe-t-il lorsque vous affichez une page ?

Les sites Web sont rendus par la conception de code pour compléter la mise en page, le style, la peinture et parfois la composition sur un site Web. Le modèle d'objet CSS (CSSOM) et le modèle d'objet de document (DOM)

Style

Le DOM et le CSSOM se combinent dans un arbre de rendu et la construction commence. L'arborescence de rendu organise les nœuds visibles, le contenu et les styles calculés pour le site et chaque nœud unique.

Disposition

La mise en page est l'étape où l'architecture rencontre la construction, et une structure est créée pour que la page affiche la largeur, la hauteur et l'emplacement de tous les nœuds dans l'arborescence de rendu. Chaque objet obtient la taille et la position déterminée.

Les sites Web sont disposés dans une structure de boîte. Ces boîtes peuvent s'adapter à un nombre illimité de tailles de fenêtres différentes. Lorsque la structure de la boîte change pour le dimensionnement, cela s'appelle un reflow .

Peinture : première peinture et première peinture de contenu (FCP)

Le moment où un navigateur de site Web effectue un rendu d'une page s'appelle la «première peinture». First Paint peut être une couleur d'arrière-plan unie uniquement en fonction du code de la page.

First Contentful Paint (FCP) fait référence au moment mesurable où un visiteur du site Web peut voir le contenu de votre page (texte, images, vidéos, etc.). Le FCP mesure depuis le début du chargement de votre page jusqu'au moment où tout contenu est rendu.

First Paint et FCP ne sont pas la même chose qu'une page de chargement rapide ou des performances rapides, mais l'expérience utilisateur devient nettement plus positive lorsque les visiteurs du site perçoivent une page de chargement rapide. Le réglage fin de vos premières peintures, du temps de chargement et des performances du site améliore la perception du temps de chargement par l'utilisateur.

Composition

Les pages Web utilisent des calques où les objets se chevauchent pour organiser la structure. La composition est l'endroit où la page calcule l'ordre des choses pour les rendre correctement.

Les refusions déclenchent une re-composite car le positionnement de l'objet change souvent dans une refusion.

Quelles sont les ressources bloquant le rendu

Les scripts, les feuilles de style et les importations HTML qui ralentissent, retardent ou empêchent le navigateur d'afficher le contenu d'un site Web sont des ressources qui bloquent l'affichage. Lorsque les gens font référence à des ressources bloquant le rendu, ils font généralement référence à :

• CSS
• JavaScript dans la section <head>
• Polices chargées à partir d'un serveur ou d'un réseau de diffusion de contenu
• Importations HTML (anciennes pages)

Il y a beaucoup de CSS et de JavaScript qui ne bloquent pas le rendu et qu'il est essentiel de charger près du sommet. Donnez la priorité aux feuilles de style pour vous assurer que tout visiteur du site voit le contenu prévu au lieu du contenu sans style ou rien.

Qu'est-ce que JavaScript et CSS bloquant le rendu ?

Pendant le processus de rendu, votre navigateur charge les informations du site Web en parcourant d'abord les informations dans le <head>, y compris chaque script. Les scripts doivent tous être exécutés dans l'ordre et entièrement traités avant que la page ne soit visible dans votre navigateur.

Les scripts sont intégrés dans une file d'attente, de sorte que l'ordre des scripts dans le <head> est essentiel pendant le développement. Selon le code, cela peut ralentir ou empêcher le chargement complet de votre site Web, et c'est ce que nous appelons CSS et JavaScript bloquant le rendu.

Les scripts de votre site Web WordPress peuvent provenir de thèmes, de travaux personnalisés ou de plugins ajoutés pour diverses fonctionnalités.

Les images sont-elles des ressources de blocage du rendu ?

Si vous vous demandez si les images sont des ressources bloquant le rendu, elles ne le sont pas. La taille d'une image peut toujours causer des problèmes de chargement sur votre page, mais elle ne doit pas bloquer le rendu.

Pourquoi éliminer les ressources bloquant le rendu ?

Les scripts bloquant le rendu peuvent ralentir les temps de chargement des pages et ruiner l'expérience d'un site Web pour vos visiteurs. La perception d'un site Web lent peut entraîner une perte de visiteurs si l'expérience de votre site Web est médiocre. Une faible rétention des visiteurs peut affecter les résultats de votre moteur de recherche et réduire votre liste de résultats.

Un classement inférieur de l'optimisation des moteurs de recherche (SEO) signifie une réduction du nombre de visiteurs et une perte d'activité potentielle. La perte de classement réduit votre nombre de visiteurs et un site médiocre réduit la rétention de vos visiteurs ; les ressources bloquant le rendu peuvent être un énorme problème.

Si votre site Web a pour objectif d'obtenir un score Google PageSpeed ​​élevé, il est essentiel de comprendre vos ressources bloquant le rendu pour atteindre cet objectif.

Comment éliminer les ressources bloquant le rendu

Prendre au sérieux le classement SEO et l'expérience utilisateur de votre site signifie que votre site doit avoir des ressources bloquant le rendu traitées ou supprimées. Si vous ne construisez pas votre site à partir de zéro, commencez à tester votre site Web pour les ressources bloquant le rendu.

Une fois que vous avez identifié ces ressources bloquant le rendu, vous choisirez votre méthode pour résoudre le problème et améliorer les fonctionnalités de votre site.

Testez si votre site Web contient des ressources bloquant le rendu

Cela ne fait jamais de mal d'effectuer une évaluation sur votre site Web pour découvrir les ressources qui bloquent le rendu (essayez Google PageSpeed ​​Insights). Si vous avez optimisé au mieux de vos capacités, suivez les meilleures pratiques et rencontrez toujours des problèmes, ou ne savez pas par où commencer, les évaluateurs de page peuvent être des guides utiles.

Méthodes pour éliminer JavaScript et CSS bloquant le rendu

WordPress vous permet de gérer toutes les ressources gênant le rendu de votre site de différentes manières. WordPress vous permettra d'organiser vos scripts et liens bloquant le rendu avec du code, des balises, l'organisation et l'optimisation des fichiers et des plugins.

Les développeurs professionnels peuvent également créer des plugins ou des thèmes personnalisés qui intègrent ces processus dans le code.

Supprimer le Javascript bloquant le rendu avec le code

Trois méthodes pour traiter les ressources bloquant le rendu via le code sont :

1. Déplacez les balises pour <script> et <link> au bas de votre code HTML
2. Ajoutez des attributs asynchrones ou différés à la balise pour les scripts non critiques.
3. Supprimez le code JavaScript inutilisé.

WordPress charge un fichier jQuery Migrate pour assurer la compatibilité avec les anciennes versions de jQuery utilisées par les plugins et les thèmes. Vous pouvez utiliser un morceau de code ou un plugin pour empêcher WordPress de charger ce fichier jQuery Migrate si rien sur votre site n'en a besoin pour fonctionner.

Éliminer les feuilles de style bloquant le rendu

La nature des feuilles de style en fait des ressources bloquant le rendu par nature. Vous pouvez résoudre ce problème sur votre site de la manière suivante :

1. Répartissez le CSS par type de média (mobile, tablette, ordinateur de bureau, etc.)
2. Optimiser le chemin de rendu critique
3. Combiner des fichiers CSS

En utilisant WordPress et un constructeur visuel, vous ne pouvez pas contrôler directement la construction d'une page, mais il existe des moyens de contourner tout problème.

Blocage du rendu d'adresse à l'aide d'un plugin ou d'une extension WordPress

Les plugins et extensions WordPress sont utilisés pour organiser les scripts sur une page. Les plugins passeront par les balises <script> et <link> de votre page et appliqueront les attributs defer ou async en fonction de directives spécifiques.

Nous avons parcouru et testé une gamme de plugins pour WordPress et continuons à partager des choses utiles comme nos plugins préférés pour l'optimisation de la vitesse sur le blog.

Demandez à un professionnel WordPress d'éliminer les ressources bloquant le rendu pour vous

Certains plugins nécessitent une personnalisation et, tout en semblant simples, peuvent finir par ne pas fonctionner s'ils sont mal configurés. Il n'y a pas de honte à demander à un professionnel de WordPress de vous aider et WP Buffs dispose de plusieurs spécialistes qui peuvent optimiser votre site.

Meilleures pratiques pour optimiser le rendu

1. Regroupez vos ressources de blocage de rendu pour réduire leur impact sur le chargement de la page.
2. Réduisez la taille de la ressource afin de réduire le nombre d'octets à charger.
3. Reportez le téléchargement des ressources qui ne bloquent pas le rendu.
4. N'ajoutez pas de CSS avec la règle @import car il s'agit d'un chargement externe.
5. Utilisez un plugin WordPress conçu pour mettre en cache vos scripts et optimiser votre JavaScript et CSS.
6. Chargez les polices personnalisées localement.
7. Identifiez les CSS et JavaScript critiques et non critiques.
8. Marquez le code bloquant le rendu non critique avec des attributs asynchrones ou différés.
9. Le code non utilisé doit être supprimé.

Éliminez les maux de tête et laissez un professionnel WordPress vous aider

Les WP Buffs sont habiles à optimiser les sites WordPress et à améliorer les performances des pages. Nous comprenons pourquoi la performance est importante pour votre entreprise et sur quels domaines se concentrer pour avoir l'impact le plus significatif.

L'amélioration des performances de votre site Web et de l'expérience des visiteurs peut être plus que de simples ressources bloquant le rendu. WP Buffs peut jeter un œil à votre site et adresse :

• Tailles des images
• Qualité d'image et format de livraison
• Longueur de page et pourcentage de contenu dynamique
• Thèmes mal construits
• Scripts inutiles qui causent des retards
• Des plugins mal construits
• Scripts externes inutilisés
• Logiciel obsolète
• Plan d'hébergement Web limité incapable de répondre suffisamment aux besoins du site

WordPress peut être une plate-forme relativement facile pour créer un site Web, mais maximiser l'expérience utilisateur peut nécessiter un professionnel qualifié ou souvent un excellent fournisseur de services.

Questions fréquemment posées