Chapter 8. High-performance stylesheets

 

This chapter covers

  • Stylesheet concatenation
  • Stylesheet and asset compression
  • Strategies for reducing and parallelizing image requests
  • Selector performance and optimization strategies

In the last chapter, you learned how stylesheets, due to their heavy reliance on external assets, can become a serious maintenance burden. But even worse, stylesheets can be the source of myriad client-side performance issues and the dreaded “mixed content” warning.

But by following the best practices of client-side performance, you may be able to shave seconds off of your page load times. This can have a significant impact on your search engine rankings, user engagement, and goal conversion metrics. There are whole books devoted to this subject, but in this chapter we’ll outline the unique features of Sass and Compass that enable you to quickly implement many web performance best practices.

8.1. Measuring client-side performance

8.2. Avoiding HTTP requests with server-side @import

8.3. Reducing transfer time with compression

8.4. Speeding up page loads with asset hosts

8.5. Inline data URIs

8.6. Selector performance

8.7. Summary