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.
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
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)
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
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.