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:
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.
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:
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.
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.
Jim Johnson Director of Web Development For more than 15 years I’ve been developing for the web and working on higher education projects. Leveraging that experience to make your project a success is what I do. When I’m not geeking out over the latest tech, I’m usually hanging out with my family (while geeking out over the latest tech!).