DEV Community: Maura Monaghan

Website Speed Statistics: What Are the Effects of Slow Load Time?

Maura Monaghan — Tue, 08 Sep 2020 13:33:23 +0000

We all know first-hand that slow websites aren’t ideal. Slow loading times do real damage to a site’s bounce rate and SEO, and every second counts – check out the average increase in bounce rate per second for proof:

Website load time is important for everyone, but it’s particularly important for ecommerce websites, for which time is quite literally money. Below, I’ll explain just how dramatically site speed can affect sales and customer loyalty – and offer some tips for easy improvements! But first, let’s talk about a big differentiator in website load times: mobile vs desktop browsing.

Website Speed on Mobile vs Desktop Devices

Websites load faster on desktops than on mobile devices – a lot faster, in fact. One study of 5 million desktop and mobile pages even found that the average time it takes to fully load a webpage on desktop is more than twice as fast as on mobile!

That said, the convenience of mobile browsing has still managed to keep it on top. One 2018 study of US web traffic revealed that mobile devices account for nearly three fifths of site visits and nearly half of total time spent online. Check out this breakdown:

Mobile browsing is hugely popular, and mobile users tend to have high standards, too: most mobile users expect pages to load as fast or faster than they do on desktop. One study of consumers in the UK even found that 14% of shoppers expect pages to load instantly on mobile.

But don’t worry about meeting impossible expectations! There are plenty of realistic goals to set instead: more than half of smartphone users expect pages to load in under four seconds, which is a very doable goal!

What Industries Are the Most Mobile?

55% of all time spent on retail websites takes place on a mobile device, and it makes sense for every type of website to perform on mobile. But some industries are even more mobile-focused than others:

That said, the desktop user experience is not to be underestimated. For all 17 industries above, bounce rates were lower on desktop than on mobile:

Every industry also had a longer average time on site for desktop over mobile, except for Books and Literature – an outlier that I’d guess can be explained by mobile reading devices.

How Does Site Speed Affect Sales?

A one second page load time makes users feel stress-free and in-control. But after 10 seconds, their attention is barely kept, and they are unlikely to visit the webpage again. For ecommerce sites, the cost of page delays will show in revenue. If you’re running an ecommerce site that makes $100,000 per day, then a one second page delay could cost you twenty-five times that amount annually in lost sales!

Even if your site isn’t making that kind of money, a one second delay will…

Reduce page views by 11%
Decrease customer satisfaction by 16%
Reduce conversions by 7%

The good news is, you can experience massive uplifts even from the slightest improvement in load time. In fact, increasing site speed by even 0.1 seconds can have a positive impact on sales:

How Does Site Speed Affect Customer Loyalty?

Customer loyalty is just as important as conversions, since most dissatisfied customers will choose a different site the next time they shop! And just as speed impacts conversions, it also has dramatic effects on customer loyalty. Check out these fast facts:

14% of customers will begin shopping on another site if they have to wait for a page to load
18% of shoppers will abandon their cart if pages are too slow
46% of online buyers say checkout speed is the #1 factor that determines whether they will return to a site
Over half of online shoppers in the US say that site slowness is the top reason they’d abandon a purchase

Customer engagement also suffers as a result of slow load times. Users spend more time on a website when its pages load faster – on average, users visit 8.9 pages when load time is two seconds, versus just 3.3 pages when load time is 8 seconds.

All websites have to deal with the consequences of load speed, not just small or DIY sites – even the BBC loses an additional 10% of users for every extra second it takes for its site to load.

How Can Site Speed Be Improved?

Simple improvements to site speed can make a world of difference, and there are plenty of easy fixes to implement. The best way to begin is to identify the simplest factors affecting load speed:

Web hosting: It’s important to choose a hosting provider wisely, since a low uptime guarantee or subpar customer support will keep your site from running smoothly down the line. It’s also important to note that the more files your website uses, the more server space it will need – which means you may have to upgrade from shared to VPS or dedicated hosting as your site grows.
Images, videos, and files: The larger your files are, and the more files you have on a page, the longer it will take for the page to load – which means it’s important to optimize your images as much as you can before uploading them.
Plugins: WordPress plugins are great for adding advanced functionality to a website. However, it pays to be selective about the number of plugins you use, because too many at once will overwhelm your server.
Browsers: Older versions of browsers may be incompatible with newer assets and code on your pages, so it helps to ensure you’re using the most recent version of your chosen browser.

Once you’ve identified the factors you want to work on, it’s time to start making some improvements, such as:

Optimize images: Optimizing images is a balancing act of finding the lowest file size with the most acceptable quality. There are countless free tools available that make this task a super simple way to reduce a webpage’s weight.
Optimize code: Minifying your code can massively improve page speed. There are many different tools that can help you do this, like HTMLMinifier for HTML or UglifyJS for JavaScript.
Optimize databases: Clearing your database of unnecessary items will make it smaller, and make it easier for web hosting servers to fetch requested content quickly. Think of it as a spring cleaning of unapproved comments, post drafts, and trashed pages!
Use a CDN: Content delivery networks distribute bandwidth across multiple, geographically diverse servers, rather than leaving one server to handle all of your traffic. Cloudflare is one popular CDN option, although there are many more available.

