初期ページ読み込み時にJavaScriptを遅延させ、一時的なコンテンツを表示する

これはおそらく、Chrome Speed - Largest Contentful Paint Bug Fixes in M88 で既にブロックされているでしょう。

ビューポート全体を占める画像は、背景画像と視覚的に同等ですが、最大のコンテンツ描画(LCP)とはみなされなくなりました。


良い点です。Largest Contentful Paint (LCP)  |  Articles  |  web.dev を参照してください。

テキスト要素の場合、テキストノードのサイズのみが考慮されます(すべてのテキストノードを囲む最小の長方形)。

すべての要素について、CSSで適用されたマージン、パディング、またはボーダーは考慮されません。

  • そのため、静的なテキストノードはEmberJsのテキストノードとまったく同じサイズでレンダリングされる必要があります。
  • line-height を増やすことで、さらにわずかに大きくすることもできます。
    たとえば、テキストノードの幅が一致しない場合、さまざまな改行によって導入される多くの幾何学的なケースがあり、静的なテキストノードがEmberJsのものより小さくなる可能性があります。

参照:LCPの例


実際には、トピックページの投稿を noscript でレンダリングしました。CSSクラスは実際のクラスとわずかに一致しているため、見た目は同じです。

参照:app/views/layouts/application.html.erb の変更点

編集:私の間違いです。これは実際にはクローラービューです:app/views/topics/show.html.erb

「いいね!」 2