Plus: some fun web performance stats and links to free tools


Some Mac users call this the "beach ball."
I call it the "Rainbow Spinny Wheel of Death."

Performance matters.

Have you ever struggled to get your bank balance to load on your phone while you're waiting in line with a full cart of groceries? Or, ever wanted to buy a brand new shiny thing before it sells out only to get stuck looking at a spinning wheel icon?

If you can relate to experiences like this, then you can imagine how your customers feel when they're waiting on your website to render. Try as we may with our cute loading indicator animations, at the end of the day, we all hate to wait. It's why we cite performance as one of the 7 major causes of bad user experiences.

Websites of all kinds are more complex than ever, which means they're also larger and slower.

Performance matters whether you've got an eCommerce shop, a marketing site, or an online app. When we talk about "performance" we're referring to the speed and reliability of a website. Is it up? Is it functional? And, the increasingly important question, is it fast enough?

With fancy new web technologies being born every day, we should be getting close to banishing slow online wait times forever, right?

Wrong.

Websites of all kinds are more complex than ever, which means they're also larger and slower.

We love rich, dynamic websites with enticing content, images, animations, and videos. We love all of the third-party bells, whistles, and plugins—everything from engaging comment sections, to product ratings widgets, to scripts like Google Analytics and FullStory that help us understand how people use our websites.

But, every extra request or plugin or script on a website can add to the time it takes for the website to load completely, and it increases the amount of data required for a customer to view a page. These performance costs can add up quickly. Ultimately, if we're not careful, we pass the cost of poor performance onto our customers directly, and it affects our business bottom lines.

Luckily, where there's a performance problem, there's an opportunity.

Faster websites have:

Optimizing for performance is an opportunity to optimize for customer experience. Managing performance is a business of trade-offs. Adding new content, features, or scripts is a bit like buying something on a budget; for everything new that you add, you need to remember that you'll need to save somewhere else.

Focus on what's within your control

When it comes to performance, it's important to know the difference between what you can control and what you can't.

Some things are out of your control. For example, you can't control whether a visitor is coming to your website on a slow network connection.

Some things are within your control but require relatively high effort to optimize. If you Google "web performance best practices," you'll find an enormous wealth of valuable resources on best practices to make your website faster, including tips on how to:

If you're serious about improving performance, start reading up on those best practices and make plans to kick off efforts to optimize and measure improvements for your site.

Some things are within your control and require relatively low effort. If you use a CMS or a tag manager, these are changes that anyone with access to those tools can make. Start doing these things today to improve performance right away.

Two opportunities to improve performance

Two of the biggest drags on performance are 1) unoptimized images and 2) performance-degrading scripts. We'll look at how to turn these drags into opportunities below.

Your images need not be degraded in quality to be performant.

1. Optimize your images

Image optimization is one of the fundamental practices that can help improve your site performance, and it doesn't have to be complicated. If you've got access to your CMS or the ability to update images on your website, you can start optimizing images today. Here's how:

» Remove excess metadata

Did you know that most image files contain more than just what's needed to render the picture?

When we save images in various formats on our machines, programs usually also save a bunch of metadata about the photo in that file. This metadata might include where the photo was taken, what type of camera or device took the photo, or even a history of versions, comments, layers, or color profiles from the app where a photo was edited.

In general, the images that we use on our websites and online stores for marketing and branding purposes don't need all of that extra metadata. Removing it to make the images smaller can help them load faster.

Download an image optimization app, such as ImageOptim. Drag and drop your images into ImageOptim to scrub the images clean of the invisible junk you don't need. Then, upload them again to your site.

» Check for images that may be larger than they appear

Often when we upload images or screenshots into a CMS or use them online, we then use CSS rules or some resizing functionality in our CMS to make those images smaller than the original size of the images so they fit into our templates and page layouts.

While the images may look relatively small on your mobile viewport or browser window, the files for those images could be much larger than you'd ever want them to render on your website.

Check to see whether any of your resized images are still referencing larger image files. Then, resize those images to be the minimum height and width for the largest they'd ever render in the context of your site's design.

Common culprits? Check profile pictures, author avatars, product thumbnails, and SaaS app screenshots.

» Convert .gif files to .mp4 files

Animated GIFs are fun. A .gif meme helps inject personality into a blog post. A .gif animation can make an image on a product page sing. And, if you're writing educational content, an animated .gif can be truly helpful for demonstrating multi-step processes.

Alas! The much beloved .gif format was not originally designed with animation in mind, and it's not a performant way to render animation online. Animated GIFs are often 5 - 10 times larger than MP4 video files.

Use a free tool to convert those .gif files to .mp4 files. They'll look just like the .gifs you love, but they'll be lighter on the page.

Third-party scripts are great so long as they're performant.

2. Audit your usages of third-party scripts

Do you have access to your Google Tag Manager or the part of your website where third-party scripts are added? If yes, here's how to get some quick performance gains:

» Remove old scripts for services you're no longer using

Take a few minutes to make sure that you're not currently loading any third-party scripts for services that you no longer use.

It's like the KonMari method for your script tags: if a script isn't bringing you joy, let it go!

» Make sure you're not using your A/B testing for "hot fixes"

We love A/B testing tools like Optimizely that give us the power to run comparison tests on a whim, but with much power comes much responsibility.

Some A/B testing tool scripts can slow down the page render as they're swapping in the variants we use for experiments.

Because there's a performance trade-off there, be sure that you're only using A/B testing for experiments and not to make "hot fixes" to content on your site.

Deploy tools to spark a culture of performance

Lots of performance problems happen purely out of habit.

"Hi, I'm Melanie, and sometimes I forget to optimize my images."

We know better, but it's just so easy to forget if there aren't systems in place to make it second-nature.

Good habits are easier to develop when your organization has a culture of performance, where everyone across your org sees the importance of web performance to the customer experience.

If thinking about performance is new for your organization, having the right tools can give your team a shared language for looking at opportunities to make improvements. Check out the following tools:

Have a web performance tip or story to share? We'd love to hear from you! Scroll down and leave a comment, below. 👇