Building Responsive With Performance in Mind

Things happened so quickly. I can remember being on client calls, repeatedly having to build a case for the need to address mobile devices on our clients’ websites. Those days are gone. Whether or not to address those needs is no longer a question, and stakeholders no longer need convincing. Most colleges and universities realize the necessity to serve pages that function properly across the many different devices that visit their website. Almost every new project I’ve worked on over the past year has been designed and developed as a responsive website, and over that same timeframe mobile usage on the mStoner.com site alone has more than doubled. Responsive is here to stay, and with this shifting landscape comes a whole new set of problems that need to be considered.

The Importance of Performance
One aspect of responsive web design that has become a focus of the technology team at mStoner is performance. In his groundbreaking book Responsive Web Design, Ethan Marcotte talks about responsive web design as being a design approach that can adapt and optimize itself for the myriad of devices that can potentially access a site. Optimizing a user’s experience is more than just accounting for the visual aspects of the page. If we’re serving bloated pages that take 15 seconds to load on a mobile device, I think we would be hard pressed to call that an “optimal” viewing experience. I recently had the opportunity to see Brad Frost speak at the Breaking Dev Conference in Dallas last September. In his excellent presentation on mobile vs. responsive, he referenced a study conducted by Compuware that stated “74% of mobile web users will abandon a site if it takes longer than 5 seconds to load”. This is a stunning number that underscores the importance of performance in the sites we build for our clients.

The 5 Cs of Responsive Performance
When we first began looking at the various ways that we, as developers, can affect performance in our responsive designs, we started by creating a comprehensive list of the various techniques and approaches that we can leverage. Once we had identified as many of these as possible (and believe me, we add to this list constantly), we began looking for commonalities in the techniques to try and categorize them. Thus, we came up with what we are calling the 5 Cs of responsive performance. They are:

1. Compression: This focuses on making files smaller in size by using various compression techniques. These range from image compression to file minification. The idea being, the smaller the files, the faster the download and thus the faster the page loads.
2. Consolidation: This is focused on reducing the number of page requests by consolidating things like CSS and Javascript into fewer physical files. Additionally, we look at reducing code complexity. It’s important to understand that each page request represents a round-trip to the server which takes time, regardless of file size. By reducing the page requests we can reduce the time it takes to load a page.
3. Code structure: Here we strive to order page elements and linked resources so that they have the most positive effect on performance. For example, because javascript files block other files from loading in parallel, we move script references to the bottom of the page whenever possible. In some cases, we use “lazy-loading” techniques so that resources are not loaded until they are required.
4. Custom content: The goal here is to download content specific to the device or browser that the visitor is using, with the idea that we will be able to reduce the page size in certain cases. This is accomplished by using media queries, user-agent detection, responsive images and a variety of other techniques.
5. Caching: Leveraging various caching techniques can enhance the user experience and improve page performance. Making resources cacheable makes subsequent page visits load faster, since they have already downloaded the resource and it is cached in the browser.

Each of these categories represents a different aspect of performance enhancement from a technical perspective, but so far we’ve learned that there is no silver bullet. Not every solution is right for every website. Looking at the needs of each client and weighing the different options as pertains to their site seems to be the best approach, but understanding the various options and techniques at your disposal is key to the process.

Low-Hanging Fruit
If you are experiencing performance issues with your responsive site, there are probably a few things you can do now that will make a significant difference. Here’s some low-hanging fruit that may give you the biggest bang for your buck:

1. Install GZip compression on your server. This is something your server team can help with. It requires no code changes and can translate to huge performance gains. To see if your site is currently using Gzip compression, use this http compression test here.
2. Use image compression. Reducing image size can make a huge difference in page weight. There are a number of tools that can be used to compress your images, and many of them are completely lossless (meaning you will see no visible difference in the compressed images). Here are a few that work well:

   Kraken Image Optimizer — This online tool works great for .png files, but does not do quite as well as some of the other tools with the .jpg format.

   Jpeg Mini — This online tool worked better on .jpgs than any of the other tools I tried.

   Image Alpha (pc) or Image Optim (mac)- Downloadable tool for optimizing .png files.

3. Leverage browser cache — Ensure your server is setup to return the appropriate cache-control and/or expires header for both static files and dynamic files. These are the headers that tell your browser to use cached resources, rather than downloading them every time a page is accessed. Both Apache and IIS servers have modules that can help with this.

Responsive web design has certainly changed how we approach our work and there are lots of ways to improve our sites and make them beautiful, functional and fast. We look forward to continuing to evolve our tools and techniques with performance in mind.