web-dev-qa-db-ja.com

ページの上部に大きな画像を配置すると、ページ速度の洞察に不満が生じる

基本的に、人々に人に投票するよう求めるサイトであるサイトを作成しました。最初のページには、そのサイトの目的である人の写真がほとんど表示されています。ほとんどのテキストは下にあり、それを取得するにはスクロールが必要です。

その後、Googleは次のように不満を述べます。

表示コンテンツの優先順位付け

スクロールせずに見えるコンテンツをレンダリングするには、ページに追加のネットワークラウンドトリップが必要です。最高のパフォーマンスを得るには、スクロールせずに見えるコンテンツのレンダリングに必要なHTMLの量を減らします。

HTMLレスポンス全体では、スクロールせずに見えるコンテンツをレンダリングするには不十分でした。これは通常、HTML解析後に読み込まれる追加リソースがスクロールせずに見えるコンテンツのレンダリングに必要であることを示しています。 HTMLレスポンスに直接含めることにより、スクロールせずに見える範囲にレンダリングするために必要な可視コンテンツに優先順位を付けます。

完全なHTMLレスポンスでは、最終的なスクロールせずに見えるコンテンツの約60%しかレンダリングできませんでした

Googleのページ速度の洞察でサイトに関するこのエラーを表示しないようにするために、HTTPヘッダーまたはHTMLに追加できるものはありますか?

結局のところ、訪問者は、現在投票ページへのリンクおよび投票に関する指示のリンクであるサイトで他のアクションを実行する前に、その人がどのように見えるかを知りたいと思うでしょう。画像の上にある唯一のものである大きなタイトル自体のメッセージははっきりとしています。

4
Mike

このURLで確認できる唯一の問題は、上部の大きな画像に幅と高さの属性がないことです。これは、HTMLページを取得した後、ブラウザは画像がダウンロードされるのを待ってからページを再レンダリングする必要があることを意味します。ファイル全体ができるまで画像にどのくらいのスペースを許可するかを知る方法がないためです。 Insightsが意味するのは、スクロールせずに見えるコンテンツを表示するために「追加のリソース」を待たなければならないことです。 (これをバックアップしているように見える結果で「スクリーンショットを見る」オプションをクリックした場合。)

そのページには(画像を除いて)外部にリンクされた他のリソースがないので、それが修正されない場合、おそらくできることはあまりありません。

ひとつまみの塩で洞察レポートを取ります。あなたの質問で、この「エラー」を修正したいと言いましたが、Insightsはエラーを出さず、提案をします。このようなツールは、ページの構築に使用されるコードのみを分析でき、イメージがページのメインsubjectであることを意味的に知ることはできません。そのため、このようなものがGoogleのSEOページ速度アルゴリズムに組み込まれた要因の1つであった場合、私は非常に驚くでしょう(そして、たとえそうであったとしても、このサイトは非常に高速に読み込まれるため、影響を受けません)。

2
Tim Fountain