When is the last time you visited a website on your smartphone and had to wait for the page to load?
According to Akamai, 73% of mobile users say they've encountered a website that was slow to load. Many times, this happens when users aren't on WiFi and are relying on a cellular connection.
But when it takes a few seconds for a webpage to load, time seems to slow to a crawl. The longer that website takes to load, the more frustrated we become. And who could blame us? Shouldn't mobile websites load just as fast as their desktop counterparts?
Yes, they should. Your mobile website included.
So, how are mobile websites performing today? To find a benchmark, HubSpot Research conducted a study analyzing the performance of over 26,000 websites. Not only does the study paint a not-so-pretty picture of how many business' mobile websites are performing today, but it also uncovered exactly how slow loading times affect more than your bottom line -- they affect the visitors' heart rate.
Let's dive in to some of the results from this study, why slow loading times are so bad, and how you can make your website faster.
How is Your Mobile Website Performing?
Chances are, it's barely passing.
According to HubSpot Research's study, most websites are not performing so well. In fact, the average load time we found in looking at these websites was almost four seconds -- which, by itself, is enough to cause many visitors to bounce and look elsewhere.
There are a lot of reasons why websites got a D- grade on average for performance in the study. One of the top contributors to slow load times are images and videos. Often, it's because images or videos have not been optimized for a webpage -- and especially not for a mobile data connection.
Take a moment to think about that beautiful, high-resolution image you probably have on your website's homepage. It's just the perfect representation of your brand or product, isn't it?
Well, that image probably looks great, but its large file size could be causing your website to load slowly -- thereby giving your mobile visitors a poor user experience.
Why Fast Loading Times Matter
Before we get to how to make your website load faster, let's talk a little more about why fast loading times matter.
Slow Loading Times Stress Out Your Visitors
It makes sense that slow loading time would frustrate your site visitors and affect conversion rate and brand perception. But did you know it actually leads to increased heart rate and stress levels? According to a 2016 Ericsson Mobility study, single website loading delays lead to a 38% increase in heart rate, on average.
It's hard to quantify a 38% increase in heart rate -- especially if you don't monitor it actively. So think of the last time you did something stressful, like watching an horror movie. The delay in mobile load times is roughly equivalent to how you felt watching that horror movie.
As marketers, that's not the way we want visitors feeling when accessing our content or evaluating our product or service.
Visitors May Blame You for Their Bad Experience
In some cases, when website visitors experience a delay in loading time, they blame their cellular provider for bad service. But the longer the delay, the more the blame for the delay turns to you: the content provider.
In the same Ericsson study, the researchers ran a Net Promoter Score (NPS) survey for customers, which asked them at what point they transfer blame from their mobile service providers to the content provider.
For customers in the study that experienced no delay loading a mobile website, their NPS score increased drastically (by 4.5 points) for their mobile service provider. But customers that experienced some delays started to place blame on the service provider; and the longer the delay, the less they blamed the actual provider, and the more they pointed a finger at the folks behind the website itself.
Slow Videos Seems to Be the Most Stressful
The use of large imagery and background video has become more common in website design lately. Videos are great assets and bring life to your content -- but it turns out they can also be pretty stressful.
The researchers at Ericsson found that a YouTube video that had even a two-second delay in loading increased viewers' stress levels by 3%; and once a video started playing, just a single pause caused stress levels to increase another 15%:
This added stress brings us right back to that horror movie -- a feeling we certainly don't want to leave visitors with.
Knowing how much load time delays can affect visitors physiologically, what can we do to make our mobile websites faster and give them a better experience?
5 Ways to Make Your Mobile Website Faster
There's a lot that goes into website performance, but let's cover the top five factors that play a role in your mobile website loading quickly.
1) Determine how your mobile website is setup.
Do you have a separate mobile website (such as m.exampledomain.com) or does your website use responsive design?
Google recommends using responsive design as their preferred methodology and based on how your mobile website is setup there are performance optimizations that your team can investigate. Read this blog post to learn how to test your website for mobile-friendliness.
2) Compress your images.
Remember that beautiful product or brand image I mentioned above that could actually be slowing down your website? If you compress that image, you could take seconds off your page's load time. Because websites generally have a significant number of images, this is often the largest reason for slow load times -- so we recommend addressing this first.
For example, let's say your product image is displayed on a page as 500 x 500 pixels, but the actual size of the image file is 3500 x 3500 pixels. That image probably weighs a few megabytes (MB), and in many websites, the visitors browser will be forced to load the 3500-pixel version of the image first, and then resize it properly to its smaller version -- all during the loading process. On desktop connections this happens constantly, but generally, it happens so quickly we don't notice it.
But on mobile -- especially on a cellular connection -- the full-size image can take a long time to load, which can really frustrate users. To fix this, consider resizing, cropping, and then compressing your images. (HubSpot customers don't need to worry about compressing their images -- images uploaded to HubSpot's software are automatically compressed. For non-HubSpot customers, tools like TinyPNG will help you reduce an image's file size.)
We also recommending saving images in a format like JPG that's relatively lightweight, good for your pages, and won't bloat the user's experience.
3) Minify all code, especially JavaScript.
"Minifying code" is the process of removing unnecessary characters without affecting the website's functionality. It has a significant impact on time it takes for a website's code to be processed, thereby making your website load faster across any device, whether desktop or mobile.
To minify your code, you'll likely want to get someone from your website team or development team involved because it does involve directly changing the code on your website. It's even better if you can remove some JavaScript (or other code) from the mobile versions of webpages to speed them up further. (To learn more about minifying code, check out these instructions from Elegant Themes.)
4) Load videos in the background (or not at all).
Videos are likely the largest resource on your pages, and will take the longest to load on mobile. If the video is not critical for the user experience, consider hiding it in the background -- or not even loading it at all. By hiding videos in the background, they'll loading will help with the perception of your website loading quickly but may not ultimately solve an issue of a slow-loading mobile website.
How do you make a video load in the background? You or a member of your development team could insert some CSS into the code so that the video won't show up at all when the visitor lands on the website.
If your website includes long videos that describe your product or service, you could try using a call-to-action instead of putting the video directly on the website so mobile-specific visitors can, for example, email the video to themselves and view it later. This saves time in the near-term, and also makes the mobile experience vastly better for visitors.
(Note: If you choose to create CTAs for mobile users, think about the spacing around your text boxes and images to make sure your webpage is legible and easy to interact with, regardless of which device your visitors are using to access your page. Buttons that are difficult to interact with on a small screen could lead to a frustrating user experience.)
5) Take advantage of the cache and speed benefits of a Content Delivery Network (CDN).
Content Delivery Networks (CDNs) help cache and load content on servers in different locations so that, no matter where on the internet the visitor is coming from and which device they're using, they'll have a faster -- and better -- user experience. If your website isn't on a CDN, you could be missing out on a number of performance benefits that we would strongly recommend.
(HubSpot customers: The HubSpot Website Platform uses responsive design, has automatic image compression, and is backed by our CDN for loading your website really quickly -- so you don't need to worry about these things. In fact, according to Yottaa, an independent Internet Performance company websites on HubSpot load faster than on other content management systems.)
There's a lot at stake for marketers in ensuring our websites not only look great, but function and perform great as well. A fast-loading mobile site will ensure your visitors don't bounce from your site, and that they won't experience levels of stress similar to watching a horror movie. You can use the tips above right away to dive in and to start improving performance of your desktop and mobile website.
No comments:
Post a Comment