Performance optimization for

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

idealo is the number 1 price comparison platform in Germany, also operating in France, the UK, Italy, Austria and Spain. Founded in 2000, the company has been part of Axel Springer SE since 2006. Over 1,000 employees from 60 nations work on the future of online shopping in the heart of Berlin. 530 million offers including on shopping, air travel and hotel accommodation are listed by 50,000 retailers on the price comparison platforms. The information is accessed 76 million times per month.

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 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 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, was already doing an excellent job. They had set clear goals; having established tools such as 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.