How To Turbo Charge Your Mobile Website: Top 5 Optimisation Tips (Part 1)

In a previous blog we covered the fundamental aspects of creating an engaging mobile responsive website. We’ve also looked at some techniques and tools that can be used to create an immersive, responsive and well optimised mobile website. Over the next two days we’ll be covering top tips for turbo charging and optimising your mobile responsive website. One of the biggest factors affecting the performance of your mobile website is it’s page loading time. People browsing for products and services on the move, via mobile devices increasingly demand information at a lightning quick pace. So let’s make sure your mobile responsive website is well optimised and capable of loading super fast via mobile devices.

[responsive_youtube http://www.youtube.com/watch?v=wY3F5MJxEco]

Desktop computers and laptops still have an advantage over mobile devices and tablets in terms of page loading times. Here are some of the factors you need to consider when optimising a mobile responsive web layout:

– Network connections tend to be slower
– Less browser cache memory
– Slower parsing of HTML and Javascript

In 2012, Google kindly launched a great tool for testing the speed and design of your mobile responsive website. This will give your page a speed score and make useful recommendations on how to increase the performance of your mobile website. The following tips represent what we believe to be best practice when designing, developing and optimising to create super immersive mobile responsive websites:

1. Use Media Queries

Media queries are stylistic rules that allow you to define which content to show to which devices. If used properly these can used to greatly improve the load time of a mobile site. For maximum speed media queries should be designed to only load what is required for each device resolution. This is exemplified on the waracle website where media query rules serve only the images required to mobiles but load more images in for devices with larger resolutions such as desktop computers.

2. Use High-Performance CDNs (Content Delivery Network)

Once your site HTML loads, any device must then load subsequent images, CSS and javascript files. Massive performance increases can come from using ultra fast CDNs to serve static files. This can seem daunting at first, so this is certainly something the Waracle technical support team can help with and can have vast improvements on page load speeds by serving these files from the server closest to the location where the website was loaded. For example, if a website is loaded in france and the static files are on a cdn. A server in france would be used to serve said files thus reducing the load time significantly.

3. Combine Stylesheets and Scripts

When a mobile device renders a website it has to load each script & CSS stylesheet as it encounters them before the device can render the website. Load times can be reduced by combining these files into as few files as possible.

4. Optimising Scripts and Stylesheets

Stylesheets and scripts can optimized to increase load times by using compressions scripts such as JSmin and Yahoo YUI Javascript compressor. You can see this exemplified on the waracle site. This technique can be taken further by serving compressed files to the browser however this can have adverse effect on some browsers and should be used with caution.

5. Lazy Load Images

Lazy loading is an image loading technique which should be used on images below the fold of the website. This will significantly reduce the load speed of the page in question by only actually loading images as the user scrolls them into view. This again is exemplified on the Waracle site itself.

If you’re looking for a free SEO audit for your mobile website, contact Waracle today. Here at Waracle, we understand the shift that is happening towards mobile devices. as such it’s fundamental your mobile website is well optimised and capable of loading pages quickly for your potential customers. For the whole month of March we’re offering free mobile SEO audits and diagnostic checks for your website. We’ll outline how your site currently performs and make suggestions on ‘quick wins’ that can be used to dramatically enhance your mobile site performance with minimal effort.


Share this article

Subscribe to Our Thoughts