Speed Up the Web with Universal CSS Rendering

Abstract

Achieving fast page load and upholding conversion rates requires continuous effort for web applications ever-growing in size and complexity. Consequently, developing new methods for optimizing and speeding up page load is a constant effort of the web community. Existing methods aim to reduce the amount of render-blocking code in the render pipeline to improve the time until render. However, a recent study revealed a tremendous optimization potential remaining, especially for CSS, since only $\approx$ 15% of render-blocking CSS code is used until render [12]. In this paper, we present Essential, an improved serverside CSS renderer. It is based on the popular Critical package [10], which increases the code efficiency and prepares websites by extracting render-critical elements “Above-the-Fold" and delaying the remaining code asynchronously. Essential renders the CSS of the whole page, as well as eliminates code duplicates to optimize the rendered result. Our evaluation results show that Essential  more than triples code efficiency and decreases the transferred render-critical CSS by 65.9% compared to the original while maintaining a high visual similarity and matching or surpassing the performance of Critical.