How to Implement a Mobile Friendly WordPress Site
Is your WordPress site slow-loading or displaying poorly on mobile devices? If so, the good news is there are a number of things you can do to ensure you're delivering a mobile friendly WordPress site that looks great and loads fast.
Because a huge portion of access to the web is via mobile devices these days, you can’t afford for your WordPress site to be difficult to use or slow-loading. In fact, if your website visitors find your site pages load in excess of 4 seconds, they probably won’t even stick around to peruse your site at all. Ouch!
In this article we’ll walk you through how to ensure your WordPress site is mobile friendly. From optimising the visual appearance of your site, to improving how your site loads, to selecting WordPress plugins that will actually work for you. So get ready to improve the mobile friendliness of your WordPress site. With a little bit of work, your site will soon be loading faster, looking better, and keeping your visitors coming back for more!
#1. Start with a responsive WordPress template
If you’re going to build a mobile friendly WordPress site, you need to start with a properly built responsive WordPress template. Now we’re not talking about the kind you purchase for $50 on a WordPress themes website, we’re talking about the kind of template which is professionally architected by a team of WordPress development experts that will take into account all the things we’re going to discuss in this article.
This includes items such as plugin count, load time, ease of update, and whether the template is optimised for smartphones, tablets and desktop computers.
Small to medium business who use WordPress as their CMS come to us and ask why their WordPress site loads slowly and fails to offer much in the way of mobile usability. In our experience, the answer usually comes down to the level of professionalism applied during the design and development phase of their site build. With this in mind, this is where you want to ensure you're appropriately allocating your resources.
Responsive WordPress design takes planning and consultation, and is not something you’re likely to get for $50 online. If you’re serious about delivering a positive cross device website to your customers, you’re going to want a WordPress template crafted from the ground up based on the latest release of WordPress (i.e. WP Twenty Seventeen). If you’re not sure if your template has been built this way, get in touch with a professional who'll be able to let you know.
#2. Test the speed of your WordPress site
If you’ve got your responsive WordPress site up and running, then it’s time to evaluate the load time of your web pages.
There are a number of great tools out there for doing this but for the purpose of this article we’re going to use one of Google’s tools called “think with Google”.
To do so, begin by entering your URL and clicking “Test Now”. We’ve used TechCrunch who are one of the world’s most prolific users of WordPress as an example.
Once your mobile friendliness test is completed you’ll receive three scores and a free report you can download as show below.
As you can see, even the one of the world’s most visited online news sites can improve their site speed, even when they have a strong mobile friendliness score. So how do you go about doing this?
The first thing you’re going to want to do is download your report and take a look at the actions that are recommended by Google to improve your mobile friendliness. If this is beyond your technical level, you can show it to your web development agency who will be able to help you prioritise items that will assist you to increase your mobile performance.
In most cases you’re going to want to focus on the first two items; mobile friendliness and mobile speed. The later is more difficult generally to improve but is the one that really counts. If your WordPress site loads fast it will be considered highly mobile friendly and likely result in the following:
- Increased user time on-site
- Increased page views
- Higher position in Google search results (SERP’s), and
- Enable you to build content rich pages which users are likely to find more engaging.
#3. How fast should my WordPress site load?
Mobile friendly WordPress sites will generally load in under 4 seconds. This may sound pretty fast to you if your WordPress site is content rich (i.e. has a lot of images and videos), but as important as your media elements are, they're no good if your users leave your site before they have the chance to view them.
With your think with Google report at your disposal, you should have a nice list of items you can look to improve upon over time. This will generally include items such as:
- Decreasing the number and file size of the images on your pages
- Leveraging browser caching, and
- Reducing server response times by upgrading your hosting
At this point your head may be spinning. After all, if you’re not a web developer why do you need to know what this all means? It’s important you develop a basic understanding of these elements so you can at least work to improve the mobile friendliness of your WordPress site and communicate to your digital agency what you're looking to achieve.
Customer analytics tool KISSmetrics has produced a great infographic on this topic which shows how page load times affect web page abandonment. As you can see below, page load times really matter.
#4. WordPress-specific mobile friendly tips and tricks
Once you’ve identified the common causes of poor load times and mobile responsiveness on your WordPress site, it’s time to really get your hands dirty.
WordPress plugins are generally at the top of our hit list at OSE when we’re engaged to improve the mobile friendliness of a WordPress site. Why? Because they’re built by all manor of developers and are not always properly tested and reviewed against criteria which are in your best interest.
For example, as useful as many of the plugins on the WordPress plugin directory are, many are not built with page load times nor ease of use in mind, are not responsive, and are not reviewed by WordPress themselves in the same way an app on the iOS or Google Play stores are. That being said, the plugins that are are real assets to you are a blessing, so when selecting your WordPress plugins we recommend keeping your plugin installation to a minimum and ensuring the plugins that you do install do not detract from the design and performance of your site.
Identifying which plugins to install can be tricky, especially when it’s so easy to get distracted by shiny new features which can add rich functionality to your site. In the case of WordPress development, we recommend undertaking a site performance review each time you install a plugin. This doesn’t have to be a major review, but should include a before and after review of the performance of some a sample page set.
An easy way to do this is using a tool like the Google Code Inspector. This tool which is available from within all Chrome browser installations let you check the load time of your pages and identify any slow-loading elements which may be affecting the responsiveness of your site. To check the load time of your site, see below:
- Right click on your page prior to installing your WordPress plugin
- Choose Inspect and navigate to the Network tab ensuring Disable Cache is checked
- Reload your page and you’ll see a nice waterfall model of each element loading within your page
From here you should be able to identify the load time of your page, and compare it with your load time and the number of elements being loaded after your plugin installation. Almost certainly it will be slower, you just have to evaluate the benefits of the plugin when compared to site performance.
To test the mobile friendliness of your design, you can do this by selecting the right-hand side of your browser whilst inspecting your code. You’ll notice that as you drag in your page will display the pixel width of your browser. Ideally your site should display perfectly when your screen resolution is:
- Greater than 799px wide: For desktop devices pixel dimensions greater than or equal to 800px wide are considered desktop viewports. This can include small notebooks, high resolution tablets such as the iPad Pro, as well as your laptop or desktop.
- Greater than 499px and less than 800px wide: This is the pixel range for most tablet devices such as iPad’s. Generally these devices provide screen resolutions in landscape and portrait mode between these resolutions.
- Less than 500px wide: If you’re looking to optimise your WordPress site for smartphones (which you should), then anything less than 500px wide will cater to these devices. Although some of the newer larger models push these device ranges, this is a good basis to test for.
Still looking for more ways to test the mobile responsiveness of your site? Another great way to do this is by selecting the “device icon” in Chrome’s Code Inspector. This actually let’s you load your page at specific page sizes giving you fantastic device simulation. You can even load your pages using exact pixel dimensions from devices such as iPhones and Google Nexus devices.
#5. Advanced optimisation tips for a mobile friendly WordPress site
If you’re really looking to step up the optimisation of your WordPress site for mobile devices, there are a number of things you can do outside of the conventional WordPress and web optimisation tips we’ve already provided. For example:
Consider implementing a Content Distribution Network (CDN)
CDN’s are a great way of loading images and other static files at lightening fast speeds. If you’re not familiar with what a CDN is, it’s basically a collection of geographically distributed servers designed to serve files to users at close-by locations.
A good example of when you may want to use a CDN is if a quarter of your traffic was coming from Australia and two thirds from the U.S. In this situation you could serve your Australian visitors static files from an Australian based server, and visitors from the U.S a copy of files from one of three servers based there. The obvious benefit of this is decreased server response time which ultimately results in faster more mobile friendly web pages.
If you’re looking for a really great CDN, we recommend Amazon CloudFront paired with S3 cloud storage. Our team of cloud experts can assist with this.
Upgrade your server to HTTP/2.0
We’ve all see the HTTP preceding web addresses in our browser bars before. But did you know there’s a new standard in town, HTTP/2.0?
The new standard for delivering content on the web has a number of benefits which you will definitely want to take advantage of if you’re looking to deliver a cutting edge mobile friendly WordPress solution. This includes:
- Decreased server latency
- Increased data compression
- An increase in the number of requests your browser can handle simultaneously, and
- Pipelining of web requests
What does this all mean? Basically more speed...and lots of it!
HTTP/2.0 is a relatively new concept developed late in 2014, however it’s uptake has been slow so far. This of course means there’s an opportunity for you to leap ahead of your competition and use this cutting edge revision of the HTTP 1.1 protocol to your advantage serving up your users with the best possible mobile experience!
Providing a mobile friendly experience on your WordPress site is a must if you’re going to grow and maintain your visitation over time.
WordPress is a fantastic CMS platform if used effectively, you just need to do so with the right knowledge at your disposal.
If you’re new to WordPress development or are looking to really transform the effectiveness of your WordPress site with a stellar mobile friendly user experience, feel free to get in touch with our WordPress development team for a free consultation.