Performance optimization for idealo.de

Idealo is an online price comparison portal based in Berlin-Mitte, Germany.

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.

Before PCG 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.

idealo and PCG 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.

Thanks to all these measures, idealo, together with PCG, 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 PCG, 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.

Public Cloud Group (PCG) supports companies in their digital transformation through the use of public cloud solutions.

With a product portfolio designed to accompany organisations of all sizes in their cloud journey and competence that is a synonym for highly qualified staff that clients and partners like to work with, PCG is positioned as a reliable and trustworthy partner for the hyperscalers, relevant and with repeatedly validated competence and credibility.

We have the highest partnership status with the three relevant hyperscalers: Amazon Web Services (AWS), Google, and Microsoft. As experienced providers, we advise our customers independently with cloud implementation, application development, and managed services.