Boosting Web Performance with Linaria: A CSS-in-JS Solution

As web applications grow more complex, styling has become a critical component in delivering robust user experiences. While CSS-in-JS libraries have revolutionized how we manage styling within JavaScript frameworks like React, they often come with performance trade-offs. Linaria has emerged as a standout option for developers looking for a zero-runtime CSS-in-JS solution. By extracting CSS at build time, Linaria addresses performance bottlenecks, particularly for large-scale applications.

Contents show

In this blog, we’ll dive into why Linaria was chosen by Airbnb, how it compares to other popular CSS-in-JS libraries like Styled Components, Emotion, and Treat, and explore how its static CSS extraction offers a performance edge for modern web applications.

From Sass to CSS-in-JS: Airbnb’s Journey to Linaria

Back in 2016, Airbnb’s web frontend relied on Sass and a combination of Sprockets and Browserify. As the application scaled, maintaining styles across different teams became a significant challenge. Developers faced frequent bugs, like missing or conflicting stylesheets, and rarely removed outdated CSS, causing the stylesheets to grow uncontrollably.

To improve this situation, Airbnb adopted CSS-in-JS using Aphrodite, which allowed them to co-locate styles with React components. However, as the app grew, Aphrodite introduced performance trade-offs due to its runtime styling. React component mounts were slower by 10-20%, and the increased bundle size made rendering less efficient. This prompted Airbnb’s engineering teams to evaluate alternatives, leading them to Linaria, a static CSS extraction library that does not introduce runtime overhead.

Why Linaria?

Linaria distinguishes itself by extracting CSS at build time rather than runtime, which is a key factor that set it apart for Airbnb. Here’s why:

Zero-runtime CSS extraction: By moving CSS generation to the build step, Linaria avoids the runtime performance hit common in other CSS-in-JS libraries.
Familiar CSS syntax: Linaria uses tagged template literals, allowing developers to write traditional CSS within JavaScript files, offering a familiar experience without sacrificing performance.
Automatic removal of unused styles: Linaria’s static CSS extraction also means that it can automatically eliminate unused styles at build time, keeping the final CSS files lean.

The decision to migrate to Linaria was driven by these benefits, improving both developer experience and performance across Airbnb’s web app.

How Linaria Stacks Up: Comparisons with Other CSS-in-JS Libraries

To give you a better understanding of Linaria’s strengths, here’s how it compares with other popular CSS-in-JS libraries:

1. Linaria vs. Styled Components

Runtime Overhead:
- Styled Components generates CSS dynamically at runtime, introducing bundle size and CPU overhead.
- Linaria extracts CSS at build time, resulting in no runtime overhead and smaller bundles.
Developer Experience:
- Styled Components offers a developer-friendly API but suffers from performance issues at scale.
- Linaria offers similar API ergonomics with better performance due to its static extraction.

2. Linaria vs. Emotion

Performance:
- Emotion still involves runtime generation of styles, though it offers some optimizations with tools like babel-plugin-emotion.
- In Airbnb’s benchmarks, Linaria outperformed Emotion, improving Total Blocking Time (TBT) by 22%.
Flexibility:
- Emotion provides both runtime and static options, offering flexibility but with performance trade-offs.
- Linaria focuses exclusively on build-time extraction, ensuring superior performance for complex applications.

3. Linaria vs. Treat

Static Extraction:
- Treat, like Linaria, extracts CSS at build time but still retains some runtime overhead.
- Linaria is a true zero-runtime solution, making it the preferred option for performance-conscious teams.
Developer Ergonomics:
- Treat uses a functional API for styles, which some developers find less intuitive than traditional CSS.
- Linaria supports CSS syntax via template literals, making it easier for developers to adopt without a learning curve.

Performance Benefits of Linaria at Airbnb

After implementing Linaria, Airbnb saw significant improvements in page performance. In an A/B test, converting 10% of the homepage components to Linaria resulted in a:

0.26% improvement in Page Performance Score,
0.54% improvement in Time to First Contentful Paint (TTFCP), and
1.6% improvement in Total Blocking Time (TBT).

While these improvements may seem modest, they demonstrate the scalability of Linaria’s performance benefits. As Airbnb migrates more components, these improvements are expected to scale linearly, potentially leading to over 16% improvement in TBT once the full migration is complete.

Key Features of Linaria

Zero-runtime CSS Extraction: Unlike runtime-based CSS-in-JS libraries, Linaria compiles CSS at build time, ensuring no performance hit during rendering.
Familiar CSS Syntax: Linaria uses tagged template literals, allowing developers to write CSS in their preferred syntax within JavaScript, offering both performance and ease of use.
Automatic Removal of Unused Styles: Linaria’s build-time CSS extraction ensures that unused styles are automatically purged, keeping the stylesheets lean and efficient.
Critical CSS Injection for Server-side Rendering (SSR): Linaria supports injecting critical CSS, ensuring optimal performance during server-side rendering, which is crucial for SEO and page speed optimization.

Unique Real-World Use Cases of Linaria

Airbnb: The large-scale migration from Aphrodite to Linaria at Airbnb reduced TBT by up to 1.6% with just 10% of the homepage migrated, signaling significant improvements as migration continues.
Khan Academy: Linaria has been adopted by other major platforms, such as Khan Academy, to simplify CSS management without runtime performance impacts.

Conclusion

Linaria provides a modern, zero-runtime alternative to traditional CSS-in-JS libraries, combining static CSS extraction, familiar CSS syntax, and significant performance improvements. Whether you’re building a small-scale application or scaling for millions of users, Linaria offers the flexibility, efficiency, and developer experience needed to succeed in the fast-paced world of web development.

If you’re considering moving from runtime-heavy CSS-in-JS libraries, Linaria offers the best of both worlds: the performance of static CSS and the developer convenience of co-located styles in JavaScript.

Final Thoughts: Should You Choose Linaria?

Linaria’s zero-runtime approach makes it an excellent choice for teams looking to improve both performance and developer experience. If your application is struggling with slow render times or bloated bundles, Linaria offers a powerful, scalable solution for modern web development. Whether you’re building real-time apps, complex dashboards, or e-commerce platforms, Linaria’s ability to compile CSS at build time ensures you stay ahead in performance without compromising on developer flexibility.