Chapter 9. Testing and optimization for responsive websites
This chapter covers
- Responsive testing
- Why optimization is crucial to building responsive experiences
- Using web inspectors to improve site performance
- Tips on improving performance
So far we’ve used HTML and CSS to build a responsive website that adapts to changing viewports. We’ve discussed how to add images and media to a responsive site and how to prevent failure in older browsers. All of this has added a lot of extra work for both designers and developers. For developers, the endeavor can be greater because achieving responsiveness in sites involves adding extra content and functionality to pages, and this introduces one of the biggest challenges of responsive web development: how to add the functionality of responsiveness without bloating the site’s load time. If you add a few CSS techniques to your workflow and create pages that scale down, you’ve succeeded in making your websites visually scale, but potentially at the cost of performance.
One of the biggest cons people cite against responsive design is that responsive sites perform slowly, and it’s true. Generally, creating responsive websites means adding responsiveness like a feature, and sometimes this means loading extra images or hiding elements. But there are some small steps you can take to ensure that your site performs optimally.