Your users expect your website to load quickly. If it doesn't, you can lose a lot of traffic.
How fast do you ask
Some research suggests that if a page doesn't load in a snap, people could lose interest. That's about 400 milliseconds.
Just a one second delay can reduce customer satisfaction by 16 percent, and one in four visitors will leave a website if it takes longer than four seconds to load.
Not to mention the powerful Google that website speed is a ranking factor for mobile websites.
So, if your website isn't fast, both your audience and Google will think twice about it. You lose visibility and traffic.
How fast is your website?
Because if it takes longer than a second or two to load, that's when you lose traffic.
It's okay if your website is slow. There are steps you can take to increase the speed and make sure not a single visitor slips through your fingers. Here is how.
Step 1: test the speed of your mobile site
Before doing anything else, test how fast your mobile website really is.
You might think it loads well, but it might be slower than you think.
One of the best mobile tests is from Ubersuggest. This is how it works:
Step 1: Enter your url and click "Search".
Step 2: Click on "Site Audit" in the left sidebar
Step 3: Scroll down to Site Speed.
Here you can find the loading time for desktop and mobile devices. This shows that my website load time is 2 seconds for mobile devices. This is an “excellent” score.
It also tests speed on six key elements of your website:
- First satisfied coat of paint
- Speed index
- Time for interactivity
- First meaningful color
- First CPU idle
- Estimated input latency
If your website speed is excellent then there is nothing to worry about. However, if there is room for improvement, don't wait for action to be taken. Every additional 0.5 seconds it takes to load your website increases the percentage of visitors who leave the website.
I'll cover the most common causes of slow mobile websites and how you can improve yours.
Step 2: perfect your mobile website design
Think back to when you designed your website.
Did you have mobile devices in mind?
I guess you didn't. (When you've done that, pat yourself on the back.)
If you haven't done this now, it's time to reconsider your design with a mobile-first mindset.
Mobile sites have changed a lot in the past few years.
Websites used to have two versions, one for mobile and one for desktop.
A mobile site is easily identified by the "m". Subdomain:
In this situation, the mobile and desktop sites are two completely different animals that work separately from each other.
This is no longer the case. Most websites now use responsive design.
With responsive design, you can have a site that changes dynamically based on access.
So your mobile and desktop users will be viewing the same site, but it will appear differently on each device.
This is actually what Google prefers. You say it very simply:
"Responsive design is the design pattern recommended by Google."
You're probably thinking, "Okay, cool, but what does that have to do with speed?"
Responsive designs tend to load faster than mobile-only websites, so you get a massive SEO benefit there.
If you use a responsive design, your website will get more exposure in the form of social shares, which also boosts your SEO.
Getting your website responsive is good in both the short and long term. If you don't already have a responsive website, I recommend checking it out as soon as possible.
Step 3: keep your site lightweight
It is easy to get into the best and most eye-catching design.
Sometimes you are too busy and, as a result, your website will keep slowing down as you keep adding more.
This is a condition that developers refer to as code bloat.
Code bloat occurs when your site becomes cluttered with excess code.
Most of the time, code bloat occurs when a designer focuses too much on the visual appearance of a site.
Do not get me wrong. What a site looks like is extremely important.
However, performance cannot take a back seat.
Fortunately, it doesn't have to. You can have your cake and eat it too. Here are some tips to keep in mind when designing your website:
Keep it simple
Leonardo da Vinci had this to say about simplicity:
Simplicity is the ultimate sophistication.
Now, about five hundred years later, his words still sound right.
Look around. The complex designs of the past have been replaced by the minimalist designs of the future.
This also applies to websites. Especially mobile websites.
Websites can easily get too crowded on a mobile screen. It is therefore important that everything remains open and confusing.
As a rule of thumb, you should only have one call to action per page. In this way, you can reduce the amount of code you use and improve the user experience of your website.
You may also want to consider a simpler design like this one from Rug Doctor::
It's not flashy, but it does grab your attention with its sleek style.
You don't need a lot of bright colors and photos to make your website stand out. When it comes to mobile design, less is often more.
The less your users have to do, the better.
Think about it. Why should there be seven steps between a customer and a sale when there can only be three?
This effectively shortens your sales funnel, but it also makes the user experience even easier.
Many ecommerce websites use this strategy to increase their sales.
Buying a product is very easy on Boden's mobile website. You put it in your shopping cart, click on checkout and pay.
It's straightforward and to the point. There are no unnecessary steps.
This, of course, also helps to alleviate code bloat. It's difficult to go overboard with code if your website doesn't have many pages.
Cutting out unnecessary steps is one of the best things you can do for your visitors. Mobile users are much more likely to stay on your site when they don't have a lot to do.
Save your users a few clicks and you will receive gigantic rewards.
Use fewer pictures
Before I get into that, I want to say that good images are definitely important for any website and also have SEO benefits.
However, you can have too much good.
In this case, you can go crazy about pictures and slow down your website in the process.
You may not think this is a big deal, but images make up about 63 percent of the "weight" of a page.
From 2011 to 2015, the size of the average mobile site tripled.
That means images are some of the most sophisticated elements on your website. They take up a lot of space so having too many is not a good thing.
One solution is to simply flatten images.
Another (probably more practical) solution is to compress your images and reduce their file size.
Compression basically makes your images smaller without sacrificing quality. This will reduce the time it takes to load your site.
As a bonus, it also reduces the time it takes search engine bots to crawl and index your website.
Websites like Compressor.io can do this in a snap.
In fact, this is a best practice to use even if your website is already very fast.
Do not use custom fonts
I like a nice custom font as much as everyone else, but some of them are very maintenance-intensive.
If you want to read this topic in depth, check out this post on Google's Web Fundamentals website.
If you want the short version, this is it: use custom fonts only when absolutely necessary.
Step 4: Minimize your code
Minimization is a very useful technique for optimizing your code.
Here is a brief definition of what it means to "minimize" code:
Minimizing your code essentially removes anything that is redundant and unnecessary. It ensures that your site only uses the code it needs.
This goes a long way in making your website lighter.
You can manually minimize the code (instructions here). However, if you are new to coding, this can be a little intimidating.
Fortunately, there are several free tools that can help you minimize your code in no time.
If your site runs on WordPress, you have even more options thanks to plugins like Better WordPress Minify:
With these tools, you can minimize your code in just a few clicks and be well on your way to a faster website.
Of course, you should do everything possible to make sure that there is no unnecessary code but errors occur. These tools can help you fix these errors while improving your website.
Step 5: reduce redirects
I love redirects. They can be very useful for SEO and user experience.
But, like code, redirects have limited uses. You can't use redirects everywhere and expect your website to perform well.
This is because redirects inherently slow down your website.
If you click on a normal mobile link, the server will provide the document found under that link.
However, a redirect means that there is no document under that particular link. Because of this, the server has to go to the page that the document is on and get it.
As a result, it may take a few seconds for the correct page to load. By this point, your users might not have been around for a long time.
I recommend Screaming Frog to check for redirects.
Then you can trace the roots of your redirects and modify any changes that aren't entirely necessary.
The less work your website has to do, the faster it goes. While redirects have a time and place, don't overuse or become dependent on them.
Step 6: load over the crease first
It is obvious that users will see above the fold contents before they see anything else.
So why load your entire page at once?
Why not just load the above folder contents first and then load the rest as needed?
This is a concept known as "lazy loading" that can do wonders for the speed of the website.
I bet if given the choice you'd rather lift three pounds than 30 pounds. I'm right?
Lazy loading is exactly the same concept that applies to websites.
By implementing lazy loading, you are asking your website to do only as much work as it needs and nothing more.
If you are familiar with code, you can use this jQuery plugin.
For WordPress sites, there are plugins like BJ Lazy Load that come to the rescue.
If none of these options fit, you may need to hire a developer to help you.
This is a more advanced technique, but it can save your site a lot of work in the long run.
Speed isn't just for racing cars. This is one of the most basic parts of a great mobile website.
A faster, mobile-friendly website can increase traffic and generate a flurry of new customers and conversions.
That’s no surprise.
Mobile is here and it's here to stay.
Desktop performance is still important, but mobile is the present and the future.
In short, make your website as fast as possible and reduce the weight that your website is pulling.
This Think With Google article perfectly says, "When speed is exciting, friction kills."
Improving the speed of your mobile website is a double victory that will improve your website for your users and search engines.
If you haven't focused on mobile devices yet, I urge you to start today.
Which of these techniques are you going to use to speed up your mobile website?
See How my agency can drive Firmly Traffic volumes on your website
- SEO – Unlock massive amounts of SEO traffic. See real results.
- Content Marketing – Our team creates epic content that is shared, links accessed and visitors drawn.
- Paid media – effective paid strategies with a clear ROI.
Book a call