Website Load Time: Final Thoughts

Fast load time should be a major goal for any website owner trying to improve bounce rates and engagement. Ecommerce site owners in particular will notice the financial benefits of upping their site speed.

The best news is that there are simple fixes we can all implement quickly to improve our site speeds – but keep in mind that no matter how much you optimize a site, the desktop browsing experience will still differ from the mobile one!

Using Color to Brand Your Website

Maura Monaghan — Mon, 03 Feb 2020 12:21:52 +0000

We’ve all heard that color can affect people’s perceptions of a brand. But why is color such a big deal to us, and how can we choose colors wisely?

Colors are important because they bring brands to life in ways that an audience can identify with. Good color choice and branding will make people care about your website, and keep them coming back.

Why does color matter?

A strong brand doesn’t just pique interest; it holds interest and inspires trust. Using carefully considered colors will help your brand achieve these goals, because color speaks to us on a subconscious level.

Take the classic example of Coca-Cola. The most recognizable element of this soft drink’s branding is simply the color red. In fact, 94% of the world’s population can recognize Coke’s red-and-white logo. If a picture is worth a thousand words, a good logo is worth a million more.

Choosing a dominant color

The first step to successful branding is figuring out what your website’s dominant color is going to be – what’s going to be your equivalent to Coca-Cola’s fire engine red? You should first think about the emotions you want to evoke in people visiting your site. Different colors correspond to different emotions, and there’s even some research confirming that colors deeply impact our perceptions of a brand’s personality.

Just look around you to see how businesses use this to their advantage: a lot of financial services companies have blue in their logos – think Bank of America, American Express, and Citi – because it builds a sense of trust.

What do you want to inspire in your site visitors? If it’s a sense of tranquility, health, or nature, choose green – it’s the easiest color for the eye to process, and so has a relaxing effect. If you’re going for energy and friendliness, choose orange – it encourages action and even attracts impulse shoppers.

To help you choose, I’ve broken down the effects of other popular colors below:

Red sets off strong emotional reactions and creates a sense of urgency and excitement.
Purple represents wealth and wisdom. People also associate purple with success, and it’s often used in beauty and anti-aging products.
Blue evokes trust and security. It’s also the number one preferred color by both men and women.
Gray is popular in the technology and automotive industries, because it represents simplicity, precision and logic.
Black calls to mind elegance and sophistication, and it is often used to market luxury brands.
Yellow grabs attention and encourages optimism. But it can also put strain on the eyes, which is why it’s best used as a complementary color rather than a dominant color.

Finding your complementary colors

If red is Coke’s dominant color, then white is its complementary color – it works well with the main color, and emphasizes important information that is central to the brand (you can also call these “accent” or “secondary” colors). Take the Coke ad below:

Red is clearly the dominant color. It lets us know right away that this is an ad for Coke, and it brings out the feelings of warmth and excitement that the brand has cultivated over the years. Meanwhile, the white accents in this ad emphasize key information, like the actual name of the brand and its tagline. That’s what successful complementary colors do – look good, and highlight key information.

You can use more than one complementary color if you like. Some websites do this beautifully. On its homepage, sparkling water brand Seriously Unsweetened takes a few liberties with yellow and pink that really pay off:

This stunning design wouldn’t have worked without the page’s majority-white background to keep it simple – if you do decide to use more than one accent color, be mindful that your design doesn’t become too overwhelming. The key to a beautiful color scheme is making sure your dominant and complementary colors actually match. In other words, the goal is a cohesive color palette in which all of the elements work for each other.

So you’ve chosen your dominant color based on your brand values. Now, how do you choose your complementary colors based on that dominant color?

To make this process as easy as possible, you can use a color matching tool like Adobe Color CC to identify the best options. Tools like this allow you to simply input the color code of your dominant color, and based on that, receive a selection of complementary colors. You can filter the results by different color schemes, from monochromatic to analogous, to tailor the outcome to your brand vision.

How to use complementary colors on your site

We’ve seen how complementary colors work in a 2D Coke ad. But how do they function on an actual website?

Think of all the information that isn’t central to your site, but that still needs to stand out. Navigation bars, quotes, buttons, and subtitles are all potential places for a splash of secondary color. Here’s the trick: all of these elements will work, but only if you don’t use them all at once. Emphasis on everything is emphasis on nothing!

For example, if you’re stuck between highlighting a nice quote from a team member, or your contact information – what should you do? You can’t apply a secondary color to both – that would just drown both out. In this case, I’d prioritize the contact information (essential) over the quote (adds value, but is not essential).

The wrap-up

So, let’s recap. You’ll only need three tools to create an effective website color scheme: a dominant color, some complementary colors, and the know-how to organize them. If you know the kind of emotions you want your website to stir up, then deciding on a dominant color will be easy. Next, a digital tool can help you generate the perfect complementary colors. And finally, you can use your newfound expertise to create the perfect website!