Google Pagespeedの「スクロールせずに見えるコンテンツ」とは何ですか？

最近まで、私のサイト（www.heatexchangers.ca）はGoogle Page Speedで98％のスコアを付けていました。Webフォントのクエリ文字列など、私が何もできないことがいくつかありました。これが私にできることすべてを表していたので、私はこれにとても満足していました。

最近、Googleはページ速度のスコアに影響を与える何か他のものを追加しました、そして私は今ページ速度で89％だけを得て、この提案を得ます：

• スクロールせずに見えるコンテンツで、外部のレンダリングをブロックするJavaScriptとCSSを排除します。

これを修正するための提案には、すべての.cssファイルと.jsファイルを調べ、それらの一部を分離して、それらをhtmlにインラインで追加することが含まれるようです。私はできるだけ多くのJSとCSSをHTMLから除外する必要があるという印象を受けていたので、これは私にいくつかの混乱を引き起こしています。

「フォールドの上」のコンテンツとは正確には何ですか？フォント、背景色などのいくつかのスタイルの場合。そうすれば、インラインに含めるにはそれほど大きな取引ではないかもしれません。これが正確に何であるかのリストを見つけることができませんでした。

これは、Googleが最近モバイル化したウェブをより適切に反映するようにページ速度ツールを変更したためです。モバイルデータネットワークは、有線やWi-Fiとは異なるパフォーマンス特性を持っているため、最適化するにはさまざまなことを行う必要があります。

スクロールせずに見える範囲（ATF）は、単に最初の画面に相当するものであり、スクロールする必要がないものはすべて表示されます。明らかに、これはデバイスとその向きによって異なるため、一般化して、いくつかの実用的な共通オプションを見つける必要があるかもしれません。スマートフォン向け、タブレット向け、大型デスクトップ向けなどです。

彼らが話しているCSSに関しては、彼らは本当に、ATFで表示されるコンテンツを完全にスタイルするために必要なすべてのCSSを意図しています。ATFコンテンツの読み込み時間を決定するために、最終バージョンのスクリーンショットを取り、読み込み時にページと視覚的に比較します。十分に似ている場合は、ATFコンテンツの場所を検討します。が読み込まれます。

これは、このテーマに関するGoogleのビデオプレゼンテーションです。

http://www.youtube.com/watch?v=YV1nKLWoARQ

最初の1秒間にユーザーに何かをさせることに重点を置いています。ATFコンテンツのCSSを直接​​HTMLに配置する理由は、モバイルデータのパフォーマンスに関する調査を反映しており、CSSが存在しない場合、CSSが1秒以内に読み込まれることがありません。

また、これらの一部を自動化できるツールへのリンクも提供します。私はそれらとYMMVを試していません。

グーグルページの洞察は、スクロールせずに見える範囲のコンテンツを参照しているCSSの何％が遅すぎてロードされ、ページがより早くレンダリングされた可能性があるかを明確に示します。緑の結果を達成するためにcssの一部を移動するよりも。私はあなたのためにそれをすることができます：goo.gl/GsRxNc

「スクロールせずに見える範囲」を説明するGoogleからのリンク https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

スクロールせずに見えるコンテンツとは、ページが最初に読み込まれたときにブラウザウィンドウに表示されるWebページの部分です。Googleは、メインCSSファイルから抽出され、headタグに挿入されたインラインCSSを確認して、最初に表示されるものすべてを最初にロードできるようにしたいと考えています。

ソース-https://www.c2experience.com/blog/passing-googles-abovethefold-css#: ~ :text = Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first。

分析やトラッキングコードなどのレンダリングをブロックするjsを参照しているため、ユーザーが画面上にサイトを表示するとロードされるため、フッターに「他のものより先にロードする」スクリプトを配置することをお勧めします。