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.
At the end of the day, we all hate to wait—precisely why performance is one of the major causes of bad user experiences.
The importance of website performance
Web 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. For instance:
Is the website or mobile app up?
Is it functional?
Is it fast enough?
Websites of all kinds are more complex than ever, which means they're also larger and slower.
We love all of the third-party bells and whistles—everything from engaging comment sections, to product rating widgets, to scripts like Google Analytics and Digital Experience Intelligence solutions like FullStory that help us understand how people use websites.
But every plugin or script on a website can add to loading time, and it increases the amount of data required for a customer to view a page.
Luckily, where there's a performance problem, there's an opportunity. Faster websites have:
Higher conversion rates—Ancestry.com saw their sign-ups increase by 7% when they made their start render time 68% faster.
Better SEO—Pinterest rebuilt their website for performance and saw a 15% increase in SEO traffic.
Better customer experience—Kissmetrics reports that a 1-second delay will decrease customer satisfaction by about 16%.
Optimizing for performance is an opportunity to maximize customer experience.
Ready to unearth the issues causing lost conversions (and figure out how to fix them)?
Talk to a FullStory expert about digital experience intelligence.
Two ways to improve web performance
Two of the biggest drags on performance are unoptimized images and performance-degrading scripts. We'll look at how to turn these into opportunities.
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 have access to your CMS you can start optimizing images today. Here's how:
Remove excess metadata
Did you know that most image files contain more than what's needed to render a picture?
When we save images in various formats, programs usually also save useless metadata about the photo in that file. This metadata might include:
the photo location
what type of camera or device took the photo
history of versions, comments, layers, or color profiles from the app where a photo was edited
You don't need all of that extra metadata. For SEO purposes, you just need the description of the photo along with a name.
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 image sizes
Often when we upload images, we use CSS rules or a resizing functionality to make those images smaller than the original size so they fit into our page layouts.
While the images may look relatively small on your mobile device or browser, the files for those images could be much larger.
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.
Animated GIFs are fun—it 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.
However, the 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 larger than video files.
2. Audit your usage of third-party scripts
Do you have access to your Google Tag Manager or where third-party scripts are added to your website? If so, here's how to get some quick performance gains:
Remove old scripts
Take a few minutes to make sure that you're not currently loading any third-party scripts for services that you no longer use.
Don’t use A/B tests for “hotfixes”
We love A/B testing tools like Optimizely that give us the power to run comparison tests on a whim, but with great power comes great responsibility.
Some A/B testing tool scripts can slow down the page render as you’re swapping in the variants to 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 "hotfixes" to content on your site.
Additional tips for enhancing performance
It doesn’t end there. 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:
Combine CSS and Minify CSS
If you're serious about improving performance, start reading up on best practices and make plans to optimize and measure improvements for your site.
Deploy tools to spark a culture of performance
Good habits are easier to develop when your organization has a culture of performance, where everyone sees the importance of web performance to the customer experience.
Having the right tools can give your team a shared language for looking at opportunities to make improvements. Check out the following tools:
Google PageSpeed Insights — Google offers a simple way to scan your website URL to see how your page ranks. PageSpeed Insights will list out detailed areas to improve.
Rigor Free Performance Report — Scan your website URL and get a line-by-line list of specific performance bugs to fix.