Learning Responsive Web Design

Chapter 11. Performance

One often-heard criticism of responsive design is that responsive websites tend to have poor performance—that is, they take longer to load and render.

For many responsive websites out there, that’s true, but it’s not because responsive sites are inherently slow; it’s because those sites were not developed with performance as a goal. There are a lot of techniques to make websites lighter and faster.

In this chapter, we’ll first talk a bit about why performance matters, and why performance should be a consideration as you’re designing a website.

Then we’ll go through, step by step, what happens as a web page is loaded and rendered in a browser, so you’ll have a better understanding of all the things that are going on and what can go wrong.

Next, we’ll look at how to test the performance of your site, to figure out what the areas are.

Finally, we’ll go into detail about what you can do to improve the performance of your website. Some of the areas we’ll look at are cleaning up your code, minimizing HTTP requests, compressing files, enabling browser caching, and removing JavaScript that blocks loading.

Note

One of the best resources for addressing performance on your website is Google’s PageSpeed Tools (https://developers.google.com/speed/pagespeed/). Some of the suggestions in this chapter are based on Google’s PageSpeed Insights Rules, and used according to terms described in the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/ ...