Comment éliminer les ressources qui bloquent le rendu

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 l’expérience utilisateur, vous pouvez envisager d’éliminer les ressources qui bloquent le rendu.

La vitesse à laquelle un site Web s’affiche suite au clic du visiteur peut avoir un impact sur l’expérience utilisateur et faire perdre à votre entreprise des connexions clients. 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 chemin pour que l’utilisateur puisse voir et interagir avec son contenu. La voie de chargement du site Web est appelée voie de rendu critique. Ce chemin décrit les étapes de chaque site pour rassembler et construire les données pour le visiteur et son navigateur.

Ce que les navigateurs font avant le rendu

La saisie de l’URL d’un site Web déclenche le processus suivant :

1. La navigation se lance lorsqu’un utilisateur demande une URL spécifique.
   1. Une consultation DNS a lieu, dans laquelle un serveur fournit une adresse IP.
   2. Le navigateur et le serveur du site web effectuent un Handshake TCP pour établir une connexion.
   3. Les demandes de connexion sécurisée obtiennent une négociation TLS ou un deuxième échange de poignée de main.
2. Le navigateur reçoit une réponse, et il 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 limites de la 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’arbre DOM se construit (structure du site et des pages).
   2. Un analyseur de préchargement rassemble les ressources externes, comme les scripts et les images.
   3. Le CSSOM se construit (arbre des styles)
   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 puissent interpréter le contenu.
4. Le rendu se fait en utilisant le CSSOM et les arbres DOM créés précédemment.

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

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

Style

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

Mise en page

La mise en page est l’étape où l’architecture rencontre la construction, et une structure est créée pour la page afin d’afficher la largeur, la hauteur et l’emplacement de tous les nœuds dans l’arbre de rendu. La taille et la position de chaque objet sont déterminées.

Les sites Web sont disposés dans une structure de boîtes. Ces boîtes peuvent s’adapter à un nombre illimité de tailles de fenêtres différentes. Lorsque la structure des boîtes change pour s’adapter à la taille, on parle de reflux.

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

Le moment où le navigateur d’un site Web effectue le rendu d’une page est appelé “First Paint” ou première peinture. La première peinture peut être une couleur d’arrière-plan unie, uniquement en fonction du code de la page.

Le First Contentful Paint (FCP), lui, désigne l’instant où un visiteur de site web peut visualiser 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 le contenu est rendu.

First Paint et FCP ne sont pas identiques, même dans une page à chargement rapide ou à une performance rapide, mais l’expérience de l’utilisateur devient plus positive lorsque les visiteurs du site perçoivent une page à chargement rapide. En peaufinant vos First Paints, le temps de chargement et les performances du site, vous améliorez la perception du temps de chargement par l’utilisateur.

Composition par couches

Les pages Web utilisent des couches où les objets se chevauchent pour organiser la structure. La composition, ou “composite”, est l’étape où la page calcule l’ordre des objets pour les rendre correctement.

Les “reflows” déclenchent un re-composite car le positionnement des objets change souvent lors d’un reflow (après une mise à jour du site par exemple).

Quelles sont les ressources qui bloquent le rendu ?

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

• CSS
• JavaScript dans la section <head> ;
• Des polices chargées depuis un serveur ou un réseau de diffusion de contenu
• Les importations HTML d’anciennes pages

Beaucoup de CSS et de JavaScript bloquent parfois le rendu. Donnez la priorité aux feuilles de style pour vous assurer que tout visiteur du site voit le contenu prévu au lieu d’un contenu non stylisé ou rien.

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

Au cours du processus de rendu, votre navigateur charge les informations du site Web en parcourant d’abord les informations contenues dans l’en-tête, y compris tous les scripts. 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 s’accumulent dans une file d’attente. L’ordre des scripts dans le <head> est donc essentiel pendant le développement. Selon le code, il peut ralentir ou empêcher le chargement complet de votre site Web. Il s’agit de ce que nous appelons les CSS et JavaScript bloquant le rendu.

Les scripts sur 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 type Render-Block ?

Si vous vous demandez si les images sont des ressources qui bloquent le rendu, ce n’est pas le cas. La taille d’une image peut toujours causer des problèmes de chargement sur votre page, mais elle ne devrait pas bloquer le rendu.

Pourquoi éliminer les ressources qui bloquent le rendu ?

