Never mind the Width, Feel the Quality…

Mobile Friendliness 89/100

This article isn’t to be confused with an earlier piece on this website relating to Tailors Squares, instead I am looking at documenting your blog to keep it looking wonderful and to a consistent quality, and ways to not use up all the bandwidth and to keep it loading quickly on your visitors browsers. 

…but first some assumptions: 1. You can access the files that make up your website by sftp or similar, 2. You know your way around the WordPress admin area, and 3. At least for the sake of this article, please assume that this website looks wonderful.

I’ve done the stuff at the Google Garage and I’ve found that this site has a good score for mobile friendliness but could do with improvement to the speeds it loads – especially on mobile devices. At this point I’d suggest not to get too excited about the scores at the Google Testmysite as the score I get for Mobile Friendliness has changed between 99/100 and 89/100 in a matter of hours and then down to 75/100 after a couple of weeks without me having changed anything! I’d say that anything green is probably OK and its worth comparing against a few other websites that you use. I was advised that the following should be fixed if I wished to to improve the score: 

  • Enable Compression
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Reduce server response time

This is where WordPress itself can be useful – a quick search will identify a number of plugins that will claim to help 

With so many plugins available it is going to be impossible for the developers of them to ensure that each will work fully with each other which sometimes causes further problems. After installing new plugins, it’s always important to check that  everything is still working.

…and this is why it is a good idea to ensure that you keep a record of everything:

Enabling compression on your website seemed pretty straightforward. If this is enabled page requests are compressed and sent to the client where they are then uncompressed and rendered. Handy to keep the bandwidth down, especially for those on slower connections or where charges may be incurred by the amount of data downloaded. A quick search showed an easy way to enable compression by adding additional code to the .htaccess file in the website root. This resulted in a 500 server internal error being generated and the website becoming completely un-accessible. By having details of my SFTP account to hand I had access to the website host I was quickly able to restore the previous file and get the website back online. It turns out that the search query had to be a little more specific and I needed to include the name of my website host. The result was that I needed to include some php code in an ini file in the root and then compression was enabled. I did, however, then load a plugin to check that compression is enabled. Phew.

There is an additional issue with compression, it’s easy to take pictures and load them directly onto the media library for use in pages and posts, however most pictures are much bigger than is actually needed to show on a website. If you are unable to reduce the size of the image files before you upload them plugins are available to compress them after they’ve been loaded. It is, therefore, a good idea to keep copies of the original image files elsewhere in case they are needed for anything eslse.

 

Eliminating render-blocking JavaScript and CSS in above-the-fold content. What? Well, in order to make this website look as wonderful as it does (see assumption 3 above) I make use of quite a few WordPress plugins. Many of these will add additional code either at the server or client side which has to run before the web-page starts to render and, the longer it takes for the page to render, the slower the page load time is, and the lower the score that will be achieved. This is where another search will identify many plugins that claim to help with this  – finding one (or ones) that suits you will be a matter of research and trial. I have found that Autoptimize (to optimise HTML, CSS and JS) seems to be working for me although there was initially a clash with the Slickr-Flickr plugin, which only resolved when the Slickr-Flickr Galleria Theme Load Method was changed to Dynamic. I also loaded WP-Smush to compress pictures added to the media library. There are probably plenty of other plugins that do similar things – these were chosen largely because they had been recently updated, were known to be compatible with the current version of WordPress and had good star-ratings.

 

Lastly we come to Reducing Server Response Time. This is caused by the amount of bandwidth available to the server – both in the processing power of the web server and the size of the wires connecting it to the internet. This is largely down to the hosting service you use. One way to improve this is for the website files to be distributed to a number of different servers across the world so that requests for pages will be passed to the nearest server, using a system such as a content delivery network (CDN). I discovered that whilst my web-host does offer this service, it would have cost me more. In this instance I will have to live with problem and hope that the other actions I took above will improve the speeds sufficiently. 

 

Whilst making these improvements it can be easy to end up loading and activating plugins which turn out to be unnecessary. It is good to keep a list of all your plugins and why you added them. Sometimes I have found that I have ended up with two different plugins being loaded that do the same thing. At best this causes additional and pointless overheads whilst at worst it can cause unstable behavior to the website and even a crash. If in doubt deactivate the plugin  and then check to see if everything still works OK. If all is OK, delete the plugin. Keep a note of what you have loaded and what you’ve removed – it might be useful later. It’s also worth keeping a watch on your plugins to see if they are being updated – one that was brilliant 2 years ago may end up not working so well after a number of WordPress updates.

In its simplest form, keeping a spreadsheet of plugins and a folder containing recent backups of the WordPress database, along with a copy of your media files, should help enable you to get back up running should the worst happen, however, in addition to keeping a note of why you have installed each plugin, also include what changes you have made to the default settings of each plugin (where applicable).

When your website is all up and running nicely it may be a few months before you look at the settings in admin area again – It’s surprising how quick it is to forget why everything is set up the way it is…

Last, but no means least, make sure you regularly apply the updates to WordPress and your Plugins  – there are a lot of bad people out there who would love to take over your website – it’s worth looking to see if there are updates waiting to be installed on, at least, a weekly basis.

To help maintain the quality of this site, I invite feedback from my visitors

The following links were correct at the time of publication

Google Digital Garage – Boost Your Digital Knowledge

Test how mobile-friendly your site is

WordPress.org