Comment réduire le travail du thread principal

Vous cherchez à accélérer le temps de chargement de votre site Internet et Google PageSpeed Insights vous a recommandé de réduire le travail du thread principal ? Cet article est fait pour vous.

Commençons par nous présenter. Nous sommes l’agence 36 Pixels et nous sommes experts en optimisation de temps de chargement de site Internet. Si cela vous intéresse, contactez-nous !

Enfin dernier point avant de commencer, cet article fait parti de tout une série sur l’optimisation du temps de chargement. Nous vous le conseillons.

Au programme de cet article :

• Qu’est ce que le thread principal ?
• En quoi le thread principal a t’il une incidence sur le temps de chargement ?
• Quelles sont les principales causes de la saturation du thread principal ?
• Comment réduire le travail du thread principal ?
• Comment optimiser le travail du thread principal sous WordPress ?
• Comment améliorer le travail du thread principal sur Vue.js ?
• Notre méthodologie chez 36 Pixels pour améliorer le travail du thread principal
• Quel gain espérer ?

Définition du thread principal

La traduction littérale du thread principal est le fil principal. Ce qui ne veut pas dire grand chose. On pourrait être un peu plus explicite en parlant de fil d’exécution principal.

Le thread principal, c’est le flux d’instruction, le processus, pour afficher correctement la page sur le navigateur. Dans ce processus, on retrouve l’évaluation du JavaScript et son interprétation, la lecture du code HTML et sa mise en forme dans le navigateur, la compilation du code, son rendu…

Le thread principal est donc une timeline de la suite des taches qui sont effectuées par le navigateur pour afficher votre page web et la rendre interactive.

Il y a 3 processus principaux durant l’exécution du thread principal :

1. Parcourir le HTML et construire le dom
2. Parcourir le CSS et mettre en forme le DOM
3. Parcourir le JS, l’analyser et l’exécuter

Pourquoi le thread principal impacte le temps de chargement.

Certaines étapes de l’affichage d’une page web demandent beaucoup de mémoire et saturent la disponibilité du thread principal. Les instructions se placent dans une file d’attente, et patientent le temps que le thread principal soit disponible pour les exécuter.

Cela pose un problème majeur. Le thread principal est aussi responsable de la gestion des interactions avec l’utilisateur. Quand il sature, il n’est pas en mesure de prendre en charge le clic d’un utilisateur sur un lien, ou le scroll de la souris de manière smooth.

Google PageSpeed Insights ou le plugin LightHouse de Chrome considèrent que si le thread principal de votre page sature pendant plus de 4 secondes, cela est néfaste au temps de chargement de votre site Internet, qui doit être disponible le plus tôt possible pour l’utilisateur.

Principales causes de la saturation du travail du thread principal

Il existe plusieurs origines de la saturation du thread principal :

1. La taille de votre DOM. Plus le DOM est important, plus son interprétation et la gestion des évènements sont importantes. Nous avons écrit tout un article sur la réduction de la taille excessive du DOM
2. L’exécution du CSS. Il existe de nombreuses méthodes pour optimiser le CSS. Pour réduire le travail du DOM sur le thread principal, il est par exemple conseillé de ne pas utiliser des sélecteurs CSS reprenant l’arborescence du DOM, c’est à dire du type E F (exemple : .article .intro). Ces sélecteurs demandent plus de ressource qu’un simple sélecteur (exemple : .artcile__intro). A noter que l’utilisation de la méthode BEM est particulièrement efficace pour améliorer le travail du thread principal.
3. L’exécution du JS. Souvent le plus gourmand en ressource, plus il y a de JS dans la page, plus il y a d’évènements dans la page, et plus le travail du thread principal est saturé.

Optimiser le travail du thread principal

Pour optimiser le travail du thread principal, il convient dans un premier temps d’analyser la source de la saturation. Bonne nouvelle, Google PageSpeed Insights ou LightHouse nous indiquent clairement s’il s’agit du HTML, du CSS ou du JS qui consomme le plus de ressource. Dans la plus part des cas, il s’agira du JS.

1. Réduire le Javascript

Il n’y a pas de secret, s’il faut réduire le travail du thread principal sur le JS, il va falloir supprimer des interactions ou des évènements. Il faut donc prioriser l’ensemble des scripts de votre pages, en séparant ceux qui sont primordiaux sur le site, de ceux qui sont là pour l’esthétisme ou pour le plaisir. Supprimez tout ce que vous pouvez !

2. Optimiser le CSS

Pour le CSS, il faut revenir sur l’ensemble des sélecteurs et réduire ceux qui sont gourmand en ressources. Simplifiez les :

main article p > span a.link{

}
/* A remplacer par */
.link{

}

Sachez qu’il y a aussi des propriétés qui sont couteuses en ressources, telles que le box-shadow, le border-radius ou le blur.

Dernier point, minifier et concaténer le CSS a un impact positif sur le travail du thread.

3. Optimiser le HTML

Plus votre page est longue, plus elle va demander de ressources. Si vous le pouvez, réduisez la taille de votre page Web et diminuez la taille du DOM.

Réduire le travail du thread principal sous WordPress

Optimiser le travail du thread principal relève surtout de l’optimisation de l’intégration HTML, CSS et JS. WordPress peut éventuellement être impliqué dans cette saturation via l’utilisation de fichiers non nécessaires ou l’utilisation d’un trop grand nombre de plugins qui ajoutent du JS ou du CSS au code source des pages.

