When the web developers at LinkedIn were considering the site’s presence in markets with more limited bandwidth allowances, they realized every bit of data used counted. While there are plenty of factors to site performance, senior staff engineer Chris Eppstein and his team focused on streamlining CSS stylesheets, resulting in this week’s highlighted GitHub project, CSSBlocks, which aims to easily produce high-performance stylesheets by analyzing and rewriting your stylesheets and templates. And by all measure, it was a huge success, according to LinkedIn at least.
When Eppstein’s team analyzed the fastest websites in India, they found that a reasonable goal for the data overhead incurred by a compressed CSS stylesheet on first pageview was around 10KB. With LinkedIn’s clocking in at 154KB, they considered the 10KB goal optimistic.
“After re-building a fully-functional version of the homepage with CSS Blocks, we were able to serve the same page with just 38KB of CSS,” Eppstein wrote in the release blog post. “To be clear: that’s the uncompressed size. After compression, that CSS file weighed in at less than 9KB! And, because CSS Blocks enables code-splitting, we were able to achieve a 94% reduction of our compressed CSS delivered for initial render.”
Through a process Eppstein calls “static analysis,” CSS Blocks can determine the precise conditions under which certain styles will be used in each element and cuts down on your code using stylesheet performance techniques like code-splitting, critical inlining and tree shaking.
But Eppstein writes that CSS Blocks is useful even if stylesheet optimization isn’t a priority.
“Setting performance aside, CSS Blocks is a fantastic developer experience that will make the engineers using it happier and more productive,” Eppstein wrote. “We think it’s worth adopting even without the performance features. It also just happens to help you write CSS that starts tiny and stays tiny as you scale your product and the size of your team.”
While the OptiCSS-driven CSS streamlining in CSS Blocks is already very effective, there’s still plenty of work to be done.
“We still need to produce some tools and remaining features that we think are needed to scale up from supporting a small team of engineers to supporting several hundred front-end engineers across various teams and applications, Eppstein wrote. “But from this point forward, we want to invite the community to be part of that maturation process so that we do not optimize for LinkedIn’s own needs and use cases at the expense of others.”
Top 5 projects trending on GitHub this week:
- Architect awesome: A backend architect technical map
- ReLaXed: A project that enables users to create PDF documents using HTML or Pug
- DayJS: A minimalist JavaScript library for modern browsers
- Tui.calendar: A JavaScript calendar
- PureCSS Francine: Art created with CSS and HTML
