Adiar javascript e mostrar conteúdo provisório no carregamento inicial da página

Isso provavelmente já é bloqueado por https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md:

Imagens de viewport completo, que são visualmente equivalentes a imagens de fundo, não são mais consideradas como a maior pintura de conteúdo (largest contentful paint)


Bom ponto: veja Largest Contentful Paint (LCP)  |  Articles  |  web.dev

Para elementos de texto, apenas o tamanho de seus nós de texto é considerado (o menor retângulo que abrange todos os nós de texto).

Para todos os elementos, qualquer margem, preenchimento ou borda aplicada via CSS não é considerada.

  • É por isso que o nó de texto estático deve ser renderizado exatamente do mesmo tamanho que o nó de texto EmberJs.
  • Ou até um pouco maior, aumentando a line-height.
    Por exemplo, se a largura dos nós de texto não corresponder, há muitos casos geométricos introduzidos por diferentes quebras de linha onde o nó de texto estático se torna menor que o EmberJs.

Veja: Exemplos de LCP


Na verdade, usei a renderização noscript das postagens dentro de uma página de tópico. As classes CSS correspondem ligeiramente às reais - então a aparência é igual.

Veja: Alterações em app/views/layouts/application.html.erb

Editar: Minha culpa, esta é na verdade a visualização do crawler: app/views/topics/show.html.erb

2 curtidas