Responsive Design and Performance in Drupal 7Posted: April 8, 2013 under Drupal, Web Design, Web Performance
Website performance has been on my mind a lot lately, especially with regard to responsive web design. It's quite important, but it also requires a shift in thinking that is still underway for many involved with web projects, particularly clients.
How quickly your page loads has a big impact on everything from your site's search rankings to the abandonment rate for shopping carts. But as I mentioned in a previous post, there are tensions between commonly desired features and mobile performance. I'll give you an example we run into here at Friendly Machine all the time.
One thing that gets included on most of our projects are image sliders. There's no way around it, they add bulk. Sure, they look cool and are really popular with clients, but if we were designing for mobile performance would we choose to include them? Probably not. I'll discuss below how to reduce the impact these snazzy (and heavy weight) features have on performance, but is file size the only thing to be focusing on?
The Real Mobile Bottleneck
There was a great article recently on Smashing Magazine that discussed performance for responsive design. It points out that the bottleneck for mobile performance isn't download speed, but the processing power of the mobile device.
That means a lot of the things we've been including in our sites - lightboxes, iframes (think embedded videos), jQuery widgets, etc. - have been making our sites slow on many mobile devices, even if their file size isn't that large.
— Jeff Eaton (@eaton) April 6, 2013
Use Adaptive Images
Adaptive images are a way of serving mobile users with images that are appropriately sized for the device requesting the page. There are actually a few Drupal modules to choose from, but the ones that look the best to me are Adaptive Image and Adaptive Image Styles (ais).
The first one is better for novice users and it's the one we include with our packaged themes to deal with the slider images, but if you're comfortable editing your .htaccess file, the second is definitely worth a look. As is the case with most cool things, there is a slight catch with adaptive images.
Adaptive image techniques are a bit indiscriminate in how they resize images. If you've used the image styles with Drupal before, you'll know what I'm talking about. The scale and crop sometimes clips the image in a less than desirable way.
If you have a site where editorial control over the image - making sure it retains it's visual impact at all sizes - is important, then the Picturefill method may be a better option. In most cases, however, adaptive images will do the trick.
Reduce Widget Use
The article from Smashing that I referenced above discussed the negative effect social sharing widgets had on page load time. Can you guess the slowest loading widget in the Smashing test? Google+.
So should you stop using them? No, I certainly wouldn't go that far. They're very helpful in marketing your site, so it's another situation where you have a trade-off. Does your site really need to be able to share out to a dozen sites? Probably not.
Focus on the sites your visitors use the most and ditch the rest. Also make sure the widgets you are using work well on a mobile - floating sidebar widgets, I'm looking at you!
If you're a designer, don't you yearn for clean markup without all the unnecessary divs that most content management systems spit out? I know I do. The Fences module will help you get closer to that ideal. It's written by John Albin, by the way, one of the guys behind the Drupal 8 Mobile Initiative.
If you take a look at the project page, you'll see the example showing the difference in the markup that's generated using Fences. Less markup = faster download times. I'd love to do a little case study on the effect this module has on page load time.
Test your Site
Sounds like a no-brainer, right? But many of us don't take a good look at the load times for the various elements on our web pages. I recently had a site adding a CSS file in template.php. It seemed logical under the circumstances to use a separate file for that CSS and it was relatively small, but when I ran the performance test - yikes! It was adding almost half a second to the load time of the page.
I just rolled that CSS into my global.css file and the performance hit disappeared. So, how to test your site? One good tool is YSlow. It works with the Firebug add-on to analyze what you can do to improve a particular page. Warning - it may hurt your feelings, particularly if you don't like getting poor letter grades.
Another good one is Pingdom Tools. I think this site does a better job of presenting information about the page than YSlow, but of course you can't use it for dev sites that aren't accessible via the Internet.
If that's the case, then another good tool is the Network Panel that comes with Chrome developer tools. I actually like this one better than YSlow for sites on a development machine, but I think it may be down to personal preference.
Whichever tools you use, they can help you track down some of the biggest offenders with your particular site. And that's the thing, each site is very particular. There are different modules being used, different content requirements, etc. Best practices are important, but testing is essential and anything that's taking a long time to load is worth investigating.
Resources You Can Use
Earlier I referenced the Drupal 8 Mobile Initiative. Shyamala Rajaram recently wrote a very nice preview of what's coming with the next major release of Drupal. You can also check out the article I posted last week that had some basic tips on site optimization.
If you're looking for some more advanced techniques, this post from Dylan Tack demonstrates how they cut load time by 20% on the Metal Toad site. Another good post is by Leigh Shevchik which also includes a few advanced performance optimization tips.
There are trade-offs with every project, but with a few tweaks and a shift in thinking, we can make some pretty big gains.