Wie rendert GoogleSearch Bilder vor?

Question

Ich habe etwas bemerkt, das ich vorher bei Google-Suchen nicht gesehen habe. Es betrifft Bilder.

Wie Sie sehen können, während die Bilder geladen werden, zeigt Google einen leeren Behälter mit Bildabmessungen und eine Hintergrundfarbe, die auf die durchschnittliche Farbe jedes Bild entspricht.

Jetzt sieht das so aus, das enthaltende Link-Element hat inlined Stile einschließlich bg Farbe.

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

Aber wie bekommen sie es? Wie würde der Kunde die durchschnittliche Farbe eines Bildes wissen, bevor es geladen wird?

Answer 1

Google haben Sie eine Vorstellung davon, was das Bild ist, bevor sie es Ihnen zeigen - Vielleicht sogar eine Kopie. Um sogar in den Suchergebnissen auftauchen zu können, muss das Bild in irgendeiner Art von Datenbank zusammen mit Schlüsselwörtern und Informationen über das Bild sein, damit die Leute danach suchen können. Wenn der Googlebot-Crawler das Image erkennt, muss er sein Wissen über das Image auf den Google-Servern registrieren. Es ist wahrscheinlich nicht zu schwer für den Server (oder vielleicht den Bot), das Bild zu analysieren und eine durchschnittliche Farbe zu erhalten und diese Daten zusammen mit den anderen relevanten Bildinformationen zu speichern.

Also, wenn Google die durchschnittliche Bildfarbe kennt, ist es möglich, diese Farbe als Hintergrund des div mit dem Rest des HTML zu senden. Dies bedeutet, dass die Farbe zur gleichen Zeit wie der Rest des CSS/HTML geladen wird, da der Stil als "Blockieren" bekannt ist (Die Seite kann erst gerendert werden, wenn der Stil verarbeitet und angewendet wurde). Bilder blockieren jedoch nicht (und laden viel länger als ein einzelner Stil), sodass die Seite angezeigt wird, bevor alle Bilder heruntergeladen wurden. In diesem Bereich zwischen dem Bild, das vollständig heruntergeladen (und auf der Seite angezeigt) wird, wird die Farbe als Platzhalter angezeigt. Wenn das Bild vom Client heruntergeladen wurde, wird es in den dafür vorgesehenen Bereich gestellt.

Denken Sie daran, dies ist nur eine fundierte Vermutung, aber wenn ein Google-Ingenieur kommt nicht Sie werden wahrscheinlich eine 100% genaue Antwort erhalten, aber ich denke, dass es nicht weit davon entfernt sein wird.

Hier ist ein Screenshot von dem Netzwerk-Panel in Chrom. Sie können die Rendering-Anfragen/Antworten, die eine Änderung der Seite verursachen, in rot und in blau alle Bilder sehen, die geladen werden, nachdem die anfänglichen Stile und HTML verarbeitet wurden. Die schwarze Linie zeigt die Lücke zwischen dem Laden der Seite und dem Herunterladen der Bilder.