web-dev-qa-db-ja.com

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

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

最近、Googleはページスピードスコアに影響する他の何かを追加しましたが、ページスピードで89％しか得られず、この提案を受け取りました。

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

これを修正するための提案は、すべての.cssおよび.jsファイルをトローリングし、それらの一部を分離し、それらを私のhtmlにインラインで追加することを含むようです。これにより、HTMLからできるだけ多くのJSとCSSを排除する必要があるという印象を受けたため、混乱が生じています。

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

javascripthtmlcssgoogle-pagespeed
131
Glipt

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

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

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

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

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

重要なのは、ユーザーに最初の1秒以内に何かをさせることです。 ATFコンテンツのCSSをHTMLに直接配置する背景には、モバイルデータのパフォーマンスに関する調査が反映されており、CSSが存在しないと、1秒以内にロードされるのに十分な時間がかかりません。

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

112
Joshua Coady

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

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

2
NoWomenNoCry