Componenti del tema e Largest Contentful Paint (LCP)

Sviluppatore
1

Sto cercando di migliorare le metriche Web Vitals del mio sito, in particolare LCP. Ho riscontrato problemi in cui il tempo è di circa 2,7 secondi (dovrebbe essere inferiore a 2,5 secondi). Da https://web.dev/optimize-lcp:

Nello specifico, LCP misura il tempo dall’avvio del caricamento della pagina da parte dell’utente fino al rendering della maggiore immagine o blocco di testo all’interno dell’area visibile.

Ho isolato il problema in un componente del tema banner che ho scritto. Un’immagine banner che monto come widget “above-main-container” è l’oggetto più grande visualizzato sullo schermo per praticamente ogni pagina.

Codice 
<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>

Ecco cosa penso stia succedendo. Il div che contiene l’immagine viene montato tramite JS, quindi una serie di prerequisiti devono verificarsi quando una pagina di Discourse viene aggiornata prima che questo codice JS venga eseguito. Ciò causa il recupero del banner dopo 2,5 secondi, danneggiando così la metrica LCP.

Ho tentato di dare priorità all’immagine del banner utilizzando fetchpriority="high", come si vede nel codice. Ma penso che non risolva il problema principale di tempistica.

Avete suggerimenti su come dare priorità al rendering di questo particolare componente del tema? Sarebbe meglio convertirlo in un plugin? Esiste un altro modo per inserire il banner il prima possibile? Grazie!

3 Mi Piace
2

Forse la mia domanda è troppo dettagliata. Ecco una domanda più semplice se qualcuno conosce la risposta:

Quando una pagina viene ricaricata, gli elementi dei plugin verranno visualizzati prima dei componenti del tema?

3

Se il tuo banner è più grande dell’elemento che utilizziamo per Introducing Discourse Splash - A visual preloader displayed while site assets load, avrai un brutto momento per LCP.

Se pensi che il problema principale sia il download dell’asset immagine, puoi aggiungere qualcosa come

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

al tuo elemento HEAD in un tema.

2 Mi Piace
4

Sto passando un brutto momento :slight_smile: hahaha

Ho iniziato a usare una CDN che non ha aiutato. Come ho detto, penso che la chiamata per recuperare il banner avvenga troppo tardi, non il tempo di recupero. Proverò il prefetch per vedere se fa la differenza!

Quello che ho fatto nel frattempo, finché non arriverò a una soluzione, è non mostrare il banner a meno che tu non sia loggato. Sembra che Google calcoli LCP principalmente dal traffico di ricerca, che nel mio caso sono tipicamente utenti non loggati.

1 Mi Piace
5

LCP proverrà da tutti gli utenti che utilizzano Google Chrome, quindi Android, Windows, MacOS, Linux e Chromebook.

Se hai più visualizzazioni di pagina provenienti da anonimi su quei dispositivi rispetto agli utenti loggati, sì, il tuo LCP rifletterà le prestazioni di quegli anonimi.

2 Mi Piace
6

Buono a sapersi.

Pensi che potrei semplicemente aggirare questo problema rendendo più grande l’animazione della schermata di avvio?

7

Questo è molto complicato.

Innanzitutto, ho appena controllato e la schermata di avvio utilizza già l’intero schermo (100vh e 100% di larghezza).

Tuttavia, alcuni utenti non vedranno la schermata di avvio se il loro Discourse si avvia abbastanza velocemente. Per questi, l’LCP sarà impostato da qualsiasi elemento sia abbastanza grande. Nel tuo caso il banner, quindi sei vincolato da esso.

Proverei il tag meta prefetch e mi assicurerei che sia un asset molto ben ottimizzato e che tutti i tuoi asset vengano distribuiti tramite CDN con PoP vicini a dove si trovano i tuoi utenti.

4 Mi Piace
8

Deve necessariamente esserlo?

9

È praticamente un punto fermo a questo punto, agli utenti piace molto

10

E non può essere modificato in alcun modo?

11

Certo, potrei sempre rimpicciolirlo o qualcosa del genere, ma preferirei una soluzione che non comprometta l’estetica.

12

Ho appena provato questa possibile soluzione e purtroppo non sembra aver fatto alcuna differenza. Ho anche sostituito l’immagine del banner con un’immagine di dimensioni irrisorie come controllo di sanità e non ha fatto alcuna differenza per LCP. Grazie comunque per il suggerimento

Non conosco il funzionamento interno di come i componenti del tema vengono iniettati nella pagina, ma la mia impressione è che nel momento in cui il componente banner viene iniettato, sia già troppo tardi. Il mio prossimo tentativo sarà provarlo come plugin.

13

Lontano dall’ideale, ma ha funzionato

Screenshot_20230412_125237
Screenshot_20230412_1252371080×1206 97.7 KB

Nel caso qualcuno abbia un problema simile