How To Optimise WordPress Site for Mobile
Ever since 2017, mobile has been generating more traffic than desktop. The number is only going to go higher. If your WordPress website isn’t optimised for mobile phones, not only will your general visitor experience be poor, you will also have a hard time ranking on Google.
Google is a platform for the people. It exists to connect people with websites that provide value, instantly and efficiently, regardless of the device being used. As per Google’s mobile-first update, that came out in 2019, the search engine will “predominantly” consider mobile versions of websites, while indexing and ranking them. This is huge because it means that without a mobile-friendly website, your chances of ranking top of page for Google are slim-to-none.
Does the above worry you? Wondering where to start? Here are a few tips and tricks that you can implement right now:
Deliver a mobile-friendly experience
Most people recommend getting a responsive WordPress theme and calling it a day. But that’s not all you need to do. Yes, a responsive theme is a must-have, and also the perfect first step. It adapts and formats the content of your website, depending on the visitor’s screen size. E.g. if someone visits your website on a smartphone, your homepage’s design (font size, dimensions) will automatically be adjusted to fit on the small screen size.
Your WP theme needs to be responsive. There’s absolutely no denying that. But there are many other aspects of mobile experience that you need to focus on.
- Don’t flood mobile users with too much information. E.g. if you own a restaurant, ensure that mobile visitors get access to your menu, price lists, hours, and location as soon as the website loads. Desktop users may have more time to check out your photos, blogs, or sign up for your newsletters, but not mobile visitors.
- Don’t use full-page pop-ups. Even though pop-ups are a great way to engage with desktop users, they can be detrimental to your mobile experience. E.g. if someone visits your website to know what’s on the menu, and you greet them with a full-screen pop-up that seems impossible to close, they will probably just close the tab instead.
Implementing device-specific design requires some tweaking in the website’s source code. Using a built-in WordPress function, namely wp_is_mobile(), you can identify whether the website is being accessed from a mobile device, and write customized code accordingly.
Optimise images
A report from Google revealed that 53% of mobile visitors will abandon your webpage if it doesn’t load within 3 seconds. That should be reason enough for you to ensure lightning-fast load times. One of the main contributors to slow page speeds are images. No matter how fast your hosting provider’s servers are, if you have un-optimised images it will cause your website to load slowly. This means image optimisation is very important.
Since version 4.4, WordPress creates different sizes of your images to use the best size relevant to the user’s device (desktop, mobile, or tablet). So, if you are still running an older version, this can be a great reason to upgrade.
However, this doesn’t mean you should just upload any images, it’s best SEO practice to upload images that are already optimised. Having the original image well-sized and optimised beforehand ensures that the rest of the images WordPress uses will also be properly optimised.
How do I resize images without losing quality?
Manually: Adobe Photoshop is the best tool to resize images without losing any quality. Watch this helpful video to quickly batch resize photos in Photoshop. If you can’t afford Photoshop, Adobe also offers a free online resizing tool.
Plugins: You can also try any high-rated compression and optimisation plugins like Smush, that will optimise your images, without hampering their quality.
How do I optimise images?
It’s strongly recommended that each web page is no bigger than 2 MB in size. This means your images need to be compressed to under 100 KB, or it will make your web pages too large and load too slowly for most web visitors.
TinyJPG or TinyPNG are great free online compression tools.
Follow Google’s mobile-first best practices
There are several sections in the Google Search Central documentation that mention best practices for mobile optimization. Here are a few:
- Put the same metadata on both versions of the website. E.g. your descriptive page titles and meta descriptions should be the same for mobile and desktop versions.
- Use high-resolution images. Make sure that the images are not too small for mobile screens.
- Use descriptive alt-texts for your images on the mobile website, just like you do for the desktop version.
- Place videos at an easy-to-find position on the page. E.g., don’t place a video at the bottom of your mobile site. This will force the visitor to scroll down too much, and will also hurt your video’s rankings.
- For every desktop version that serves different content, there should be a mobile equivalent.
- Error page statuses should be the same across both versions. For example, if a page on your desktop site serves content normally, but the mobile site’s version of the page returns an error, then the page will not get indexed.
Read about more mobile-first best practices.
Enable Google Accelerated Mobile Pages (Google AMP)
Google AMP is an open-source project, aimed at making websites load faster on mobile phones. Many experts believe that AMP can not only enable you to rank higher on Google, it can also enhance the experience for users with slower internet connections.
Here’s how you can enable it for your WordPress website:
- Log in to the WP admin dashboard, and go to the plugin installation section. Select Add New.
- Search for AMP, and install the plugin authored by Automatic.
- That’s it. You can now go to Appearance > AMP to see how your website appears on mobile devices.
Use Google’s mobile-friendly test tool
Google’s very own mobile-friendly test tool is a great, free way to check how mobile-friendly your website is. The tool simulates a mobile device, loads your website’s elements for it, and reports if it encounters any issues.
You can also see screenshots of how your website may appear on a mobile device, allowing you to spot any formatting/alignment issues. Lastly, if all is good, you will get the all-important seal of approval, from Google itself, that your page is mobile-friendly.
Use a good hosting provider
Last, but certainly not least, invest in a reliable hosting service. You can implement thousands of measures to optimise your WordPress website, buy multiple themes and plugins to speed it up, but if your host is sub-par, all your efforts and money will go in vain. When weighing your options, look for hosts which:
- Have servers specifically fine-tuned to run WordPress
- Have a proven track record of running WordPress websites. Make sure you go through any available reviews and testimonials.
- Have some pre-installed optimisation plugins like LiteSpeed Cache to ensure fast load times.
- Have plans that allow unlimited incoming traffic.
- Have ample storage space (at-least 20 GB) and RAM (at-least 2 GB).
At HOSTAFRICA, our LiteSpeed WordPress hosting servers incorporate all of the above features, as well as many more. E-commerce support, thousands of available plugins and themes, incremental backups, and an extensive feature set; all make HOSTAFRICA a prime choice for WordPress hosting.
Conclusion
Ensuring that your WordPress website is optimised for mobile is a need of the hour. We hope this article helped you in optimising yours!
