Performance optimization for idealo.de

How we helped the online price-comparison portal idealo.de to become one of the top 3 fastest e-commerce websites.
28.07.2021

The online comparison portal was founded in Berlin in 2000 and is still headquartered there. It employs around 1000 people. It started out as a portal for consumer electronics searches, but today it’s offering has expanded considerably. Here you can find out where to buy which product online at the lowest price. idealo also has a portal in several European countries. With the flight search engine flug.idealo.de, idealo is even represented in 15 countries. idealo also holds a stake in the online voucher portal sparheld.de. In tests conducted by consumer magazines and institutes, idealo regularly scores “very good” and is the test winner.

The project

idealo is one of Europe’s leading shopping and comparison platforms with around 30 million users per month in Germany alone, making it a price expert in online retailing. Consumers can use idealo.de to compare over 400 million offers from more than 50,000 retailers.

Page performance and loading times play a significant role in the success of e-commerce websites and websites in general. The formula is simple: the faster the website, the happier the users. And the happier the users, the more likely they are to come back. But it’s not just the user experience that benefits from faster loading times; loading times and performance are also relevant for search engine optimization (SEO). Among other things, Google evaluates the loading times of pages for their search results. Fast pages show up higher up in the listing. Good performance therefore results directly in more clicks.

Despite being very successful, idealo was not at the top of the game in terms of the performance and loading times of their pages in comparison to the competition. To change this, we worked with idealo to identify areas for improvement and supported them in quickly implementing the most important aspects.

Faster than you think

Code splitting and optimized loading of CSS and browser-specific JavaScript bundles, among other things, made it possible to make the idealo.de website noticeably faster. Within just one quarter, idealo was among the top 3 fastest e-commerce platforms on the market.

The challenge

Before kreuzwerker became part of the “performance optimization” project, idealo.de was already doing an excellent job. They had set clear goals; having established tools such as sitespeed.io and Grafana for monitoring. Regular performance measurements also showed that the backend in particular was already fast to a great extent, and had only little potential for improvement. Our task was to introduce new impulses and optimization approaches, especially in the frontend.

The solution

idealo and kreuzwerker were able to identify the following issues and fix them together:

The simplest, yet most effective optimization was to load JavaScript “defer”- asynchronously to the HTML parser.

Without “defer”, the HTML parser stops and waits until the complete script is loaded and executed. This causes the page to take longer to render. In practice, script tags were often inserted at the end of the HTML body to visually speed up the rendering of the page and not load the scripts until the page was almost completely rendered. The “defer” attribute allows the script to be loaded simultaneously with the rendering. It will be executed as soon as the HTML is completely rendered. This makes the page usable faster.

Especially on product category pages or in search results, images are important for users. To display product images as quickly as possible, we analyzed and rethought the lazy loading functionality. Instead of “lazy loading” all images, we rebuilt the pages so that only images outside the viewport are lazy loaded. This way, users are shown content that is relevant to them more quickly. It makes the page feel significantly faster.

A much bigger issue was code splitting. idealo initially delivered the same five JavaScript bundles for all pages, even if only a fraction of them were needed on one page. We adapted the scripts and the existing Webpack configuration so that each page gets its own JavaScript bundle delivered. The page-specific JavaScript bundles are significantly smaller and therefore load and execute faster.

To get the JavaScript bundles even smaller and more performant, we introduced not only page-specific JavaScript bundles, but also browser-specific ones. We distinguished between modern and non-modern browsers (e.g. IE11). Because modern browsers understand ES6 natively, less code needs to be compiled via Babel for them.

We used this technique not only for JavaScript, but also for CSS. idealo already had two CSS bundles, an “above-the-fold” and a "below-the-fold” CSS. However, as with the JavaScript bundles, these included style sheets for all pages. So, we introduced page-specific “above-the-fold” and “below-the-fold” CSS bundles.

The result

Thanks to all these measures, idealo, together with kreuzwerker, has succeeded in taking huge steps in terms of performance and loading times that are noticeable to users. Performance has always been a high priority for us at kreuzwerker, and that’s why we are pleased that we were able to make a contribution here. idealo is now once again one of the fastest e-commerce platforms on the market.