Optimus

Find answers, guides, and tutorials to optimize your images.

Optimizing the Optimus Website for Performance

Updated on March 1, 2023

Product websites in the form of one page website are currently highly popular: thanks to the scrolling architecture, the consumer can access the information he is looking for faster, and there are no annoying jumps between the different subpages. With an enormous amount of information and the degree of design possibilities, the "weight" of a one page website also increases - hitting double-digit MB numbers is not a rarity. But is it possible to have a Responsive one page website that also performs well?

The following overview describes how the Optimus website was designed with performance in mind, and what performance-enhancing techniques were used.

  1. Elements in the above-the-fold area (HTML, CSS and JS if absolutely necessary) of a website should "fit" into the first 14 KB of the response (server return). That's why CSS values in the Optimus website are divided into two files: style sheets for the visible area (Critical CSS) are tied into the Head while the other definitions are referenced in the footer.
  2. Since the two CSS files have very small sizes, both resources are displayed inline in the HTML code - this method reduces requests to the server. The same goes for Vanilla JS.
  3. Bundling of icons in a web font file in order to reduce server requests to a minimum (e.g. https://icomoon.io/app/).
  4. Used web fonts originate from Google Fonts. For data privacy reasons and in order to improve control (caching header, hosting, etc.) the fonts were processed with Zopfli and saved in the WOFF and WOFF2 formats. The same goes for the web font with icons (see previous point).
  5. Lazy loading for all graphic elements. Only reload images when necessary. The Optimus mascot is only loaded in break points where it is actually displayed, too. We don't load just to hide!
  6. SVG images that are used on the website are manually (since quality assurance is necessary) reduced to a minimum using the SVG editor.
  7. The following optimization procedures are used on HTML, CSS and JS with Gulp:
    1. UnCSS (removal of unnecessary CSS definitions that have been generated for example by grid frameworks)
    2. Minimizing CSS and JS
    3. Inline incorporation of CSS and JS in the markup
    4. Zopfli compression of the HTML source code
  8. As web server we used an Nginx version geared towards speed - with TLS/SSL and activated SPDY.
  9. Tools that are used during the optimization phase:
KeyCDN uses cookies to make its website easier to use. Learn more