How optimization impacts performance, and why you should care.

As digital interactions become more elaborate and complex, user expectations for information to be instantly accessible also increases. It's why Facebook recently launched Instant Articles, which claims to load a publisher's article pages up to 10 times faster than the mobile web. Want to know if your content is meeting expectations? In this article, we'll explore how media optimization, from a design perspective, can impact overall performance, and why you should care.

The realities of load time

It’s evident that if the content on a webpage or within an app doesn’t load fast enough, it will lead to lower customer satisfaction. According to Kissmetrics, the impact of page load times drives away approximately 7% of potential conversions for every one second delay. Looked at from another angle (based on research done by Yottaa)– if a webpage takes three seconds or more to load, only about 60% of its visitors will care enough to wait. The other 40% will completely abandon ship with a likelihood that they will never come back.

Customer perceptions aren’t the only consideration influenced by slow load times. Search rankings are affected as well. If Google notices that an unusual amount of people are abandoning a webpage after its content has started to load, it will be flagged as “not legitimate”, and as a result, the website will be placed further down the list on a results page. It’s also important to note that Google shouldn’t be the only search engine to optimize for; besides Bing and Yahoo, don’t forget that sites like Twitter, Pinterest, Yelp, and other social media platforms can act as portals and side-doors that your audience could be coming from. So it’s integral that your media optimization plan considers all of your chosen touchpoints.

The following are a few safeguards and strategies that we take into consideration when we deal with visual-heavy projects:

1. Content first

What are you trying to communicate to your audience, and does it align with your business goals? Start off with a narrative, high-level concept and/or brand strategy as a foundation, then integrate a content-first approach at the early stages of wireframing. This ensures that the most important information is prioritized and organized. Any media included afterwards should be thoughtful supplementary enhancements. For a digital experience to thrive, the media within it– including photography, illustrations, videos, and animations– needs to be presented at its best. “Best” can be defined by three criterion: (1) proper display size for all devices, (2) adequate resolution for all screen types, and (3) optimal compression level, which affect loading times. These factors are especially important for experiences that can be accessed via smartphone, which these days, is most.

For the mobile version of the BC Hydro site refresh, we included the information that would be most important for their users then put everything else within a slide-in menu (in the hamburger).

As designers, we’re mainly responsible for determining how “heavy” our experiences should be. We should be enhancing our digital experiences in sensible ways and with meaningful media, and not just for the sake of adding flourish, which leads us to the next point.

2. Media optimization supports user expectations.

When users are able to access content from numerous “side-doors” and devices, there are sets of expectations that will affect how a user consumes your content. Think about this: if a friend were to send you a link to a video, what kind of video would you expect to watch if it was from Vimeo versus YouTube? What if it came from Instagram or Vine? What if you were given the link while you were on your phone? Would knowing what platform it came from affect your decision to click in to view it that very moment? In thinking about content from this point of view, it might not matter what kind of video it is because context influences how a person will interact with it. Let’s use our collaboration with Pirelli on the Highway Zero project as an example.

Which roadtrip do you want to experience?

This cross-channel experience was created to provide visitors with a virtual road-trip showcasing the new Pirelli P ZERO All Seasons Plus tires. On desktop, we featured a series of three-minute videos. Whichever video they chose, users were able to control the camera to view the product in context and from different perspectives. The full experience is best viewed on desktop, however we created micro-moments in the form of bite-sized, thirty-second videos optimized for Instagram, YouTube, and mobile consumption repurposed from the original long-form videos.

We considered the different contexts users could engage and participate with Highway Zero. Then went to work on media optimization for each one, ensuring that while user expectations were met, the objectives of the campaign weren't lost.

3. Reduce, reduce, reduce.

The easiest way to handle media optimization is to make sure you’re using the appropriate settings for exporting assets and doing any additional compression if necessary. Depending on the design and what type of assets are necessary, there are a ton of tutorials, apps, web services, and software hacks that can help get the job done, and they are just a Google search away.

When we use Sketch or Adobe CS, we tinker with the export settings until we can get it at a balance between the highest quality with the smallest file size. However, if a particular image is super heavy and we’ve done everything possible within the software from where it originated from, we'll use compression tools like imageOptim, JPEGmini, Optimizilla, and tinyPNG to reduce it further. Here’s an example of how an image (one of our beloved office dogs, Jacques) faired out with the tools mentioned above:

Here is Jaques, and four variations of the same image processed through four different compression tools.

Depending on how media-heavy a project is, there should be a calculated file size range for the asset production team to aim for. In this case, to compare between the original photo and the smallest, most compressed version (TinyPNG), there was a file size decrease by 90% with a slight loss in saturation (note that the more diverse your colour range is the more affected it will be by compression). Therefore, it’s difficult to suggest which compression tool is the best because it depends on the needs of the project and the file format necessary.

4. Think about the pre-loading state.

There will be projects when implementing high-quality images and videos is inevitable, but there are still people out there with slow connectivity. So how do we make the waiting process seem “invisible”? There are methods you may have already encountered. For instance, if you use Facebook or have read articles on Medium, both platforms use progressive image rendering, which is also referred to as LQIP (low-quality image placeholders). On initial load, the webpage presents a blurred-out or pixelated image that piques enough visual interest. Without diving deep into the cognitive science behind it all, this placeholder in turn keeps a person curious enough to stick around and wait for the full high-quality image to appear. In a way, everyone wins: your audience is given a “sneak peek” to satisfy wait times, which in turn gives you a few more seconds to load your page in its entirety.

Here’s how Medium deals with images while they load. It's also a great read from our CEO on category expertise.

Another approach is lazy loading or infinite scroll, which can be seen in long-form articles and card-based systems. Rather than having the page load everything up all at once, content will only appear once the user reaches a threshold, for example, as they scroll past “the fold” or after passing through a certain number of blocks. If your audience is engaged with your content, it’s possible that implementing this will keep them on your site just a tad longer.

Whichever pre-loading state you decide to go with, ensure that it makes sense in conjunction with your design, content types, and amount of content.

5. Tap into your front-end dev/coding spirit animal.

There are several circumstances when coding a part of your project might be better and/or faster than if you were to “export assets”. For example, rather than figuring out the different resolutions of screens to export images for, it might be worth considering SVG formats. Using SVG sprites or fonts for icon sets can prevent a ton of headaches when it comes to designing for responsive layouts. For trickier images that require special art direction, leveraging the power of the picture tag and image srcset will create a seamless visual experience for your audience regardless of screen size and device. This Smashing Magazine article explains the concept wonderfully.

Furthermore, instead of using GIFs for animated illustrations/vectors, CSS is packed with animation properties which are robust enough to handle simple animations and are hackable enough to fake complexity.

We used SVG graphics, CSS animation, and video on the BeyondTrust Tour page to help explain how they solve cyber security in a dynamically visual way.

Sure, you can talk to the front-end developer on your team on how to go about these implementations, but it’s also worth a shot learning and honing HTML/CSS and other coding skills if you’re a designer who wants to take their role to another level. OneMonth or Team Treehouse, anyone?

Making media optimization a priority.

The performance of our technologies and user interfaces is a critical consideration for any project. As designers, we can’t shrug it off as a technical issue for the developers to sort out, because this poses as a design challenge as well. It’s our role as designers to ensure that the media, visuals, experience, and service – no matter what forms and packages they take – are well-balanced, purposeful, high quality, and optimized. Despite how incredible a digital platform or product might appear, the audience is not going to be engaged if it simply can’t load properly or fast enough.