Cloud Platform
Front-End Performance: Image Handling
Business is keenly aware of the importance of page-load time, and its impact on conversion and search engine optimization. It's now a priority at companies like Wal-Mart, Amazon, and Mozilla.
At Acquia, we hear about it from virtually every customer. They all want to know how our platform and services can improve the performance of their websites. How much can we speed up the responsiveness of the digital experience they are offering their users and customers.
Performance is often considered to be primarily a back-end problem, but frankly what we find after we dig through back-end code: often poor front-end optimization is the culprit and not Drupal itself.
While internet users don't have a page-load value in mind they're not counting seconds they do want their content now. A content owner's fear is that with a finger hovering over the back button, a user's brain is doing an automatic cost-benefit analysis on whether the loading content is worth the wait. If the site is too slow, they are impatiently wondering if they can get what they're looking for somewhere else, somewhere quicker.
It's important for business to understand the impact of design and feature-level decisions on performance, and the importance of balancing a sophisticated and elegant user experience with nimble performance. As Engagement Managers, Architects, and Developers, it's up to us to inform stakeholders of the impacts of their choices, offer compromises where we can, and to implement in smart and responsible ways. Regardless of the heroic efforts we are asked to make at the code level, we should all be able to agree on this:
Faster Page Loads = Happier Users
This article kicks off a series about optimizing the requests made by a Drupal site after the DOM loads. The goal of the series is to give site and product owners a new set of tools to evaluate their internal performance and to provide architects and developers specific recommendations. Today we'll tackle image handling. Subsequent posts will cover JavaScript and CSS optimization, Content Delivery Networks (CDN), semantic HTML and better content selection. We'll start with image handling because it's low-hanging fruit and a front end swing-and-miss we often see.
Our first post is divided in two: Theme Images, the images comprised in your design, and Content Images, the images chosen and uploaded by authors, editors, and producers.
In Theme Images we cover sprites: why you should use them, how we employ them at Acquia, and some resources to get you going. In Content Images we explore how to deliver high quality images, optimized using compression and size adjustments, and how we accomplish this at Acquia. Finally, we'll link to some additional resources.
Your images need to be optimized. Full stop. Apply some lossy compression to that 50 image gallery. Dump all your theme images into one sprite file. Don't serve a retina-quality image to an outdated smartphone. All of these impact page-load times, and we'll touch on each one here.
We have the most control over theme images because the end users who create content on a site rarely need to manipulate them. Theme images don't change much after the designer has created them. That makes them ideal for combining into CSS sprite files. A sprite works by combining all theme images into one file and using the x and y positioning values of the background CSS property to control which portion of the image is visible.
Sprites hold the advantage of existing in a singular file that is almost always smaller than the sum of its would-be piecemeal parts, plus it can be downloaded with a single HTTP request and cached for reuse. While nothing new, if you're unfamiliar or need a refresher on sprites, CSS Tricks has a great introduction.
There are a lot of ways to create sprites, including manually in Photoshop. Various Ruby gems and Grunt/Gulp plugins make the process easier. Here at Acquia, we tend to rely on Compass to do the heavy lifting for our Professional Services builds. When creating sprites with Compass, you can use directories to group images that will form separate sprites. So, instead of creating one enormous sprite for all of my styles, I'll break them up into logically grouped images based on their use. These almost always end up being PNGs. When employing icons, I try to use a font-icon or an SVG icon if possible. And if you're considering SVGs because they look great at different resolutions and screen sizes, you can sprite those too.
Content images differ from theme images in that we as designers don't have full control. We're shackled to the whims of a writer or a content producer with a burning desire for that full-window 50-image slideshow. Nevertheless, we need to make sure those 50 images hit a sweet spot for size and compression. That means we're applying an acceptable amount of lossy compression on our JPGs and sizing them to correspond with viewport size and device resolution.
We see a lot of designers and developers getting around responsive challenges by simply loading a larger image then necessary, not declaring dimensions on the image, and scaling the image using styles.
Instead, we should use our current best option, Drupal's Picture Module. The picture module uses the (soon to be accepted) HTML5 picture element and is a backport of Drupal 8's Responsive Image module which is a part of core Drupal 8. For many, the current preferred solution is to use an image tag with srcset and, yes, I am aware of the ongoing conversation around Drupal 8 image handling. Presently, however, the picture element and a polyfill is Acquia's go-to solution for responsive images. It uses the Breakpoints Module to load the correct image according to viewport size and pixel density, and adopts our defined image styles to create derivatives for different viewports.
This solution takes care of both image size and compression, doing the math to find that optimized sweet spot so you don't have to.
Drupal can be a speedy back-end workhorse, but sloppy front-end implementations can quickly undo all your hard work. Employing the strategies I've outlined here can decrease your page-load times by a significant amount. Using sprites for theme images reduces the number of HTTP requests, and enables caching for future use. Drupal's Picture Module takes the guesswork out of image delivery, optimizing with appropriate compression and size manipulation.
And this is just a start towards your faster Drupal website. In the next post in this series, I'll show you how to optimize your javascript and cascading style sheets -- two more ways you can improve your site's front end to create faster page loads, and happier customers.
Cloud Platform