Componentes de tema e Largest Contentful Paint (LCP)

Dev
1

Estou buscando melhorar as métricas Web Vitals do meu site, especificamente o LCP. Tenho tido problemas onde o tempo é de ~2,7s (deveria ser inferior a 2,5s). De https://web.dev/optimize-lcp:

Especificamente, o LCP mede o tempo desde o momento em que o usuário inicia o carregamento da página até que a maior imagem ou bloco de texto seja renderizado dentro da viewport.

Isolei o problema em um componente de tema de banner que escrevi. Uma imagem de banner que monto como um widget “above-main-container” é o maior objeto pintado na tela em basicamente todas as páginas.

Código 
<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>

É o que eu acho que está acontecendo. A div que contém a imagem é montada usando JS, então uma série de pré-requisitos precisam acontecer quando uma página do Discourse é atualizada antes que esse código JS seja executado. Isso faz com que o banner seja buscado após 2,5s, prejudicando assim a métrica LCP.

Tentei priorizar a imagem do banner usando fetchpriority="high", como visto no código. Mas acho que isso não resolve o problema de tempo raiz aqui.

Alguma sugestão sobre como priorizar a renderização deste componente de tema específico? Seria melhor convertê-lo para um plugin? Existe alguma outra maneira de injetar o banner o mais cedo possível? Obrigado!

3 curtidas
2

Talvez minha pergunta seja muito detalhada. Aqui está uma pergunta mais fácil se alguém souber a resposta:

Quando uma página é recarregada, os elementos de plugins serão renderizados antes dos componentes do tema?

3

Se o seu banner for maior do que o elemento que usamos para o Introducing Discourse Splash - A visual preloader displayed while site assets load, você terá um mau momento para o LCP.

Se você acha que o principal problema é o download do recurso de imagem, você pode adicionar algo como

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

ao seu elemento HEAD em um tema.

2 curtidas
4

Estou tendo um momento ruim :slight_smile: hahaha

Mudei para usar um CDN, o que não ajudou. Como mencionei, acho que a chamada para buscar o banner está acontecendo tarde demais, não o tempo de busca. Tentarei o prefetch para ver se faz alguma diferença!

O que fiz no meantime até chegar a uma solução foi não mostrar o banner a menos que você esteja logado. Parece que o Google está calculando o LCP principalmente a partir do tráfego de busca, que geralmente são usuários não logados no meu caso.

1 curtida
5

O LCP virá de todos os usuários que usam o Google Chrome, portanto, Android, Windows, MacOS, Linux e Chromebooks.

Se você tiver mais visualizações de página vindas de anônimos nesses dispositivos do que de usuários logados, sim, seu LCP refletirá o desempenho desses anônimos.

2 curtidas
6

Bom saber.

Você acha que eu poderia simplesmente contornar este problema aumentando a animação da tela de apresentação?

7

Isso é muito complicado.

Primeiro, acabei de verificar e a tela de introdução já usa a tela inteira (100vh e 100% de largura).

No entanto, alguns usuários não verão a tela de introdução se o Discourse carregar rápido o suficiente. Para esses, o LCP será definido por qualquer elemento que seja grande o suficiente. No seu caso, o banner, então você está limitado por ele.

Eu tentaria a meta tag prefetch e garantiria que fosse um ativo muito bem otimizado e que todos os seus ativos fossem entregues via CDN com PoPs próximos a onde seus usuários estão.

4 curtidas
8

Tem que ser?

9

É basicamente um item básico neste momento, os usuários adoram.

10

E não pode ser ajustado de forma alguma?

11

Claro, eu poderia encolhê-lo ou algo assim, mas preferiria uma solução que não comprometesse a estética.

12

Acabei de tentar essa possível solução e, infelizmente, não pareceu fazer diferença. Também substituí a imagem do banner por uma imagem trivialmente pequena como verificação de sanidade e isso também não fez diferença para o LCP. Obrigado pela sugestão, no entanto.

Não sei o funcionamento interno de como os componentes de tema são injetados na página, mas minha impressão é que, quando o componente de banner é injetado, já é tarde demais. Minha próxima tentativa será experimentá-lo como um plugin.

13

Longe do ideal, mas isso tem funcionado

Screenshot_20230412_125237
Screenshot_20230412_1252371080×1206 97.7 KB

Caso alguém tenha um problema semelhante