Depuis l’introduction de Lighthouse, de nouveaux paramètres liés à la vitesse des pages sont apparus. L’un des plus importants de ces paramètres est First Contentful Paint (FCP). Dans la version 10 de Lighthouse, effective à compter de juin 2024, l'impact du FCP sur la note globale est de 10 %.
Pour adopter et comprendre le FCP en tant que mesure, il est essentiel d’abord d’examiner la psychologie qui le sous-tend. Le concept est similaire à celui miroirs installés dans les ascenseurs:
Pour résumer brièvement : dans la première moitié des années 1900, l'utilisation des ascenseurs dans les immeubles de grande hauteur a considérablement augmenté, mais les systèmes d'ascenseurs étaient primitifs par rapport à aujourd'hui. Par conséquent, l’idée d’installer des miroirs dans les ascenseurs a émergé pour réduire le temps passé dans l’ascenseur.
Revenons à notre sujet : Le point qui vous fait perceptiblement attendre pendant le temps de chargement lorsque vous essayez d'accéder à une page est FCP. La définition de First Contentful Paint est le temps nécessaire pour que le premier texte, image, toile non blanche, etc., soit affiché pour l'utilisateur.. L’unité du FCP est la seconde.
Dans Lighthouse, l'échelle de couleurs du FCP est déterminée comme suit :
- 0-2 secondes : Vert => Rapide
- 2-4 secondes : Orange => Besoin d'amélioration
- 4+ secondes : Rouge => Lent
Selon les données HTTP Archive, le nombre de sites pouvant être pris en compte rapide c'est 25%, et 50 % des sites existants sont classés comme lents.
Que peut-on faire pour améliorer le FCP ?
Réduisez le temps de réponse du serveur
Généralement, cela peut être interprété comme des améliorations nécessaires du côté serveur du serveur et du logiciel. Pour répertorier les problèmes qui ont un impact négatif sur le temps de réponse du serveur :
- Le partage, la configuration (c'est-à-dire les paramètres du serveur) et les ressources du serveur pourraient être à l'origine du problème.. La capacité de votre serveur doit être augmentée en fonction de votre trafic. Dans certains cas, des requêtes de base de données mal écrites et des composants logiciels très complexes peuvent sérieusement affecter le temps de réponse du serveur.
- La non-utilisation d'un CDN (Content Delivery Network) peut entraîner des retards dans l'accès au contenu, affectant le FCP. À mesure que la taille du contenu augmente, par exemple, si un grand GIF animé ou une vidéo est tenté d'être appelé sans CDN et que le serveur principal se trouve sur un autre continent, vous devrez peut-être envisager des solutions CDN pour résoudre le FCP.
- Ne pas diffuser de contenu statique avec une politique de cache appropriée et cohérente peut surcharger inutilement votre serveur à mesure que le nombre de visiteurs augmente. Par exemple, si vous ne conservez pas votre logo dans un cache à long terme lors de son chargement sur chaque page, vous nuisez inutilement au temps de réponse de votre serveur.
- Redirections de pages inutiles tout en accédant à la page peut affecter inutilement votre FCP.
Par exemple, dans le passé, il y avait des configurations comme celle-ci : lorsqu'un utilisateur voulait accéder à un site, il y avait une redirection HTTP vers HTTPS, puis s'il était mobile, une redirection HTTPS vers mobile (par exemple, https:// www vers https://m), et si la page était supprimée et redirigée ailleurs avec un 301, c'était comme si l'utilisateur passait de bureau en bureau dans un bureau des impôts. Il s'agit d'un exemple extrême pour une meilleure compréhension, mais si vous redirigez une page vers une autre URL avec une redirection 301, puis redirigez cette page vers une autre avec un 301, vous pourriez effectuer la même configuration illogique.
- Si vous n'utilisez pas de préconnexion ou de prélecture DNS préfixes lorsque vous vous connectez à vos services tiers et que vous vous connectez à de nombreux services tiers, vous ne faites rien de bénéfique pour FCP.
Réduire les ressources bloquant le rendu
Je dois admettre que ce seul point rédigé sous forme d’élément de campagne peut prendre des mois à être résolu.
Pour y parvenir, il existe une méthode de résolution où tous Les ressources JS, CSS et similaires qui bloquent le rendu de la page sont chargées après le moment de la création de la page, mais la partie initialement visible du site est chargée en premier pendant le chargement du site.. Cependant, pour ce faire, toutes les ressources JS, CSS et similaires doivent être examinées et les processus les plus chronophages doivent être séparés. De plus, utiliser le moins de services tiers possible permet d’optimiser le FCP.
