5 Quick Ways to Mobile Site Optimisation

Posted on 20/08/2018 by Samantha in Optimisation, Website
Back To Blog
Mobile_site_optimisation

Having a fast website has never been more important than it is today. Especially among mobile site users. 47% of web users expect websites to load within or less than 2 seconds, and 40 percent of people are more likely to leave a site if it takes more than 3 seconds to load. Now imagine these same people on their mobile devices on the go, your site needs to load at lightening speeds to match the speed to match present day expectations. As a website and business owner, a slow website can really hurt your business. Having a sluggish, unresponsive mobile site will negatively impact your conversation rates and revenue. No worries, we’re here to help you with 5 quick ways to mobile site optimisation.

Testing Your Site’s Mobile Speed

Before going through the steps of optimisation you should test the load speed of your site on a mobile device. There are many easy to use, free tools out there and to get you started, check out these three:

  • PageSpeed Insights: is a free tool from Google that enables you to test your website quick and easy. Simply enter your website’s URL and the tool will analyse its content and generate a report on what you can do to speed up your website.
  • Pingdom: With this tool you can test your website’s speed and its overall performance. It also tracks your website’s performance history so you can make a better plan to continually optimise your site’s speed for users.
  • YSlow tool offers to test your website’s speed and gives advice on how to make your site faster. They also offer Chrome extensions that you can add to your browser to test your website’s speed.

1. Speed Benchmarks for Optimisation

Now that you have tested how fast your website loads, another diagnostic you can run is testing your site against your competitors. One way is to use ‘Which Loads Faster’ to compare your site’s loading speed against all of your major competitors. Aim to be the fastest of the pack.

Another way is to use the following guidelines:

Below 1 second = perfect

1-3 seconds = above average

3-7 seconds = average

7+ seconds = very poor

Now that you know where you need to be let’s help you get there.

a) Optimise the Speed

As we said earlier, the threshold for website load speed time is 2 seconds, and users have come to expect a certain caliber in load speed time for websites. The aim you want is less than 1 second. In order to speed up your website there are a few things you can do just to affect the load time. Search engines like Google expect your site to load quickly as well and it directly affects your ranking in their mobile first index. How do you directly affect speed?

b) Optimise Images

Un-optimised images can be very heavy, and as a result use a lot of server resources and take longer to load. They ultimately slow down the overall page load time. Images and graphics take up a lot of bandwidth, thus it is crucial to have them adjusted and resized to ensure quick load times. To optimise your images:

  • Reduce the size of your images without losing the quality. Do this by using a compression tool that compresses your images without losing their pixel quality.
  • Use a tool for Photo Optimisation: Kraken (for everyone), Optimizilla (for everyone), WP Smush (for WordPress users), EWWW Image Optimise (for WordPress users).
  • Use CSS Sprites: A sprite is a single file that contains all of your images. By using CSS sprites you can greatly enhance your web page load time.
  • Use JPEG image formats, while PNG are great, old browsers do not support them, so ensure that all your users are covered by sticking with JPEG.

 

c) Minify Code CSS and JavaScript

Simply remove all unnecessary characters from your source code without damaging or changing its functionality.

 “You can also Optimise your CSS Stylesheets for faster loading.”

Make sure to aggregate and clean your CSS. Cascading Style Sheets make websites much more efficient because they allow the browsers to cache style-related information from the .css file directly, removing the need to read that information every time a single page is loaded. Even if Style Sheets are naturally more efficient than HTML tables you can still Optimise the CSS code to make your website cleaner and faster.

CleanCSS is an online tool that will merge similar selectors, remove useless properties and remove the whitespace from your code. There are many minifying tools you can try, but you may want to start with a free and very easy-to-use WillPeavy plugin that can help you quickly minify HTML, CSS and JavaScript files. BWP Minify (Better WordPress Minify) is also a great plugin that can help you combine and minify your JavaScript and CSS files, but it’s a plugin for WordPress only.

d) Leverage Browser Caching

Enabling browser caching can increase your website’s speed significantly and give your users a more rewarding experience. So, what exactly is caching? Well caching refers to storing static files, such as HTML documents, images, media files, CSS, php and JavaScript files for easier and faster access. This ensures that the database does not have to retrieve each and every file each time there is a new request. The more request made to your server, the slower your website to loads.

e) Reduce Redirects

Make sure you have a minimal number of redirects. Too many redirects slow down the user’s experience, as it causes the site to reload to the redirected page.

2. Don’t Block CSS, JavaScript, or Images

During the early days of mobile design, it was necessary to block these elements in order for faster loading. However, now that smartphones and other mobile devices are built so powerful, it is not necessary to block these elements. As we said above, when using them they should be Optimised for best speeds. Keep your code minified and use css sprites for images.

3. Mobile Design

One of the major contributors to mobile Optimisation is the actual mobile website design. Just because your website is available on mobile phones doesn’t mean it is mobile friendly or responsive. Mobile web design is an art, and a responsive, user friendly page is a must if you want a competitive edge. Here are some ways to use responsive design to enhance your users overall experience and your site’s load time:

  • Never Use Flash: Since mobile uses can’t use flash on their phone you need to remove those elements from your design. Instead, use HTML5 or Java to add those cool elements. Beware though, do not overdo it with Java. Keep your design clean, sleek and simple. You only have a few seconds to convey what your company is about.
  • Get rid of Pop-ups: Remove even your subscription e-mail pop up on your site’s mobile version. Lead generation is great, but if your mobile site is bogged down with too many pop-ups your users will become frustrated and leave. This will hurt your business in the long run. So just stick to pop-ups on your desktop version of your site and leave them out of the mobile version.
  • Design for “the finger”: When considering your mobile site design, think of the thumb and finger. Since your mobile users have to navigate with their finger, make sure your design is “finger-friendly.” Accidental taps are annoying, so make sure they can scroll and tap with ease.

4. On-Page Optimisation

Keep your titles and page headers concise and to the point. When it comes to mobile search engine result pages, you don’t have much leg room and so being short, simple and sweet helps a search engine read your site better.

The GoogleBot will understand your site better, and of course your users will too. This will translate to a higher click through rate, and improved rankings on search engines.

5. Local Optimisation

If your business is local and includes a storefront along with the online store, localising your site for search engine optimisation is important too. Mobile search is crucial for businesses looking to drive foot traffic into their stores.

Here’s how you can drive your mobile users to your local store and increase mobile visibility:

  • City and state/province/country in the title tag
  • City and state/province/country in the H1 heading
  • City and state/province in the URL
  • City and state/province in content
  • City and state/province in the alt tags
  • City and state/province in the meta description
  • Business Name, Phone and Address

By taking action now, you can help make the case for your site and improve your visibility in mobile search.

Conclusion

Ensuring your mobile website is performing at optimised speed is crucial to your overall user experience, traffic, and revenue. Speed up your site to less than 1 second. Continuously test your website speed and improve your site’s coding regularly. Keep SEO in tip top shape. Make sure you provide your website visitors with a seamless experience by improving your website speed and standing out from the crowd.