A mobile site and how it works is becoming more and more important. Google now split mobile and desktop rankings into two separate mesaurements, and not only that, but the weights of attributes are different. For example, poorly optimised images on a desktop machine hold a far smaller penalty than it does on mobile devices. Here’s 5 relatively things you can do to improve your site on mobile, and score higher up in Google.
1) Optimise your images
There’s basically two ways in which to do this. The first, and something anyone with a computer can do, is to simply reduce the dimensions of an image. If your logo is never going to be bigger than say, 200 pixels wide, is it really necessary to have uploaded a high res logo that’s 2500 pixels in width? The file size difference between the two is huge, and there’s absolutely no advantage to using the high-resolution version. In this example, it would be acceptable to use a version of the logo that was double the size i.e. 400 pixels, as this would scale down nicely for high-res displays. It’s not the best way to do it, but you certainly save your users a lot of unnecessary time downloading a huge image.
The second way to optimise, is to run your jpegs and pngs through some sort of image optimisation software. For pngs, tinypng is great. For jpegs, You can use ImageOptim for Mac or FileOptimizer for Windows. These software strip out unnecessary data from the images, reducing the file size yet maintaining the quality (most of the time!). Be sure to make a backup of any images before optimising, as there are rare occasions where the image can become distorted.
2) Minify content
What’s happening here is really simply. Spaces, lines and excess characters are removed from a file in order to again reduce the file size. You’re maybe only talking about saving 10 or 20kb from a file, but depending on the number of files, and the number of downloads, this will all add up, particularly when combined with reduced image sizes. This also leads on to:
3) Reduce the number initially loaded files
Every time your site needs a file, it has to make a request to load it. Every one of these requests takes time, and other resources can’t load until this request is complete. Make sense? It’s best then to try and reduce the number of files (CSS & Javascript) that your site is loading in order to function. These files tend to be loaded in the head of the site, and there are numerous ways you can do this, such as combining the files or moving them to the bottom of the site, so that content and styling is loaded first. I appreciate this could be beyond a lot of people’s knowledge on how to do it, but knowing you need to do it is half the battle!
If you need help this one, then drop me an e-mail.
4) Ensure that links are the correct “tap size”
As discussed in a previous blog, using a mouse cursor to click, and using your finger to tap are two very similar, yet technically different gestures. A mouse cursor is very precise, and allows you to select a small, specific area on a site. Your finger doesn’t have the same finesse, so the tap area is required to be a lot larger for links, buttons and anything really that users will interact with on your site. The golden number here is 48 pixels, but bigger than that is obviously not an issue! Smaller, and you’re not really covering all bases for users.
5) Avoid too many plugins!
This is one that can be difficult to avoid if you’re trying to do a site yourself, as usually these plugins are a good addition of functionality without any technical knowledge requirements. However, every plugin you use will have at least one stylesheet, and at least one javascript file. The more of these plugins you use, the more stylesheets and JS files you’re loading into your site and the slower and slower it becomes.
People ask me regularly why they should pay for a site when they can use a free service, and this is one of the reasons. A free service needs to cater for everyone, and as such, loads in every plugin they have available. This makes a site slow and cumbersome, and will ultimately penalise you with Google. This site for example loads absolutely no plugins on the front end of the site, loads no javascript in the head and only loads one CSS file. This makes it quicker to load on all devices, but it’s particularly important for mobile.
If you think your site is suffering from one or more of these issues, then get in touch and we can discuss how we can fix them together.
