how to improve the performance of a odoo website with font rendering?

Benjamin Bachmann

Improving the Page Performance with a Font Loader

Why a Fontloader? After images, fonts are normally the largest assets in your web page. The Ubuntu font for example adds almost 250Kb to the page weight, it might not seem much but when you have a slow mobile connections, could be a lot of time until the customer finally sees your content. Chrome, IE, Safari and Opera leave a blank space while the font is loaded, meaning the page is unusable and unreadable. Firefox and older versions of Opera show text in a fallback font then switch — known as a Flash of Unstyled Text (FOUT). Either of this options are ideal.

Our goal was it to integrate a Fontloader in the odoo core to improve the loading time of the themes from odoo. It could be easily adapted to other themes with heavier fonts. As you can see on our Website.

After adjusting the module, we tried it on our website, the Fontloader is activated on Bloopark.de

To make it more graffic, you can see some images of loading times from tests we made on our website:


   RENDERING WITHOUT FONTLOADER 


As Without a fontloader the fonts are loaded in the css files, like they usually are as part of the stylesheets. The user has to wait untill the stylesheet loads, the 2 green loding bars show how much time this takes.

  Example Bloopark Website:


Website is shown after:  856 ms. 


RENDERING WITH FONTLOADER 

Fonts are loaded through the fontloader, meaning via Javascript. The website is not dependent from the stylesheets to show its content and the website is displayed much faster. This is a huge advantage, specially for mobile users, where loading times are slower and users more impacient.

     Example Bloopark Website:

Website is shown after:  508 ms.

odoo up 40% FASTER LOADING SPEED  

Through the Fontloader the Bloopark website is displayed 40% faster. Not bad.

 

The Fontloader decreases by 40% the rendering time. This is significant, considering we are just talking about font styles. When you are talking about a site with a lot of content an some beatiful but heavy stylings, those seconds are gold worth. Now a days, users will not wait more than a few seconds, bounce rates are a hard battle.

If you are interested in the integration, check the GITHUB for documentation and more technical info. 

About Benjamin Bachmann

The Mac expert and code maniac/ Recently started his path into the python and Odoo world/ Likes his coffee cold, but we love him anyway.