Composants de thème et Largest Contentful Paint (LCP)

Dev
1

Je cherche à améliorer les Web Vitals de mon site, en particulier le LCP. J’ai des problèmes où le temps est d’environ 2,7 secondes (devrait être inférieur à 2,5 secondes). D’après Optimize Largest Contentful Paint  |  Articles  |  web.dev :

Plus précisément, le LCP mesure le temps écoulé entre le moment où l’utilisateur lance le chargement de la page et le moment où la plus grande image ou le plus grand bloc de texte est rendu dans la fenêtre d’affichage.

J’ai isolé le problème à un composant de thème de bannière que j’ai écrit. Une image de bannière que je monte comme un widget “above-main-container” est le plus grand objet peint à l’écran pour pratiquement toutes les pages.

Code 
  const h = require("virtual-dom").h; 

  api.createWidget("my-banner", {
    tagName: "div",

    html() {
      return  h("img.banner-center", {src: settings.banner_image, fetchpriority: "high", style: "aspect-ratio: 925 / 359 ; width: 100%"})
    }
  });

{{mount-widget widget=“my-banner”}}

Voici ce que je pense qu’il se passe. La div contenant l’image est montée à l’aide de JS, donc une série de prérequis doivent se produire lors du rafraîchissement d’une page Discourse avant que ce code JS ne s’exécute. Cela entraîne la récupération de la bannière après 2,5 secondes, nuisant ainsi à la métrique LCP.

J’ai tenté de prioriser l’image de la bannière en utilisant fetchpriority="high", comme on le voit dans le code. Mais je pense que cela ne résout pas le problème de synchronisation à la racine.

Des suggestions sur la façon de prioriser le rendu de ce composant de thème particulier ? Serait-il préférable de le convertir en plugin ? Existe-t-il un autre moyen d’injecter la bannière le plus tôt possible ? Merci !

3 « J'aime »
2

Peut-être que ma question est trop détaillée. Voici une question plus simple si quelqu’un connaît la réponse :

Lorsqu’une page est rechargée, les éléments des plugins s’affichent-ils avant les composants du thème ?

3

Si votre bannière est plus grande que l’élément que nous utilisons pour le Introducing Discourse Splash - A visual preloader displayed while site assets load, vous allez avoir un mauvais moment pour le LCP.

Si vous pensez que le problème principal est le téléchargement de l’actif image, vous pouvez ajouter quelque chose comme

<link rel="prefetch" href="http://example.com/myimage.webp" />

à votre élément HEAD dans un thème.

2 « J'aime »
4

Je passe actuellement un mauvais moment :slight_smile: hahaha

J’ai basculé sur l’utilisation d’un CDN, ce qui n’a pas aidé. Comme je l’ai mentionné, je pense que l’appel pour récupérer la bannière est ce qui se passe trop tard, pas le temps de récupération. J’essaierai le prefetch pour voir si cela fait une différence !

Ce que j’ai fait en attendant de trouver une solution, c’est de ne pas afficher la bannière sauf si vous êtes connecté. Il semble que Google calcule le LCP principalement à partir du trafic de recherche, qui est généralement constitué d’utilisateurs non connectés dans mon cas.

1 « J'aime »
5

Le LCP proviendra de tous les utilisateurs de Google Chrome, donc Android, Windows, MacOS, Linux et Chromebooks.

Si vous avez plus de pages vues provenant d’utilisateurs anonymes sur ces appareils que d’utilisateurs connectés, oui, votre LCP reflétera les performances de ces utilisateurs anonymes.

2 « J'aime »
6

Bon à savoir.

Pensez-vous que je pourrais simplement contourner ce problème en agrandissant l’animation de l’écran de démarrage ?

7

C’est très compliqué.

Tout d’abord, je viens de vérifier et l’écran de démarrage utilise déjà tout l’écran (100vh et 100% de largeur).

Cependant, certains utilisateurs n’auront pas l’écran de démarrage si leur démarrage Discourse est suffisamment rapide. Pour ceux-là, le LCP sera défini par l’élément suffisamment grand. Dans votre cas, la bannière, vous êtes donc lié par elle.

J’essaierais la balise méta prefetch, et je m’assurerais qu’il s’agit d’un actif très bien optimisé et que tous vos actifs sont livrés via CDN avec des PoP proches de l’endroit où se trouvent vos utilisateurs.

4 « J'aime »
8

Est-ce obligatoire ?

9

C’est essentiellement un incontournable à ce stade, les utilisateurs l’adorent.

10

Et il ne peut pas être ajusté de quelque manière que ce soit ?

11

Bien sûr, je pourrais toujours le rétrécir ou quelque chose comme ça, mais je préférerais une solution qui ne compromette pas l’esthétique.

12

J’ai essayé cette solution possible et elle n’a malheureusement pas semblé faire de différence. J’ai également remplacé l’image de bannière par une image trivialement petite pour une vérification de bon sens et cela n’a fait aucune différence pour le LCP. Merci pour la suggestion cependant.

Je ne connais pas le fonctionnement interne de l’injection des composants de thème dans la page, mais j’ai l’impression qu’au moment où le composant de bannière est injecté, il est déjà trop tard. Ma prochaine tentative sera d’essayer en tant que plugin.

13

Loin d’être idéal, mais cela a fonctionné

Screenshot_20230412_125237
Screenshot_20230412_1252371080×1206 97.7 KB

Au cas où quelqu’un aurait un problème similaire