Following on from the news that Google is set to introduce mobile page load speed as a ranking factor, we’ve put together a checklist for making sure your mobile page speeds are as good as they can be.
Currently, web pages that have fast desktop page load speeds but poor mobile speeds can still rank highly in the SERPs. The introduction of mobile page load speed as a ranking factor means this will change, as a device-specific consideration will be made. For those who haven’t yet optimized for mobile, now is the time to do so.
Why spend time and money on mobile device optimization?
Consumers expect to get information fast, whatever their device and regardless of their location. Google’s research shows that if a page takes longer than one second to load, the user loses interest. The website loses a visitor and the business a possible sale. In fact, according to research carried out last year, 29% of smartphone users will immediately switch to another site or app if what they’re looking at doesn’t give them what they want (if it’s too slow or if they can’t find information quickly enough).
In an ideal world your mobile page speed would be under one second to retain the attention of the consumer. While this often isn’t possible, you should focus on delivering the above the fold (ATF) content in less than one second. This allows the rest of the page to load in the background while the user interprets the first chunk of content.
So what exactly can you do to improve your website’s mobile page speed?
Minimize image size
Images are an important component of most websites – whether that’s a product image, a shot of your service in action or simply library images to add to the visual appearance of a page and break up chunks of text. However, including images on mobile sites can spell longer loading times. To keep things as streamlined as possible, make sure they are resized and optimized for quicker loading. High resolution images take up more bandwidth space, processing time and mobile browser cache space so go low res and always size them for the exact dimensions available. There are plenty of online tools to help with this if you don’t have an in-house design team or specialized software (just search on Google for resize my image online to find a service that suits or try a popular package like Adobe Photoshop). Once images have been cropped and the resolution set, it’s also advisable to compress them further by choosing a simple file format such as JPEG.
Optimize or remove redirects
Redirects often require extra client-side processing which increases page load speed. So when a desktop site is redirected to a mobile site, this processing increases the loading time of the mobile site. This sometimes cannot be helped. For example, when the mobile site is hosted at a different location to the main site, a redirect is unavoidable. However, if the mobile site is hosted in the same location it’s best to avoid redirects and serve the mobile site to the user directly. It’s also always worth including a link to the main site on your mobile version for users who would prefer to browse the desktop version.
Replace click events with touch events
Touch events offer the ability to interpret finger or stylus activity on touch screens or trackpads. Buttons can slow down page performance so overcome this by incorporating a touch event specifically designed for a mobile device to overcome the lag.
Reduce parsing of JavaScript
When the mobile browser parses JavaScript, page load time is greatly increased. Reducing your mobile site’s dependency on JavaScript to render a page – or deferring the parsing of unnecessary <script> tags – will see the initial page load time decreased. This will help your site move closer to that all-important one second target.
Consider a Content Delivery Network (CDN)
A CDN spreads the weight of your site across lots of different servers, each hosted at different data centers. Having this network of servers in play means that each user is served up content from the server closest to them. This reduces the distance the content has to travel, speeding up the loading time.
Review whether video content is necessary
Video is a thorny issue for page load times on mobile. If your desktop site has video-based content, it’s wise to review whether or not this is critical to the mobile version. Keeping videos for desktop sites is one option, another is to have it load in the background on the mobile version.
What methods have you used to successfully speed up your mobile page load time? Let us know in the comments or by commenting on our Facebook page.