Voici quelques lignes que nous utilisons sur nos projets WordPress pour nettoyer un peu le front :

<?php 
        // category feeds
	remove_action( 'wp_head', 'feed_links_extra', 3 );

	// post and comment feeds
	remove_action( 'wp_head', 'feed_links', 2 );

	// EditURI link
	remove_action( 'wp_head', 'rsd_link' );

	// windows live writer
	remove_action( 'wp_head', 'wlwmanifest_link' );

	// previous link
	remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );

	// start link
	remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );

	// links for adjacent posts
	remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );

	// WP version
	remove_action( 'wp_head', 'wp_generator' );

	// Disable XML RPC
    add_filter('xmlrpc_enabled', '__return_false');

	// Disable REST API LINK
	remove_action( 'wp_head', 'rest_output_link_wp_head', 10 );

	add_action( 'init', function() {

    // Remove the REST API endpoint.
    remove_action('rest_api_init', 'wp_oembed_register_route');


    // Turn off oEmbed auto discovery.
    // Don't filter oEmbed results.
    remove_filter('oembed_dataparse', 'wp_filter_oembed_result', 10);

    // Remove oEmbed discovery links.
    remove_action('wp_head', 'wp_oembed_add_discovery_links');

    // Remove oEmbed-specific JavaScript from the front-end and back-end.
    remove_action('wp_head', 'wp_oembed_add_host_js');

Cela ne suffira pas à vous faire passer d’un note orange à une note verte, mais c’est une première étape. Pour aller plus loin, il faudra aller plus loin. Vous pouvez faire le point sur la nécessité de chacun des plugins WordPress et désactiver ceux non essentiels.

L’autre solution réside dans la diminution de la taille de vos pages web.

Enfin, si vous utilisez un thème premium, nous vous conseillons de basculer sur un thème sur mesure. Les thèmes premiums sont faits pour répondre à tous les types de besoin. Ils répondront donc aussi à des besoins que vous n’avez pas, en intégrant des fonctionnalités JS ou du CSS dont vous pourriez aisément vous passer.

Réduire le travail du thread principal sous Vue.JS

Vue.js est entièrement développé en JS. Cela peut parfois générer un ralentissement du temps de chargement du site si le thread principal est surchargé.

L’un des pistes à étudier pour l’optimisation du thread principal sous Vue.js est l’utilisation de composant asynchrones. L’idée est de charger le contenu de la page et de ses interactions au fur et à mesure du scroll dans la page. Ainsi, chacune des ressources, HTML, CSS, et JS ne seraient appelées que si elles sont nécessaires. Il s’agit ni plus ni moins que du lazy-loading de composant, l’avenir du web.

Enfin, sachez aussi qu’une nouvelle version de Vue.js devrait sortir bientôt. Elle devrait améliorer grandement les performances et donc participer à réduire le travail du thread. Consultez l’article sur la version 3 de vue.js

Méthodologie de 36 Pixels

Il est bien plus aisé d’optimiser le travail du thread principal dès le début du développement du site Internet, plutôt qu’en correction.

Lors de la phase de développement, voici quelques règles que nous nous sommes fixées pour optimiser le thread principal :

1. Éviter d’utiliser des bibliothèques JavaScript tierces
2. Éviter de créer des pages HTML à rallonge.
3. Utiliser la méthode BEM pour le CSS
4. Mesurer tout au long du développement les évolutions sur Google PageSpeed Insights.

Pour un site existant sur lequel nous devons réaliser une optimisation, voici le processus :

1. Consulter sur Google PageSpeed Insights quelle est la catégorie la plus consommatrice pour le thread principal. Il s’agira souvent du JS.
2. Evaluer à l’aide de l’onglet performance de l’outil pour développeur de Chrome à quel moment le thread principal sature.
3. Corriger les problèmes trouvés.

Quel gain espérer en améliorant le travail du thread principal ?

Améliorer le travail du thread principal a plusieurs conséquences.

Impact sur les données Google PageSpeed Insights

Le thread principal étant fortement sollicité au moment de l’affichage de la page, l’optimiser permettra d’améliorer le temps global de chargement de la page. Quasiment toutes les données de Google PageSpeed Insights seront impactées :

• l’indice de vitesse,
• le premier processeur inactif
• le délai avant interactivité
• le Max Potential First Input Delay.

Impact sur le ressenti de l’utilisateur

L’autre principal bénéfice à l’amélioration du travail du thread principal est le ressenti de l’utilisateur. Il n’y a rien de pire pour un utilisateur que de ralentir sa machine. Si une page web donne l’impression à un utilisateur que cela fait bugger son navigateur, vous pouvez être sûr que vous perdrez rapidement votre visiteur et qu’il ne reviendra plus jamais.

En optimisant le thread principal, la page devient interactive plus rapidement, saccade beaucoup moins. Cela donne une sensation de fluidité de la page.

En conclusion sur le travail du thread principal

Réduire le travail du thread principal est l’une des recommandations les plus compliquées à mettre en oeuvre. Cela demande un haut niveau d’expérience et de ce connaissance en matière d’optimisation.

Malgré cela, c’est aussi l’une des recommandations qui donnera le plus de résultat pour l’amélioration du temps de chargement de votre site web.

Enfin, comme à chaque fois, si vous avez besoin d’aide pour optimiser le chargement de votre site, contactez-nous !