Lately there is a lot of talk about speed, loading times and WordPress. And in particular everyone feels the need to optimize WordPress for mobile.
Here in this article we will look at why you need to optimize WordPress for mobile. We will also list 3 action points on how you can optimize with mobile in mind. And it may surprise you – but you do not only optimize for Google – it is all about the user experience.
Why are there so many slow WordPress websites
WordPress is a user-friendly Content Management System (CMS) that will allow pretty much anyone to create a function-rich and great looking website.
Starting a new WordPress website can go something like this. Sign up for a webhosting company, use their one-click WordPress installer, install a really nice looking theme and then it is plugin time.
Now it is all about adding plugins for everything from Gallery views to impressive Image Sliders, Instagram feeds and other social networking accounts. And we are really pleased when there are some cool looking custom fonts that we can add for free. Amazing stuff!
When complete our brand new WordPress website looks great and we have features that would be really expensive to order if they were made for us by a programmer or web developer.
Time to announce the launch and ask for feedback
We write a post in a Facebook group we joined about making money online and ask for feedback.
All of a sudden we realise that there is a problem.
Even though everyone loves our design and all the features they are all hinting that the website is slow.
It is surprising since it has felt fast enough when we have been working on it these past couple of weeks?
What could we have done differently?
There are of course several things that could have been done differently in the little story above. But the main point I want to make is that we do not have to add functionality and plugins just because they are available.
Every time you add a plugin to WordPress you add code that the browser has to read and execute to present the page to the viewer. And more code takes more time.
Also, always remember that when you are working on your website you are most likely using a PC, Mac or maybe Tablet. And you have a fast connection to the Internet.
So now when we have a backstory to where you may find yourself today, let’s move on to why we need to optimize WordPress for mobile.
Why we need to optimize WordPress for mobile
We optimize for speed to create a superior user experience.
And we know that more and more visitors are using their mobiles to surf the web.
To create a better user experience for these users we need to optimize WordPress for mobile.
Lately everyone is talking about Google Core Web Vitals and how speed will lead to better ranking in the search engines.
Granted it is true, a faster loading website may lead to better ranking. But you need to remember that speed has always been a ranking factor. And there are lots of ranking factors.
Building a website the right way means to improve the user experience through a focus on speed and mobile view as we know that
- speed is one of the main factors that will make or break the user experience
- the trend shows that the number of visitors using a mobile on the Internet is increasing
We do not build a fast website just because Google likes it. It is all about the user experience — and since Google agrees your content may rank better.
Here are the three main factors why user experience is crucial if you expect to make money from your website.
1. Conversion matters
You want your visitors to read and engage with your content. You may want them to buy something in your shop or from a merchant you represent as an affiliate. Or maybe you simply want them to sign up for your newsletter or mailing list.
Regardless you will learn the hard way – people do not wait around.
To make money you need to convert visitors into action takers and if your website is slow they will just leave and go to your competitor.
2. Be better than your competition
We need to compete and excel where we can achieve excellence.
Face it, when you are trying to get visitors to your website you are competing with a lot of other websites. And some of them are big companies with more resources than you have at your disposal.
So we focus on where we can make a difference and where our efforts will make a difference. And to optimize our website for mobile is one area where we can shine if we make an effort.
3. Mobile first means exactly that
The whole Mobile First concept signals that you need to embrace that mobile is what matters going forward.
Mobile is where most people are and if you want readers you need to take this to heart. Build with speed in mind to be attractive to mobile users as they outnumber desktop users.
How do we optimize WordPress for mobile
Here I will list 3 action points that will help you optimize your WordPress website for mobile.
And when we focus on building our WordPress website the right way we make the correct decisions that help us achieve success.
1. Images need to be optimized and compressed
When it comes to using photos and images on your website you need to remember that size matters.
The classic scenario is when you take a photo from your mobile and upload it on your website. It looks great and everything just fits. Right?
Wrong.
Whenever we want to use a photo or image on our website we first need to optimize the image. We need to resize the image file to the correct dimensions and compress the file to its ideal file size. If we do not optimize the image it will lead to longer loading times for our visitors. Let me explain.
When we deal with photos and images we need to be aware of two different types of image file sizes.
| File size | File dimension |
| File size is a measurement of how much data the file contains and how heavy it will be to load. File size is measured in bytes. Kilobyte (KB): 1000 bytes = 1 KB Megabyte (MB): 1000 KB = 1 MB | File dimensions on the other hand is the actual height and width of the image and photo. Most of the time we measure the dimensions in pixels (px). |
If we circle back to your photo taken with your mobile it will most likely have a file size of 3-5 MB and the file dimension width would likely be around 5000 px.
To put it in perspective a image heave niche like travel, design or photo would aim for a total page size of around 2MB. That is 2MB including everything on the page.
And if your niche is less image heavy, shoot for as small as possible but a total page size of less than 1MB should be attainable.
2. Choose a fast and responsive WordPress Theme
It is so easy to be led down the path of choosing a design heavy, function rich and pretty looking design.
After all, they look great and there are so many places giving them away for free. And they are often very easy to manage as they are built with many plugins and a point-click-and-drag page builder.
Websites using this type of design heavy themes will be slow and deliver a poor user experience.
All you need to do is to avoid themes with a heavy image to text ratio, social media feeds, fancy looking custom fonts and so on. And if you are unsure, run the theme though the Google Site Speed test.
Instead you should choose a theme built with performance in mind. This means a theme that is fast loading and responsive. I use a theme from Generatepress and you can see my test score taken today below. Another fast theme is Astra.
Not always a perfect 100 but rarely below 95 on mobile view
Responsive simply means that the design will adapt depending on the visitors screen resolution (size). Compare viewing your website on a desktop computer, a tablet and a mobile. A responsive theme will display your website in a clear and logical manner regardless of screen resolution.
Pro tips. Why load the same information in the same way if the visitor is using a smaller screen? Take advantage of your responsive design and only load the parts (Elements) of your website that make sense on smaller screen resolutions. Experiment with show vs. hide for mobile based on screen resolution to create a superior user experience for all users.
3. Avoid embedded feeds from social networks
When you show your Instagram Feeds on your website you are automatically slowing it down.
And you really should ask yourself why you want to include your social network feeds and pages on your website in the first place?
You work really hard to get visitors to your website. And when they get there you send them to your Facebook, Instagram or Pinterest pages? Was it not meant to work the other way around?
I do not see a good reason to include these types of feeds at all. But, if you insist, at least make sure that you exclude it on your mobile view.
You see, when you embed an Instagram feed on your website the following happens:
- A visitor arrives at your website and as you are showing your Instagram feed your webpage has to send a request to the Instagram website.
- Now your website has to wait for a response from Instagram and then retrieve and load all the data and assets to be presented on your webpage.
- When the data and assets are loaded your website can proceed to display your webpage.
You are in other words waiting for another website to load a webpage before you can finish loading your website to your visitor. By all means, if it is really important to you – go ahead. But I do not understand why you would.
And if you are still not convinced. I am sure you use your mobile when you visit websites. If you think about it you are usually greeted by a logo and a menu button to be followed by the main article text.
And then, way down below you find all the addons and widgets that used to be visible in the right hand column on a desktop computer.
Now, on a desktop a feed placed in the right hand side column will show when the page is loaded. But on mobile it is more likely loaded but never seen by the visitor.
I will stop now but please do think twice before you embed feeds on your website.
Always think Mobile-First and remember to always put the user experience first. If you do – and succeed – you will be rewarded.
