Join James Williamson for an in-depth discussion in this video Improving site performance, part of Learning Responsive Design.
When building responsive designs, designers often get so caught up with the visual design and functionality of the site that they overlook one of the most critical aspects of building for multiple devices, and that is site performance. In designing for the desktop, we become accustomed to creating sites that are built for high- bandwidth consistent connections. That's not the case with mobile devices, where you have to deal with a totally different set of performance issues. Network connections and bandwidth speed can vary wildly from user to user, or even during a single session.
Network latency can slow sites as well, regardless of connection speeds, and user behaviors like riding a train or getting into an elevator can affect loading. So, obviously, if you're going to design across multiple devices and platform, performance becomes a bigger concern. There are many ways to improve performance, but perhaps the most overlooked is also the most simple. Be sure to keep your code as lean and clutter-free as possible. By using standards-compliant code, eliminating extraneous markup, and keeping your external scripts and styles as lean and efficient as possible, you'll reduce page sizes and lower the amount of time it takes to parse your code.
The result can be dramatically faster loading times. You also want to keep the HTTP requests made by your site to a minimum. Each time your site requests an image, external CSS file, script, or any resource from the server, it's an interaction between the device and the server. Over mobile connections, sites with a high amount of server requests can be slowed down significantly by network latency and bandwidth speeds. So how do you limit this requests? Well, first make sure that you combine external style sheets and scripts, when possible, into single documents.
If you are linking to four different style sheets for desktop, tablet, smartphone, and print styles, you're making four separate HTTP requests for those resources. Simply combine them into a single style sheet using @media request. Yes, the style sheet will be larger in size, but you're always better off by downloading a larger resource with fewer HTTP request. Likewise, if you're linking to multiple external scripts, try combining them into a single file. And development-wise, this can be tricky, but there are tools out there, like the Filament Group's QuickConcat and Enhance.js, which can combine files at runtime into single request.
You can also reduce requests by modifying how you author your CSS. If an image isn't needed within the context of the content, meaning it's purely decorative, change it to a background image and only request it in the appropriate media query. Not only will this prevent your full-screen banner from downloading to mobile devices, but it will eliminate the server request for it. And often you can use styles to eliminate certain requests altogether. For example, by using gradients, rounded corners, transforms, and other CSS3 techniques, you can draw simple buttons and icons through CSS and eliminate the need for images in those instances.
You can also combine images and icons into sprites so that you're using the same image for multiple icons and user interface elements. This alone can save dozens of HTTP requests. Using data URIs can lower the amount of server requests as well. A data URI allows you to embed images directly into your CSS without having to request the image from the server. Now it adds a bit to your CSS code so it's really only appropriate for smaller icons and images, but it can be yet another way to improve performance.
For example, I might use the lettering.js library to fine-tune my typography on a desktop site, but not use it at all for my mobile app. Well, if that's the case, why make mobile users download it? What all these really boils down to is that you need to spend a fair amount of time as you plan your site making sure that it's structured in a way that maximizes performance. Any responsive site that's designed to look good on mobile devices should also be designed to perform well on them. To learn more about the CSS techniques that I discussed in this movie, be sure to check out the many wonderful CSS titles in the lynda.com online training library, including my CSS page layout course, which discusses simple CSS drawing and CSS sprites in more detail.
- What is responsive design?
- Controlling viewports
- Designing for multiple screen densities
- Working with media queries
- Using fluid grids
- Building responsive forms
- Optimizing site performance
- Building responsive mockups
- Developing a content strategy
- Designing for mobile capabilities
- Creating flexible HTML
- Testing responsive designs