Passer le LCP sous la seconde sur un hébergement mutualiséGetting LCP under a second on shared hosting

Le LCP mesure le temps au bout duquel le plus gros élément visible est affiché. C’est la métrique que Google regarde en premier, et celle qui résiste le plus longtemps aux optimisations superficielles. Voici l’ordre dans lequel les choses ont été faites, qui compte autant que les choses elles-mêmes.LCP measures how long it takes for the largest visible element to be painted. It is the metric Google looks at first, and the one that resists superficial optimisation the longest. Here is the order things were done in, which matters as much as the things themselves.

Un : savoir quel est l'élément mesuréOne: know which element is measured

Avant de rien optimiser, il faut identifier l’élément que le navigateur considère comme le plus grand. C’est souvent une surprise : un bloc de texte, une image de fond, parfois un élément invisible mal dimensionné. Optimiser une image qui n’est pas l’élément mesuré ne déplace pas le chiffre d’un millième de seconde.Before optimising anything, identify the element the browser considers largest. It is often a surprise: a block of text, a background image, sometimes a badly sized invisible element. Optimising an image that is not the measured element does not move the number by a millisecond.

Deux : la découvrir tôtTwo: discover it early

Une image déclarée en CSS, ou chargée par un script, n’est connue du navigateur qu’après l’analyse de la feuille de style ou du script. Elle part donc avec plusieurs centaines de millisecondes de retard. Une balise de préchargement dans l’en-tête, posée uniquement pour l’image concernée, supprime ce retard.An image declared in CSS, or loaded by a script, is only known to the browser after the stylesheet or script has been parsed. It therefore starts several hundred milliseconds late. A preload tag in the head, placed only for that image, removes the delay.

Le mot « uniquement » est important. Précharger dix ressources revient à n’en précharger aucune : la bande passante initiale est partagée, et l’élément mesuré arrive plus tard qu’avant.The word “only” matters. Preloading ten resources is the same as preloading none: the initial bandwidth is shared, and the measured element arrives later than before.

Trois : ne pas la faire attendreThree: do not make it wait

• Pas de chargement différé sur l’image du haut de page : c’est l’erreur la plus fréquente, et elle coûte à elle seule plusieurs centaines de millisecondes.No lazy loading on the top-of-page image: this is the most common mistake, and it alone costs several hundred milliseconds.
• Un attribut de priorité élevé, pour qu’elle passe devant les autres requêtes.A high priority attribute, so it jumps ahead of other requests.
• Les dimensions déclarées, pour que le navigateur réserve sa place sans attendre le fichier.Declared dimensions, so the browser reserves its space without waiting for the file.

Quatre : alléger ce qui bloqueFour: lighten what blocks

Tant que la feuille de style principale n’est pas chargée, rien ne s’affiche. Sur ce site, elle fait moins de 30 Ko et ne charge aucune police par import — les polices sont préchargées séparément, en format compressé moderne, et le texte reste visible pendant leur chargement plutôt que de disparaître.Until the main stylesheet has loaded, nothing paints. On this site it is under 30 KB and imports no fonts — fonts are preloaded separately, in a modern compressed format, and the text stays visible while they load rather than disappearing.

Une police chargée en bloquant le rendu, c’est une page blanche pendant une demi-seconde. Le réglage qui affiche le texte dans une police de repli en attendant coûte une ligne, et se voit immédiatement dans la mesure.A font that blocks rendering means a blank page for half a second. The setting that shows text in a fallback font meanwhile costs one line, and shows up immediately in the measurement.

Le résultatThe result

Sur un hébergement mutualisé classique, avec le cache du serveur activé, le LCP est descendu sous la seconde sur mobile. Aucune de ces opérations ne demande un serveur plus puissant : elles demandent de savoir ce qu’on mesure, et d’optimiser dans l’ordre.On ordinary shared hosting with server caching enabled, LCP dropped below one second on mobile. None of these steps needs a more powerful server: they need you to know what you are measuring, and to optimise in order.