GoogleSearchは画像をどのようにプレレンダリングしますか？

Question

Googleで検索していたときに私が見たことがないことに気付きました。それは画像に関係する。

あなたが見ることができるように、画像がロードされているが、Googleは画像の寸法を有するブランクコンテナ、各画像の平均色に対応する背景色を表示します。

これはこのように見えますが、リンク要素にはbg色を含むインラインスタイルが含まれています。

<a style="height: 56px; margin: 0px; width: 59px; left: 0px; background: rgb(109, 128, 70);"></a> 

しかし、どうやってそれを手に入れますか？クライアントは、画像がロードされる前の平均カラーをどのように知っていますか？

Answer 1

Googleは、画像があなたに表示される前に何か考えていると思います。検索結果に表示さえするには、画像をキーワードや情報に関する情報とともにデータベースの形式にして、人々が検索できるようにする必要があります。 Googlebotクローラが画像を検出すると、画像の知識をGoogleサーバに登録する必要があります。サーバー（またはおそらくボット）がイメージを分析して平均的な色を取得し、このデータを他の関連するイメージ情報とともに保存するのはおそらくそれほど難しいことではありません。

Googleが平均画像の色を知っている場合、残りのHTMLと一緒にその色をdivの背景として送信することができます。これは、スタイルが「ブロッキング」（スタイルが処理され、適用されるまでページをレンダリングできないこと）として知られているため、CSS/HTMLの残りの部分と同時にカラーがロードされることを意味します。ただし、イメージはブロックされません（単一のスタイルよりも読み込みに時間がかかる）ので、すべてのイメージがダウンロードされる前にページが表示されます。画像間のスペースが完全にダウンロードされ（ページに表示される）、プレースホルダとして色が表示されます。イメージがクライアントによってダウンロードされると、イメージは適切なスペースに配置されます。

これは情報に基づいた推測に過ぎませんが、Googleエンジニアが来なければ100％の正確な回答は得られませんが、それほど遠くないとは思えません。

ここではクロムでネットワークパネルのスクリーンショットです。最初のスタイルとHTMLが処理された後、ページ内の変更を引き起こすレンダリング要求/応答、および青色のすべての画像が赤で表示されます。黒い線は、ページがロードされてから画像がすべてダウンロードされたときのギャップを示しています。