Performance Optimierung bei idealo.de

Idealo ist ein Online-Preisvergleichsportal mit Unternehmenssitz in Berlin-Mitte.

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.

Bevor die PCG Teil des Projekts “Performance-Optimierung” geworden ist, 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.

idealo und die PCG 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.

Dank all dieser Maßnahmen ist es idealo gemeinsam mit PCG gelungen gewaltige und für die User’innen spürbare Schritte in Sachen Performance und Ladezeiten zu machen. Performance hat für uns PCG 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.

Die Public Cloud Group (PCG) unterstützt Unternehmen bei ihrer digitalen Transformation durch den Einsatz von Public Cloud-Lösungen.

Mit einem Portfolio, das darauf ausgerichtet ist, Unternehmen aller Größe auf ihrer Cloud Journey zu begleiten, sowie der Kompetenz von zahlreichen zertifizierten Expert:innen, mit denen Kunden und Partner gerne zusammenarbeiten, positioniert sich PCG als verlässlicher und vertrauenswürdiger Partner der Hyperscaler.

Als erfahrener Partner der drei relevanten Hyperscaler (Amazon Web Services (AWS), Google Cloud und Microsoft Cloud) hält PCG die höchsten Auszeichnungen der jeweiligen Anbieter und berät Sie als unsere Kunden in Ihrer Cloud Journey unabhängig.