Performance Optimierung bei idealo.de

Wie wir dem Online-Preisvergleichsportal idealo.de dabei helfen konnten unter die Top 3 der schnellsten E-Commerce - Webseiten zu kommen.
28.07.2021

Das Online-Vergleichsportal wurde 2000 in Berlin gegründet und hat seinen Sitz noch immer dort. Es beschäftigt um die 1000 Mitarbeiter’innen. Als Portal für die Suche nach Consumer Electronics gestartet, ist das Angebot heute deutlich erweitert. Hier erfährt man, wo welches Produkt online am günstigsten zu erwerben ist. Auch in mehreren europäischen Ländern ist idealo mit einem Portal vertreten. Mit der Flugsuchmaschine flug.idealo.de ist idealo sogar in 15 Ländern vertreten. Auch am Online-Gutscheinportal sparheld.de hält idealo eine Beteiligung. In Tests von Verbrauchermagazinen und Instituten schneidet idealo regelmäßig mit “sehr gut” und als Testsieger ab.

Das Projekt

idealo ist eine der führenden europäischen Shopping- und Vergleichsplattformen mit monatlich rund 30 Millionen Nutzer’innen allein in Deutschland und damit Preisexperte im Onlinehandel. Auf idealo.de können Verbraucher’innen über 400 Millionen Angebote von mehr als 50.000 Händler’innen vergleichen.

Zum Erfolg von E-Commerce Webseiten und Webseiten ganz allgemein tragen Page Performance und Ladezeiten zu einem erheblichen Teil bei. Die Formel ist simpel: Je schneller die Website, desto zufriedener die Nutzer. Je zufriedener die Nutzer, desto wahrscheinlicher ist es, dass sie wieder kommen. Aber nicht nur das Nutzererlebnis profitiert von schnelleren Ladezeiten, auch für die Suchmaschinenoptimierung (SEO) sind Ladezeiten und Performance relevant. So bewertet z.B. Google u.a. die Ladezeiten von Seiten für ihre Suchergebnisse. Schnelle Seiten landen weiter vorne in der Auflistung. Gute Performance resultiert also direkt in mehr Clicks.

Trotz großem Erfolg war idealo in der Vergangenheit in Sachen Performance und Ladezeiten ihrer Seiten, verglichen mit der Konkurrenz, nicht an der Spitze. Um dies zu ändern, haben wir gemeinsam mit idealo Verbesserungspotentiale identifiziert und idealo dabei unterstützt, die wichtigsten Aspekte in kurzer Zeit umzusetzen.

So schnell kann’s gehen

Code-Splitting und optimiertes Laden von CSS- und Browser-spezifischen JavaScript-Bundles machte es unter anderem möglich, die idealo.de - Webseite spürbar schneller zu machen. Innerhalb eines Quartals war idealo unter den Top 3 der schnellsten E-Commerce-Plattformen am Markt.

Die Herausforderung

Bevor die kreuzwerker Teil des Projekts “Performance-Optimierung” geworden sind, machte idealo.de bereits einen hervorragenden Job. Sie hatten klar gesteckte Ziele, Tools wie sitespeed.io und Grafana fürs Monitoring waren etabliert. Auch das regelmäßige Messen der Performance hat gezeigt, dass insbesondere das Backend zu einem großen Teil bereits schnell war, und wenig Verbesserungspotential bot. Unsere Aufgabe war es, vor allem im Frontend neue Impulse und Optimierungsansätze einzubringen.

Die Lösung

idealo und die kreuzwerker konnten die folgenden Punkte identifizieren und gemeinsam beheben:

Die einfachste und doch effektive Optimierung war das Laden von JavaScript “defer”- asynchron zum HTML-Parser.

Ohne “defer” stoppt der HTML-Parser und wartet bis das komplette Skript geladen und ausgeführt wird. Das führt dazu, dass das Rendering der Seite länger dauert. In der Praxis wurden Script-Tags oft am Ende des HTML-Body eingefügt, um das Rendering der Seite optisch zu beschleunigen und die Scripte erst dann zu laden, wenn die Seite nahezu komplett gerendert wurde. Mit dem “defer”-Attribut lässt sich das Script parallel zum Rendering laden. Es wird dann ausgeführt, sobald das HTML komplett gerendert ist. Die Seite ist damit schneller benutzbar.

Gerade auf Produktkategorie-Seiten oder bei Suchergebnissen sind Bilder für Nutzer’innen wichtig. Um Produktbilder möglichst schnell anzuzeigen, analysierten und überdachten wir die Lazy Loading-Funktionalität. Anstatt alle Bilder per Lazy Loading nachzuladen, bauten wir die Seiten dahingehend um, dass nur noch Bilder ausserhalb des Viewports per Lazy Loading nachgeladen werden. Nutzer’innen bekommen so schneller für sie relevanten Inhalt gezeigt. Es macht die Seite gefühlt signifikant schneller.

Ein weitaus größerer Punkt war Code Splitting. idealo lieferte zu Beginn für alle Seiten die gleichen fünf JavaScript-Bundles aus, auch wenn auf einer Seite ggf. nur ein Bruchteil davon gebraucht wurde. Wir passten die Scripte und die vorhandene Webpack-Konfiguration dahingehend an, dass jede Seite ein eigenes JavaScript-Bundle ausgeliefert bekommt. Die seitenspezifischen JavaScript-Bundles sind erheblich kleiner und damit auch schneller geladen und ausgeführt.

Um die JavaScript-Bundles noch kleiner und performanter zu bekommen, führten wir nicht nur seitenspezifische JavaScript-Bundles ein, sondern auch browserspezifische. Wir unterschieden hier zwischen modernen und nicht-modernen Browsern (z.b. IE11). Weil moderne Browser ES6 nativ verstehen, muss für solche weniger Code via Babel kompiliert werden.

Diese Technik verwendeten wir nicht nur für JavaScript, sondern auch für CSS. Idealo hatte bereits zwei CSS-bundles, ein “above-the-fold”- und ein “below-the-fold”-CSS. Wie bei den JavaScript-bundles beinhalteten diese allerdings Stylesheets für alle Seiten. Also führten wir auch hier seitenspezifische “above-the-fold”- und “below-the-fold”-CSS-Bundles ein.

Der Effekt

Dank all dieser Maßnahmen ist es idealo gemeinsam mit kreuzwerker gelungen gewaltige und für die User’innen spürbare Schritte in Sachen Performance und Ladezeiten zu machen. Performance hat für uns kreuzwerker immer hohe Priorität und wir sind deshalb froh, dass wir hier einen Beitrag leisten konnten. idealo ist heute wieder eine der schnellsten E-Commerce-Plattformen am Markt.