{"id":813,"date":"2015-10-14T23:56:08","date_gmt":"2015-10-14T22:56:08","guid":{"rendered":"https:\/\/www.jonathonmills.com\/?p=813"},"modified":"2015-10-15T00:00:10","modified_gmt":"2015-10-14T23:00:10","slug":"5-ways-to-improve-your-site-on-mobile","status":"publish","type":"post","link":"https:\/\/www.jonathonmills.com\/5-ways-to-improve-your-site-on-mobile\/","title":{"rendered":"5 ways to improve your site on mobile"},"content":{"rendered":"
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.<\/p>\n
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.<\/p>\n
The second way to optimise, is to run your jpegs and pngs through some sort of image optimisation software. For pngs, tinypng<\/a>\u00a0is great. For jpegs, You can use ImageOptim<\/a> for Mac or FileOptimizer<\/a> 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.<\/p>\n 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:<\/p>\n 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!<\/p>\n2) Minify content<\/h3>\n
3) Reduce the number initially loaded files<\/h3>\n