(Updated Jan 2023)
There are various methods to optimize your site for mobile devices including,
- Using a CDN,
- reducing image sizes,
- removing unused plugins and themes,
- reducing ‘calls to the server’ more generally
- using a cache plugin,
- changing themes or removing specific design aspects,
- upgrading your server,
- reducing redirects,
- enabling gzip compression,
- minifying resources (HTML, CSS and JS),
- and removing render blocking Javascript and
- separating unused CSS and JS from the file son the page to further reduce page size.
I’ll run you through them all in this article (video). All methods used are 100% free to use – at least in the basic versions.
Watch a Speed Optimization Process instead:
Table of Contents:
- Why make your page load faster on mobile devices?
- How to analyze your site for further optimizations?
- Methods to decrease your page load time on mobile
// Why make your page load faster on mobile devices?
Over 50% of traffic is commonly from mobile users these days. More like 70% on the sites I run. As such you need your pages to run very fast on mobile. If you make them fast on mobile a lot of that work will also translate to the other screen sizes so you get a lot of bang for your buck by optimizing for mobile devices.
// How to analyze your site for mobile speed optimizations?
Mobile speed specifically is better to focus on that speed at desktop because a mobile page load will always be slower that a laptop or desktop page load. This is because the internet connection is often better on the former (having cable or wifi access) and faster processors to handle the size (in MBs or KBs preferrably) that the page is. In my experience you need a page under 1MB to score well in mobile speed tests.
With that in mind I prefer to use Google PageSpeed Insights to test specifically for mobile. It has some drawback but thats why I cross reference with Pingdom Page Speed Tools. I will these two in the below analysis to measure our page speed reductions as we implement page speed improvements.
NOTE: There are some further notes below on why Google Page Speed Insights is not always the best tool to use and why sometimes I prefer Pingdom.
// Methods to decrease your page load time on mobile:
Using a CDN:
A Content Delivery Network (CDN) stores files of your site around the world to make them load faster (because your user has a version of the site files closer to their physical location to load) but also enables some server level settings around compression, expire headers, minification and other things which are very useful for site speed.
Some of these settings are possible to do while editing your .htaccess file or using plugins but a CDN is a more effective way to do this.
NOTE:
- Some of the other suggestions below are done through the CDN which is why I’m doing this part first.
- It also requires that you change the NameServers for your site and wait for them to propagate before being able to use it properly.
- Your site will be inaccessible for maybe 30 minutes (up to 24 but usually only a few). Do it when you are about to go to sleep or there is low traffic on your site as you need.
I like to use set up Cloudflare CDN with WordPress Sites or watch this video on the same topic.
Images:
The most common problem with WordPress sites being slow are images. their size, use and quantity. Try to remember that, the images you use ultimately must be downloaded by your browser and the more of them you have and the larger the file sizes the more you are asking your user’s browser to download. Unnecessarily large or a lot of images will therefore slow your site down.
So, to tackle this you can,
- Use this guide I wrote to analyze if images are a speed issue for your particular pages.
- I like to reduce the image sizes to something appropriate. Anything over 1280 px wide is probably overkill for most scenarios.
- Then I’d use a compression plugin like tnypng to do auto-compression on upload to further reduce the images.
NOTE: My website is not very heavy on images so this is not a great factor for me however if your site is you may want to use a specific image CDN for these as well. For eg Cloudflare, which we used as a CDN above, has some specific options around hosting Images which will be of interest to you.
Removing unused plugins and themes:
This is covered in the above point as well but the theory here is that plugins add files to pages indiscriminately and if you have plugins which you no longer use or don’t need essentially then they add to the amount of files to be downloaded for each page and as such slow it down your pages unnecessarily. The Asset Clean Up Plugin is a further plugin (ironically) which you can use to help.
Reducing ‘calls to the server’:
Using the Pingdom Tools analysis described here, you can do the below in order to reduce the number of files (CSS and jQuery by your site),
- Remove any un-used and/or unnecessary plugins as these could be adding additional files to the page being loaded which are not necessary.
- If the JS and CSS files are coming from necessary plugins but these files are not needed on the particular page you’re trying to speed up then you can use Asset CleanUp Plugin to selectively or in bulk remove these.
- The above clean up will combine certain CSS and JS files into one also so this will further reduce the requests per page.
- Check out the video below for detailed instructions on reducing calls to the server with Asset CleanUp Plugin.
Caches:
A cache essentially pre-packages and pre-processes your pages such that they don’t have to be done ‘on the demand’ as the user loads the page. Instead a pre-packed (minified and compressed programmatically) and pre-processed HTML version of the page can be returned instead and much faster than having to load each page on demand. If you hear phrases like, minification, compression, static site etc these are referring to caches often times.
The downside of caches (sometimes depending on the cache) is that because they are prepared earlier they sometimes don’t work well for sites which use cookies. Here you can find a list of cache plugins which are able to handle this and other dynamic situations.
Caches, different plugins and CDN’s sometimes cross over in terms of functionality. I’m inclined to lean towards the CDN’s for things like compression and minification but serving a static page can really help speed up your page speed in certain scenarios which is often done with a plugin in WordPress..
Page Design:
If your page has some features which are slow to load or you are loading a lot of data on page load then re-designing the site to not load so much data and or removing the slow functionality is a great option.
I wrote more about re-designing a page for speed, and if you need to do AJAX in WordPress in the course of redeveloping the page then this is also very useful.
Reducing redirects:
If your page or many of your pages has redirects then this will further slow down your site. Sometimes redirects are unavoidable and very necessary but try to avoid them by thinking ahead.
A good practice is to, from the beginning, use short URL segments so you don’t have to rename them later which would cause a redirect. By default, when creating a new page or post, WordPress will use the title you create which may be longer than recommended. You can however edit this in the page or post settings by navigating to the right hand side panel and under ‘Post‘ looking for the ‘permalink‘ section. You can change and rename from there and save.
For pages and posts where I do need a redirect I use Redirection Plugin described here to automatically create them for me as I rename pages and posts. Saves a lot of time.
Enabling gzip compression:
gzip compression is a setting (often on a server, but could also be done via a plugin or directly in the htaccess file) which compresses the files of your site further so when they are delivered to your users browser they are slightly smaller.
I suggest the best place to do this is from a CDN which was covered in a previous step. Cloudflare can do this for you. It’s also possible to do this via your Host and .htaccess but these are less effective.
Minifying resources (HTML, CSS and JS):
Minifying your HTML, CSS and JS is useful to save small amounts of space in the files which your users browser receives from your host can be done in several methods for eg by using a plugin or using a CDN.
See the above steps for how to enable these.
Upgrading your server:
It’s possible in some cases that your hosting account needs upgrading. If your site is particularly inefficient or deals with a lot of data processing or has a lot of traffic then some extra processing power could be just the thing.
You can upgrade your server account with your host. If you need (or want to upgrade to a new server company) hosting then check out our ‘WordPress Host Plan’ Selector tool which allows you to easily sift through the various hosting plans offered by the various companies because hosting plans can be difficult to compare easily and gets complicated.
PROTIP: In extreme cases of server overload you may see an error to do with RAM on your server or a timeout with the database.
Separating unused CSS and JS:
Its possible to understand which CSS and JS on the page is being used and which isn’t with Coverage extension in Chrome and, depending on your technology stack – we are in WordPress, we can look to remove unused CSS and JS from the page to further reduce the size of the page.
WordPress Software in general:
Page speed or a portion of it also depends on the architecture of the software you are using. As this page is about WordPress in particular I’m not going to delve to deep into this as to alter this would mean using a different website software which is outside the scope of a WordPress Specific article.
Google Page Speed vs Pingdom Tools:
Google Page Speed is not my favorite way to analyze site speed. It’s useful, especially for mobile page speed analysis, but most people take its advice as prescription when it should be considered a menu of possible high level aspects to look into.
An example is one common suggestion from Google Page Speed being, ‘remove render blocking Javascript’. Technically speaking this means something like, “this website has javascript (like Google Tag Manager or Google Analytics) which is being downloaded from the server (via your browser) before any of the site has been ‘rendered’ or printed to the screen (ie so you can see it and use it)“.
Google is saying if you removed these from rendering before the user is able to see and use the page then the user will have the page loaded faster for them and you’ll get a better score on their tool. All wins right? Well sorta.
The thing is that SOME JS being loaded before rendering the page is necessary on the majority of modern websites. For example, where do you think your Google Tag Manager (or analytics) and perhaps a few other scripts (JS) are required to be loaded from? They are being loaded in the <head> tag of your site’s HTML and hence are being loaded before the site is shown to the user. If thats the case then this rule from Google Page Speed will trigger for most sites and won’t stop triggering until you remove them.
My point here is to say that take the suggestions from Google Page Speed with a grain of salt. Take notice of them but don’t make it your goal to have your WordPress site be free of warnings. Certainly if there are non-necessary render blocking JS in your head tag then move it (to the footer as is best practice) or remove it (them) but you don’t need to take it to the extreme.
What I see with my clients is that they get upset if the warning doesn’t go away completely and they get upset that the number is not high.
Pingdom Tools:
With the above considerations in mind I tended to go towards Pingdom Tools as a preferred method of analyzing page speed.
What I like about their analysis is it’s more practical and actionable and you get an actual page load time with which is get some sort of speed gauge and not just a mark or out 100.