Les scripts bloquant le rendu peuvent ralentir le chargement des pages et ruiner l’expérience de 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 mauvaise. Une faible rétention des visiteurs peut affecter les résultats de votre moteur de recherche et faire baisser votre liste de résultats.

Un mauvais classement dans les moteurs de recherche (SEO) signifie une réduction du nombre de visiteurs et une perte d’activité potentielle. La perte de classement réduit le nombre de visiteurs, et un site médiocre réduit la rétention des visiteurs ; les ressources bloquant le rendu peuvent être un énorme problème et le début d’une boucle infernale.

Si votre site Web a pour objectif d’obtenir une vitesse d’affichage élevée sur Google, il est essentiel de comprendre les ressources qui bloquent le rendu pour atteindre cet objectif.

Comment éliminer les ressources qui bloquent le rendu ?

Si vous prenez au sérieux le classement de votre site dans les moteurs de recherche et l’expérience de l’utilisateur, vous devez traiter ou supprimer les ressources qui bloquent le rendu. Si vous ne construisez pas votre site à partir de zéro, commencez à tester votre site Web pour les ressources bloquant le rendu.

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

Testez si votre site Web dispose de ressources bloquant le rendu

Il n’est jamais inutile d’effectuer une évaluation de votre site Web pour découvrir les ressources qui bloquent le rendu (essayez Google PageSpeed Insights). Si vous l’avez optimisé au maximum, si vous suivez les meilleures pratiques et que vous rencontrez encore des problèmes, ou si vous ne savez pas par où commencer, les évaluateurs de pages peuvent être très utiles.

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

WordPress vous permet de gérer les ressources qui entravent le rendu de votre site de différentes manières. Parmi elles : l’organisation de vos scripts et des liens bloquant le rendu à l’aide de code, de balises, d’organisation et d’optimisation de fichiers et de 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 du code

Voici trois méthodes permettant d’éliminer les ressources bloquant le rendu par le biais du code :

1. Déplacez les balises <script> et <link> au bas de votre code HTML.
2. Ajoutez les attributs async ou defer à la balise pour les scripts non critiques.
3. Suppression du 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 qui bloquent le rendu

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

1. Division des CSS par type de média (mobile, tablette, bureau, etc.).
2. Optimisation du chemin de rendu critique
3. Combinaison des fichiers CSS

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

Résoudre le problème du blocage du rendu en utilisant un plugin ou une extension WordPress

Les plugins et extensions WordPress sont utilisés pour organiser les scripts sur une page. Les plugins parcourent les balises <script> et <link> de votre page et appliquent 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, bien que semblant simples, peuvent finir par ne pas fonctionner s’ils sont mal configurés. Il n’y a pas de honte à demander l’aide d’un professionnel de WordPress et Weapzy a plusieurs spécialistes qui peuvent optimiser votre site.

Meilleures pratiques pour optimiser le rendu

1. Regroupez vos ressources qui bloquent le rendu afin de réduire leur impact sur le chargement de la page.
2. Réduisez la taille de la ressource, afin de diminuer le nombre d’octets à charger.
3. Différez 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 vos scripts en cache et optimiser vos JavaScript et CSS.
6. Chargez les polices personnalisées localement.
7. Identifiez les CSS et JavaScript critiques et non critiques.
8. Marquez le code non critique bloquant le rendu avec les attributs async ou defer.
9. Le code non utilisé doit être supprimé.

Epargnez-vous les maux de tête et laissez un professionnel de WordPress vous aider

Weapzy est qualifié pour optimiser les sites WordPress et améliorer les performances des pages. Nous comprenons pourquoi les performances sont importantes pour votre entreprise et sur quels domaines il faut 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 de blocage de rendu. Weapzy peut jeter un coup d’œil à votre site et y répondre :

• Taille des images
• Qualité de l’image et format de livraison
• Longueur des pages et pourcentage de contenu dynamique
• Thèmes mal conçus
• Scripts inutiles qui provoquent des retards
• Plugins mal conçus
• Scripts externes inutilisés
• Logiciels obsolètes
• Plan d’hébergement limité ne permettant pas de répondre aux besoins du site.

WordPress peut être une plateforme raisonnablement facile à utiliser pour créer un site Web, mais pour optimiser l’expérience utilisateur, il faut faire appel à un professionnel qualifié ou, souvent, à un excellent fournisseur de services.

Questions fréquemment posées