JSON-LD klaut Performance – Verfolger des Pagespeed 100 – Kapitel 1
Bei bold ventures wurde wieder experimentiert – Alles für den Pagespeed. Unser Versuchskaninchen war die Tsunami Club Webseite, die letztes Jahr eine neue Frisur und einen Relaunch verpasst bekam. Das kleine Pagespeed-Experiment hat unser Frontend-Entwickler Raoul ins Leben gerufen. Er hatte es sich zum obersten Ziel gesetzt beim Lighthouse Report die 100 Performance-Punkte zu knacken. Diese erreichte bis dahin “nur” für die mobile Webseiten-Performance zwischen 90 und 94 Punkte. Schuldig war die strukturierte Datenauszeichnung der zahlreichen Tsunami-Veranstaltungen mit JSON-LD. Seine Idee: Wieso nicht einfach das JSON-LD auslagern und über eine eigene Route erreichbar machen?
Aufbau der Tsunami Club Webseite
Die Tsunami Club Webseite ist grob in zwei Seitentypen aufgeteilt: Listen-Seiten und Event-Detailseiten. Auf den Listen-Seiten, zu denen auch die Startseite zählt, sind alle Events, die im Tsunami Club in den nächste Wochen stattfinden, aufgelistet. Alle Events sind mit JSON-LD strukturiert ausgezeichnet. Hier geben wir der Suchmaschine Informationen mit, wie das Event heißt, wann es beginnt und endet, wie viel es kostet und noch einiges mehr. Wenn die Redaktion fleißig war, kamen hier bis zu vierzig Veranstaltungen zusammen, welche alle ausführlich ausgezeichnet wurden. Die Menge an Datenauszeichnungen führte zu einer sehr großen Bytezahl. Auf den Event-Detailseiten wurden lediglich Informationen über das jeweilige Event strukturiert ausgezeichnet.
Warum zeichnen wir die Events überhaupt strukturiert aus?
Mir fallen spontan zwei Gründe ein, weshalb wir schema.org oder auch strukturierte Datenauszeichnungen nutzen.
Mehr Datenverständnis mit strukturierten Daten
Crawlt ein Bot deine Seite, versteht er diese nicht, wie ein Mensch es tun würde. Wie soll ein Bot erkennen, dass es sich bei der Tsunami Club-Seite um eine Seite mit zahlreichen Events handelt, wann diese beginnen, wie teuer sie sind usw. Und da setzt schema.org an. Für (fast) alle Webseiten-Inhalte gibt es eine Auszeichnung, mit der man Google und Co vermitteln kann, wobei es sich bei diesem Content handelt. Und mehr Datenverständnis seitens der Suchmaschine führt zu einem relevanterem Ranking.
Mit Rich Snippets zu einer höheren Klickrate
Zahlreiche Auszeichnungen führen mit etwas Glück zu einem Rich Snippet, auch angereichertes Snippet genannt. Hier wird das Snippet in den Suchergebnissen mit Webseiten-Informationen angereichert, wie Produktpreisen, Bewertungssternen, dem Namen des Autors oder wie bei uns mit den nächsten drei Events. Rich Snippets werden häufig größer in den SERPs dargestellt, weshalb sie dem User ins Auge springen und eine höhere Klickwahrscheinlichkeit haben.
Große Bytezahl durch JSON-LD
Bei der Analyse der Seite stolperten wir über die doch relativ große Bytezahl der Startseite. Durch die Datenauszeichnung wiegt diese nämlich 178 Kilobyte, komprimiert 14 KB. Diese 178 KB muss der Browser bei jedem Seitenaufruf nach dem Entpacken der komprimierten Datei verarbeiten, was sich auf die Ladezeit niederschlägt. Der komprimierte Wert wirkt sich auf die Übertragung aus. Auffällig war, dass knapp 33% der Seite nur aus JSON-LD-Daten bestand, die für den Besucher vollkommen unnütz waren und “nur” für die Suchmaschine geladen wurden.
Im Rahmen einer Recherche fanden wir dann heraus, dass es möglich war der Suchmaschine per <link> Tag das JSON über eine eigene Route bereitstellen zu können, ähnlich wie auch CSS eingebunden wird. Die strukturierte Datenauszeichnung wäre dann unter dem Dateipfad, welchen wir im <head> mitgeben, zu erreichen und nicht mehr im Quellcode.
Also warum nicht einfach mal austesten, ob Google nach wie vor das Rich Snippet in den SERPs anzeigt. Schnell wurde eine eigene Route geschrieben, die das JSON-LD der Startseite produziert und mit dem richtigen Mime Type ausgibt. Unter `<link href=“/jsonld.js“ rel=“alternate“ type=“application/ld+json“ >` war nun für den Crawler das JSON-LD zu finden.
Die große Enttäuschung – Warum Google unser JSON-LD nicht geschluckt hat
Einige Tage später mussten wir uns leider eingestehen, dass die Methode nicht ganz so funktioniert hat wie anfangs gehofft. Das Rich Snippet wurde nicht mehr angezeigt. Nach einer kurzen Recherche war uns auch schnell klar weshalb. Der Grund ist, dass Google zwar das JS-Dokument mit den JSON-LD crawlt, jedoch nicht mit den Daten auf der Startseite, welche ausgezeichnet werden, in Verbindung setzt. Zudem steht in den Google Richtlinien „Strukturierte Daten werden mithilfe von In-Page-Markup auf der Seite codiert, auf die sich die Informationen beziehen.“ Aber halt – wir geben nicht auf.
Nur einen Teil der Daten strukturiert auszeichnen
Zurück ans Zeichenbrett – eine sinnvollere Lösung musste gefunden werden. Statt das komplette JSON-LD aus dem Code zu verbannen, zeichnen wir einfach nicht mehr alle Events aus (nur noch die der nächsten 3 Wochen). Die beste Lösung kann so simpel sein. Der JSON+LD Fußabdruck ist jetzt viel kleiner (149 KB, entspricht einer Einsparung von 19%). Und was sollen wir sagen – 96-100 Performance Punkte (normale Mess-Schwankungen), sowohl Mobil als auch Desktop. Und das allerbeste: Die Suchmaschine weiß wieder wann Raouls Band das nächste Mal im Tsunami Club spielt. Win/Win 🤟
| Startseite mit JSON-LD | Startseite ohne JSON-LD | Startseite mit einem Teil JSON-LD | |
| Unkomprimiert – Einsparung für Rendering | 178 KB | 133 KB (33% kleiner) | 149 KB (19% kleiner) |
| Komprimiert (gzip) – Einsparung für Übertragung | 14 KB | 12 KB (16% kleiner) | 13 KB (7% kleiner) |
Die ganze Geschichte war natürlich dann noch nicht vorbei. Während ich diesen Artikel hier schrieb, ging das neue YouTube-Video-Feature auf der Tsunami-Webseite live. Unter den eingebetteten YouTube-Videos musste die Performance kurz leiden. Wie wir trotz mehrerer YouTube-Videos erneut die 100 Performance-Punkte erreichten, könnt ihr im zweiten Teil der „Verfolger des Pagespeed“-Reihe nachlesen: YouTube-Videos einbinden ohne Performance zu verlieren.
Ich halte JSON-LD für Veranstaltungen als äußerst empfehlenswert und denke, dass der Pagespeed hier zurücktreten darf.
Die Indexierung der Veranstaltungen erfolgt schnell und zuverlässig.
Im Rahmen eines mehrtägigen Events hatten wir alle Veranstaltungen mit JSON-LD ausgezeichnet und waren sofort prominent bei Google platziert und erhielten sogar ein featured Snippet.
Übrigens finde ich das Motto Verfolger des Pagespeed 100 richtig cool. Mit unserem Frontly CMS für Responsive Webdesign hatten wir schon 2017 vollautomatisch die 100 für Mobile und 100 für Desktop erreicht.