CSS performance tuning

Prerequisite Knowledge

* what is a modern CSS;
* what are the basic principles of BEM;
* how browsers fetch and process CSS;
* what are the basic CSS optimizations;
* what HTTP/2 and Service Workers promise us to deliver

Description

CSS optimizations are a complex topic, given the variety of browsers used in today’s web. To deliver an optimal content to all devices, we first need to understand what optimization angles are available and how to make the best use of them.

First we’ll dive into the fascinating world of AST trees, browser (in)compatibility, vendor extensions, and advanced optimizations that clean-css provides, like:

Content restructuring

Media query merging

BEM content optimizations

Using browser specific features.

However, there is more to this story as two emerging technologies, HTTP/2 and Service Workers, will play a huge role in changing the reasons we perform these optimizations. In the transition period we will need to support old and new clients at the same time, which will change the way we optimize CSS and force us to unlearn techniques we have been using for years now.

In the second part of the presentation we’ll see how clean-css and other tools can help us transition to that modern and richer Web.

Jakub Pawlowicz

Independent Consultant

Jakub Pawlowicz is a web developer, open source contributor, and author of clean-css, one of the most popular CSS optimization tools. He has spent the last 12 years working as a front- and back-end developer, for startups and big companies alike. He has been passionate about performance tuning from the very beginning of his adventure with the web.