How to Boost Page Performance: Image Compression Tips

How fast or slow a website loads is determined by a combination of factors that span design, development, network architecture, and the end-user's connection speed. Many of these, especially the last, will be out of your control. But one of the biggest, and most easily preventable, causes of a slow-loading website is uncompressed images. Here's what you can do as a content author to make sure you are properly compressing images and not bogging down the load time on pages.

Case Studies

In revisiting the Marian University site that had been launched earlier this year, we noticed that the home page file size was over 1.7MB. That's an exorbitant (but unfortunately common) file size for a web page. With Indiana Wesleyan University, another recent higher-ed project, we encountered similar issues with large graphic page banners. For people accessing the site on a slow connection or over a cell network, this is brutally painful. All the effort that goes into making a responsive, fluid width site that displays optimally on small screens is wasted if the user leaves before the page ever finishes loading.

In the case of Marian, the majority of the page size was a randomly loading transparent PNG file—one in particular weighed in at 1.6MB. There are web-based image compression tools that are freely available that can have a dramatic impact by reducing image file size. That 1.6MB image was able to be compressed down to 230K, with little perceptible difference in image quality. This ended up improving load time by over 85%.

In the case of the Indiana Wesleyan University, here's an example of how significantly we were able to cut page size.

Example A:

(original): 1.07MB

(compressed): 340K

Example B:

(original): 1.1MB

(compressed): 299K

Do this. Period.

Introduce image compression into your content migration/entry workflow, compressing images before uploading into whatever Content Management System you use. Unfortunately, image compression is not baked into most CMSs, even the enterprise ones. And Photoshop, despite its Save For Web compression options, has yet to deliver as drastic results as the better compression tools.

Some of the Best Image Compression Tools

Here are some sites we've used for compression that have returned great results:

• http://tinypng.org/
• https://kraken.io/ (select lossy for highest compression)
• http://compresspng.com/
• http://compressjpg.com/

Set a Performance Budget

If your pages are under 200 or 300K, that's great. For graphically intense pages, if you can keep them beneath 600K, then shoot for that. There's not a magic number, so just aim to get page size as low as you possibly can. If your webpage is over 1MB, you're doing something wrong. If you've already compressed your images, it may be that you're just loading too many image assets. A good way to transform this principle into something actionable is to set performance budgets for pages. The idea is to recognize that page-load time contributes just as much (if not more) to the user experience as interactive or photographic features do (this is especially true for mobile users). By imposing a budget, you set a target goal for page weight and cap it at that. This creates a healthy constraint to measure design and editorial decisions against.

Pay it Forward

Ensuring that your site loads as quickly as possible for all users, regardless of their means of access, has important, but often overlooked, business consequences. Although it may not be a problem specifically plaguing you or me—as we sit at our desks designing, building, or administering websites—we have to remember that our context for the sites’ use does not necessarily match the context of the variety of people our sites must serve. An increasing number of people in cities and around the world have no home internet access and rely on slow mobile connections as their only means of accessing the Web. And if you have little sympathy for the mobile-only user, what about people trying to load your site over sub-standard public Wi-Fi, like in a coffee shop, library, or airport? Let's help 'em out!

Image compression is just one aspect of considering page performance, and there are a lot of other things that can be done to help improve load times. If anyone else has any tips on how content authors can make their sites load faster, please share!