Themenkomponenten und Largest Contentful Paint (LCP)

Entwickler
1

Ich möchte die Web Vitals für meine Website verbessern, insbesondere LCP. Ich habe Probleme, bei denen die Zeit etwa 2,7 Sekunden beträgt (sollte unter 2,5 Sekunden liegen). Von https://web.dev/optimize-lcp:

Genauer gesagt misst LCP die Zeit vom Beginn des Seitenaufrufs durch den Benutzer bis zum Rendern des größten Bildes oder Textblocks innerhalb des Viewports.

Ich habe das Problem auf eine Banner-Theme-Komponente eingegrenzt, die ich geschrieben habe. Ein Bannerbild, das ich als Widget „above-main-container“ einbinde, ist das größte Objekt, das auf praktisch jeder Seite auf den Bildschirm gemalt wird.

Code 
<script type="text/discourse-plugin" version="0.8">
  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%"})
    }
  });
</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/banner">
  {{mount-widget widget="my-banner"}}
</script>

Ich glaube, Folgendes passiert. Das Div, das das Bild enthält, wird über JS eingebunden. Daher müssen eine Reihe von Voraussetzungen erfüllt sein, wenn eine Discourse-Seite aktualisiert wird, bevor dieser JS-Code ausgeführt wird. Dies führt dazu, dass das Banner nach 2,5 Sekunden abgerufen wird und somit die LCP-Metrik beeinträchtigt.

Ich habe versucht, das Bannerbild mit fetchpriority="high" zu priorisieren, wie im Code zu sehen ist. Aber ich glaube, das behebt nicht das grundlegende Timing-Problem hier.

Haben Sie Vorschläge, wie ich das Rendern dieser speziellen Theme-Komponente priorisieren kann? Wäre es besser, sie in ein Plugin umzuwandeln? Gibt es eine andere Möglichkeit, das Banner so früh wie möglich einzufügen? Danke!

3 „Gefällt mir“
2

Vielleicht ist meine Frage zu detailliert. Hier ist eine einfachere Frage, wenn jemand die Antwort kennt:

Werden Elemente von Plugins früher gerendert als Theme-Komponenten, wenn eine Seite neu geladen wird?

3

Wenn Ihr Banner größer ist als das Element, das wir für das Introducing Discourse Splash - A visual preloader displayed while site assets load verwenden, werden Sie eine schlechte Zeit für LCP haben.

Wenn Sie glauben, dass das Hauptproblem der Download des Bild-Assets ist, können Sie etwas hinzufügen wie

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

zu Ihrem HEAD-Element in einem Theme.

2 „Gefällt mir“
4

Ich habe gerade eine schlechte Zeit :slight_smile: hahaha

Ich bin auf ein CDN umgestiegen, was nicht geholfen hat. Wie ich bereits erwähnt habe, glaube ich, dass der Aufruf zum Abrufen des Banners zu spät erfolgt, nicht die Abrufzeit. Ich werde den Prefetch ausprobieren, um zu sehen, ob er einen Unterschied macht!

Was ich in der Zwischenzeit getan habe, bis ich eine Lösung gefunden habe, ist, das Banner nicht anzuzeigen, es sei denn, Sie sind angemeldet. Es sieht so aus, als ob Google LCP hauptsächlich aus dem Suchverkehr berechnet, was in meinem Fall typischerweise nicht angemeldete Benutzer sind.

1 „Gefällt mir“
5

LCP kommt von allen Benutzern, die Google Chrome verwenden, also Android, Windows, MacOS, Linux und Chromebooks.

Wenn Sie mehr Seitenaufrufe von anonymen Benutzern auf diesen Geräten haben als von angemeldeten Benutzern, ja, dann spiegelt LCP die Leistung dieser anonymen Benutzer wider.

2 „Gefällt mir“
6

Gut zu wissen.

Glaubst du, ich könnte dieses Problem umgehen, indem ich die Splash-Screen-Animation einfach größer mache?

7

Das ist sehr kompliziert.

Zuerst habe ich gerade überprüft und der Splashscreen nutzt bereits den gesamten Bildschirm (100vh und 100% Breite).

Einige Benutzer erhalten den Splashscreen jedoch nicht, wenn ihr Discourse-Start schnell genug ist. Für diese wird dann das LCP durch das Element gesetzt, das groß genug ist. In Ihrem Fall das Banner, Sie sind also daran gebunden.

Ich würde das Prefetch-Meta-Tag ausprobieren und sicherstellen, dass es sich um ein sehr gut optimiertes Asset handelt und dass alle Ihre Assets über ein CDN mit PoPs in der Nähe Ihrer Benutzer ausgeliefert werden.

4 „Gefällt mir“
8

Muss es das?

9

Es ist im Grunde ein Grundnahrungsmittel, die Nutzer lieben es

10

Und es kann nicht in irgendeiner Weise angepasst werden?

11

Natürlich könnte ich es immer kleiner machen oder so, aber ich bevorzuge eine Lösung, die die Ästhetik nicht beeinträchtigt.

12

Ich habe diese mögliche Lösung gerade ausprobiert und sie hat leider keinen Unterschied gemacht. Ich habe auch das Bannerbild durch ein trivial kleines Bild ersetzt, um einen Sanity-Check durchzuführen, und es hat keinen Unterschied beim LCP gemacht. Vielen Dank für den Vorschlag.

Ich kenne die internen Abläufe nicht, wie Theme-Komponenten auf die Seite injiziert werden, aber mein Eindruck ist, dass es bereits zu spät ist, wenn die Bannerkomponente injiziert wird. Mein nächster Versuch wird sein, es als Plugin zu versuchen.

13

Weit davon entfernt, ideal zu sein, aber das hat funktioniert

Screenshot_20230412_125237
Screenshot_20230412_1252371080×1206 97.7 KB

Falls jemand ein ähnliches Problem hat