Comment le « Start Render » peut faire bondir votre taux de conversion

Lors de l’amélioration des performances d’un site, la priorité est en général donnée (et avec raison) à l’impact sur les revenus. Le moment de l’affichage du rendu, le « Start Render », est l’un des premiers points à améliorer tant son influence sur le sujet est énorme. Méthode :

Contenu visible

Lorsque la navigation débute jusqu’à l’affichage du premier contenu de couleur (lire « non blanc »), c’est le « Start Render ». Plus le temps nécessaire à l’affichage du rendu est long, plus le taux de rebond va en pâtir, et plus le taux de conversion va baisser.

C’est un fait relativement connu dans le milieu : plus le temps de chargement est long, plus les revenus se détériorent. Ce que l’on entend moins en revanche c’est qu’il existe plusieurs paliers et il s’agit ici de l’un des plus cruciaux.

Pourquoi le rendu met 100 ans à s’afficher

Lorsqu’un certain nombre de ressources (scripts, styles, polices, visuels, etc…) chargent sans priorisation ou sélection, alors elles repoussent d’autant plus le démarrage du rendu.

Par exemple, si vous êtes sous WordPress, un bon moyen de repousser toujours plus loin le start render est d’installer une multitude d’extensions, de placer des images ici et là puis d’espérer le meilleur.

Les ressources nécessaires à l’affichage rapide de vos premiers éléments visuels ne sont pas priorisés et leur chargement est retardé constamment, causant souvent des délais de plusieurs secondes jusqu’à ce que l’utilisateur puisse enfin apercevoir quelque chose. Beaucoup auront déjà quitté le site avant que cela n’arrive.

Comment améliorer le Start Render

Avant de savoir quoi faire, il faut d’abord comprendre l’ordre actuel de chargement des ressources. Un outil comme WebPageTest est utile car il permet de visualiser en cascade chaque élément et de voir leur impact.

Une fois que l’on a une meilleure idée du délai actuel de l’affichage, il faut effectuer un tri de chaque script, fichier css, etc… qui survient avant le start render. Est-ce un fichier nécessaire ? Peut-il être supprimé ou chargé de manière asynchrone ?

Si tel ou tel fichier ne peut être supprimé et si vous avez accès à des développeurs, peuvent-ils en réduire le poids ? S’il s’agit de fichiers chargés depuis des URLs externes, est-il possible de les héberger sur son serveur directement ou de les préconnecter ?

Enfin, pour les éléments nécessaires comme les .js et les .css, peut-on utiliser des techniques de CSS critique et de séparation du code, dans le but de ne charger que la partie utilisée et de remettre le reste à plus tard ?

Si chaque optimisation individuelle ne produira pas forcément un effet spectaculaire, c’est l’accumulation de petites actions qui va changer la donne et faire grimper votre taux de conversion au fur et à mesure de la réduction du délai de démarrage du rendu.

En résumé

Étapes à suivre :

1. Utilisation d’un outil comme WebPageTest pour déterminer le temps jusqu’au Start Render
2. Analyse des éléments chargés jusqu’au démarrage du rendu
3. Suppression et chargement différés des ressources non-essentielles
4. Optimisation des fichiers essentiels
5. Suivi des performances

Plus vite le visiteur verra le contenu s’afficher tôt, même incomplet, plus le taux d’interactivité sera élevé, plus le taux de conversion grimpera.