Comment optimiser le First Meaningful Paint ?

Parmi l’ensemble des données fournies par Google PageSpeed Insights, le First Meaningful Paint est sans doute la plus importante pour l’utilisateur. Cette donnée indique le temps que met le navigateur à afficher un premier élément dans la page. Pour l’utilisateur, cela nous donne une indication sur le moment ou il sent que la page devient visible. il est donc important d’arriver à afficher un premier élément à l’intérieur de la page le plus vite possible.

Avant d’aller un peu plus loin, présentons-nous. Nous sommes l’agence web 36 Pixels. Parmi nos expertises, nous sommes spécialistes de l’optimisation de site afin de rendre leur chargement plus rapide. Optimiser la vitesse de son site est aujourd’hui devenu obligatoire pour travailler son référencement, pensez-y !

Plus le First Meaningful Paint (le FMP) est faible, plus votre score Google Insight est bon et votre site est optimisé et son chargement est rapide. Voici le programme de cet article :

• Définition du First Meaningful Paint
• Optimiser et réduire le First Meaningful Paint
• Améliorez le FMP sur WordPress

Définition du First Meaningful Paint

Le First Meaningful Paint sert à mesurer le temps entre le début du chargement de la page et le moment ou le premier élément est affiché à l’intérieur de la page, la plus part du temps un texte ou un article (les images mettent du temps à charger). Comme indiqué dans l’introduction, cette donnée est centrée sur la sensation pour l’utilisateur principalement. Pour Google cette donnée est l’une des moins importantes avec le temps de latence. Pourquoi ? Simplement parce que l’affichage du premier élément dans la page n’est pas révélateur du temps de chargement complet de la page ou du temps que met la page à devenir interactive. Avoir un first Meaningful Paint très faible est donc beaucoup moins intéressant que le Time To Interactive, de l’ordre de 1 à 5 tout de même. Aussi malgré une définition qui parait plutôt pertinente pour l’utilisateur, ce ne sera sans doute pas la première donnée à analyser et à optimiser pour obtenir une meilleure note sur Google Insights.

Illustration du First Meaningful Paint sur Google Insights. On voit ici les premiers éléments de la page s’afficher les uns après les autres. L’idée pour améliorer le FMP est d’arriver à afficher le premier élément le plus tôt possible

Il y a quand même de bonnes nouvelles avec le FMP. Si vous optimisez le chargement de votre site web en travaillant sur le Critical Rendering Path ou le First Contentful Paint, naturellement votre First Meaningful Paint devrait diminuer.

Vous souhaitez tout de même optimiser le First Meaningful Paint et augmenter votre note Google Insights, parcourez la suite de notre article.

Optimiser et réduire le First Meaningful Paint

Optimiser le FMP pour améliorer le temps de chargement de votre site peut paraître difficile au début. Il y a cependant quelques solutions que vous pouvez mettre en place pour l’optimiser.

Première information, vous devez vous fixer comme objectif de descendre le FMP en dessous de 1 seconde. Au dessus de 1 seconde, l’utilisateur de votre site peut commencer à douter de son choix de clic et peut décider de revenir en arrière pour aller cliquer sur le site d’un concurrent. Ne lui laissez pas le temps de réfléchir, affichez lui le contenu le plus vite possible afin qu’il puisse au moins aller parcourir votre site un minimum avant de faire machine arrière.

Comme annoncé plus haut dans le début de l’article, les techniques pour améliorer le Critical Rendering Path ou le First Contentful Paint auront un effect significatif sur le sur le First Meaningful Paint. On peut penser notamment à la génération d’un critical CSS, à l’utilisation du display:swap pour les typographies ou encore à l’optimisation des fichiers JavaScript en utilisant les méthodes defer ou async.

Chargez progressivement les images

il existe cependant une méthode spécifique à l’optimisation du FMP, qui n’influera que sur cette donnée. C’est le chargement progressif des images.

Pour en revenir à l’objectif principal, nous cherchons donc à optimiser le contenu au dessus de la ligne de flottaison. Eliminons donc d’office le principe du lazy loading sur les images qui n’est intéressant que pour le contenu afficher au scroll dans la page. Pourtant il s’agit bien des images qu’il va falloir optimiser pour améliorer le FMP.

La solution réside donc par exemple dans le chargement progressif des images, un peu à la manière de ce que fait le site Médium sur ces articles. Le serveur commence à envoyer une image de qualité médiocre, floutée pour qu’il n’y paraisse rien, puis dès que possible envoie une image de meilleure qualité. Nous en avons déjà parlé dans de précédent articles, le poids des images sur une page web représente environ 60 à 85% du temps de chargement. Bref, vous trouverez un tutoriel en anglais sur cette page qui vous explique comment le mettre en oeuvre sur votre site. Ce n’est pas forcément simple, cela s’effectue principalement en JavaScript et va vous demander de rentrer dans le code pour le mettre en oeuvre. Mais comme on l’a vue en introduction sur la définition du FMP, nous sommes sur une donnée qui a peu de poids pour l’optimisation du chargement de la page, et ce n’est donc pas la priorité si vous vous lancer dans la performance web. Réservé donc aux experts qui cherchent à atteindre un score de 100 sur Google Insights.

Améliorez le FMP sur WordPress.

Tout plugin de cache, d’optimisation du CSS ou du JavaScript sur WordPress, qui aura donc un un effet positif sur le Critical Rendering Path ou le First Contentful Paint, aura donc par incidence un effet positif sur le FMP. Il n’existe pas à l’heure actuelle de plugin WordPress pour optimiser le temps de chargement et donc le FPM en utilisant la méthode des images floutées. Si vous êtes intéressé par cette technique sur WordPress, contactez nous pour que nous puissions mettre en place une solution sur mesure pour votre site Internet.

Le First Meaningful Paint, une optimisation réservée aux experts ?

Si vous avez lu cet article depuis le début, vous aurez compris que l’optimisation du First Meaningful Paint n’est pas une priorité dans l’amélioration de vos performances de chargement de votre site Internet et que Google n’y attribue que peu de point dans son score Google insights. Si vous cherchez à obtenir un score de 100 sur Google Insights, vous devrez en revanche en passer par son optimisation.

Si vous n’est pas un expert en développement et en optimisation, passez votre chemin et consacrez plus de temps à d’autres optimisations, ou faites appel à nos services, accélérer le temps chargement des pages web est notre métier.