Omoda already had a basic but effective font loading strategy: they preloaded fonts and made CSS render blocking. This way, the browser was prevented from rendering anything on the screen. As a result, the fonts were already there when the CSS was downloaded.
However, this is also delaying the First Meaningful Paint metric, meaning that early user engagement was delayed, which could impact the bounce rate on first visit.
Although the A/B code snippet is deliberately blocking rendering for a maximum of 1.5 seconds, their was still room for improvement, with noticeable outcomes when it comes to First Meaningful Paint:
- on 4G desktop, tested from Amsterdam
1.6 seconds versus 2.4 seconds (improvement of 29%);
- on 3G desktop, tested from Amsterdam
2.4 seconds versus 4.4 seconds (improvement of 45%).
- on 4G Moto G4, tested from Dulles
2.7 seconds versus 5.0 seconds (improvement of 46%).
Build tools and CSS reduction
While already exploring their CSS creating these Proof of Concepts, I came to the conclusion that there was a lot of repetitive CSS code. This is probably due to the use of a build tool, where there were a lot of redundant font-family declarations, as well as repetitive declarations within media queries.
By only addressing redundant CSS, I managed to:
- reduce the size of the global.css by 22 kilobytes (uncompressed), being 8%;
- reduce the size of the product-detail.css by 30 kilobytes (uncompressed), being 49%.
Lesson learned: by not only focussing on developer experience or build tool, it can be quite easy to reduce kilobytes and improve performance.
Reducing requests in HTTP/2 era
Although just being a Proof of Concept, I also picked up other improvements. By only addressing the language picker and thus flags, I managed to:
- reduce the need amount of request from 6 (flags), to zero (by using CSS instead of SVG images, to visualize the flags);
- reduce the amount of needed bytes from 2662 to 586 bytes (78% reduction).
This seems like a small improvement considering the presence of HTTP/2, concatenation still does have it’s place due to compression ratios of CSS files.