Recently I attended the Google Partners Academy Bootcamp for Mobile Sites. The conference took place at the Viaduct Events Centre in Auckland under the guidance of the knowledgeable Benjamin Mangold, co-founder of Loves Data.
The goal of the day was to come away with a Google Certification in Mobile Sites and have a better understanding of the importance of optimising websites for mobile use.
As the use of mobile devices to surf the web is growing at an astronomical pace, the importance of understanding how to optimise websites for mobile is becoming more and more important. Every year people are spending a significant amount of time on mobile devices & tablets and a lot of websites still aren’t designed for this type of use.
Matching User Expectations
These days user expectations are high, time is important, and with constant advancements in technology, users expect results instantly.
The following statistics clarifies this importance –
- In a Google poll, the top frustration for users when browsing the web on their mobile device’s is waiting for slow pages to load.
- 60% of mobile users expect mobile websites to load within 3 seconds.
- 75% of people will abandon a mobile site if it takes longer than 5 seconds to load.
- Mobile pages that load 1 second faster see up to 27% increase in conversion rate.
Optimising for Mobile
In simple terms optimising for mobile ensures your website performs just as efficiently on a mobile device or tablet, as it does on a desktop.
Mobile optimisation looks at site design, site structure and page speed. Screen sizes are always changing across desktops, phones and tablets so it is vital your website can adjust accordingly. Implementing a ‘responsive design’ (Google’s recommended design pattern) will allow your website to adapt to a user’s device and the ability to render display depending on screen size.
Have you ever been browsing a site on your mobile device that doesn’t scroll properly? Loads slowly? Or has a button that doesn’t work? A poorly optimised site will severely impact the conversion rate and result in a poor user experience.
Improving Site Speed
The first step to better results is to reduce the load time of your mobile site and improve the speed.
Some useful tools to get started are –
- Chrome DevTools Network – this tool will help you understand why a page loads slowly
- WebPagetest.org – allows you to run performance tests from a variety of networks and host locations to see how your site is performing.
Targets to focus on
- Speed Index: below 3000
- Total requests: 80 – 100
- Page weight: less than 1MB
Optimising the Critical Rendering Path
The Critical Rendering Path is the sequence of tasks the browser performs to first render a page on the screen, i.e. to download, process and convert the HTML (content) CSS (style), and JavaScript (behaviour) code into actual pixels, and produce them on the screen.
To deliver the fastest possible time to first render it is best to minimise three variables
- The number of critical resources
- The critical path length
- The number of critical bytes
Reducing Page Downloads
The more resources or assets – text, images etc a page has, the longer the page will take to load. To improve page loading time, consider –
- Eliminating Unnecessary Resources.
Evaluate whether the resources (such as text, images & fonts) are providing sufficient value. Remove them if they are not i.e. have you measured how many users view multiple photos in the carousel on the homepage?
- Compressing Existing Resources
Use compression techniques to minimise the file size of the resources being used.
- Image Optimisation
Images are often responsible for the most bytes when being downloaded on a webpage. Re-sizing images, using vector images and removing metadata can all help to reduce bytes being loaded.
- Simplifying Web Fonts
Monitor font use. Don’t use too many fonts on your pages and minimise the number of variants used. This will result in a much more consistent and faster experience for users.
- Leverage Browser Caching
The ability to cache and reuse previously fetched resources. Caching occurs when the browser stores local copies of web resources for faster retrieval the next time the resource is required. Ensure you instruct the browser on when and how long the browser can cache the response.
Mobile Site Design
The best user experience is going to come from a mobile site that not only loads fast but is easy to use.
Consider the following design aspects as a list of best practices for optimising the design of your mobile site.
- Feature a primary call to action button in the most prominent space.
- Use a shorter menu with distinct categories.
- Users expect that clicking on the logo will navigate them to the home screen.
- Site search bar should be at the top of the home-page.
- Make sure site search returns the strongest results first.
- Allow users to visit your site without registering for an account.
- For forms minimise the number of fields required.
- Ensure your call to action stays in the same browser window.
- Remove the default zoom – this can really affect the layout of the elements on your site.
- Make it easier to switch between site experiences for users who want the full website experience, using the label ‘desktop’.
- Optimise all your pages for mobile – not just a few.
- Never stop testing – continuously test all your pages, buttons and user actions on different devices to better understand the user experience.
Summary
The time to optimise for mobile is now. Don’t miss out on valuable conversions because your website doesn’t provide a good user experience on mobile. Trends predict that mobile use is only going to keep increasing.
Optimise your mobile site for speed and improve the loading time of all your pages. Consider the elements of each page and what is and isn’t important. Eliminate unnecessary resources, compress files, reduce image sizes and leverage browser caching.
Make the site easy to use. Have a prominent call to action, easy navigation, good search visibility and never stop testing different elements.
Go for those mobile conversions!
