Mobile Speed: Making the Most of Mobile Marketing
Although the exact numbers vary based on the source of data, many people check their phones 150 times a day for a minute at a time, so these users will not wait for a slow screen to load. They are on the go and if you cannot provide what they need very quickly, they will go to another business. The overall experience and mobile optimization is of course important but the speed really matters.
People have choices with sites so they are not going to choose to wait if your site is slow. SOASTA did a case study with Google where they discovered that 53% of site visitors abandon a site if it takes more than 3 seconds to load.
A one second delay on load increases the bounce rate by 8.3%, with a 3.5% decrease in conversions, a 2.1% decrease in cart size, and 9.4% decrease in page views, also reported by SOASTA.
When mobile pages load even one second faster, businesses see up to 27% increase in conversions. But this assumes the site is within those three seconds. A site that decreased the speed from ten seconds to six seconds will not provide much of an impact.
Tools to check your site speed
What Google looks at with load time for a site is the load of above the fold content which is what the user sees first. With WebPageTest , an open source product from Google, you use a speed index to measure above the fold site performance.
To use it, type the URL that you’re testing. To mimic Google’s testing process, set the test location to Nexus 5 and the browser to Nexus 5 Chrome. Use a Mobile 3G connection, set the number of tests to three, and select the option to capture the video that you can share with your developers showing the site’s response. The test looks at the load time on real devices and simulates active networks with graphs and charts indicating areas of improvement.
Test My Site is another free tool based on Google’s best practices for identifying areas of improvement. It is useful as an early step for starting conversations with developers about potential areas of improvement.
An additional option is Chrome Developer Tools (Chrome DevTools). Although the name indicates it is for developers, marketers will also find it helpful. With it, you can simulate a site in real world conditions in the Chrome browser, toggle mobile and responsive design, and even select the type of smartphone. This tool also lets you create a filmstrip of how things load to share with other team members.
Common Speed Issues
Think of the framework for faster mobile sites as being similar to moving into a new apartment. When you move, you want to unpack the most essential items first so it feels like home quickly. As you bring in your items, you want to reduce the number of trips from the moving truck to your apartment and the final thing is having light boxes which may include removing some items from each box.
The same principles apply for mobile sites. You need to unpack the essential content immediately with content above the fold as soon as possible and definitely within 3 seconds. Other components can be loaded later so start with the key features that enable visitors to see your offer and make a decision. Reduce the number of resources a browser needs to request from the server, which includes images and fonts. Just like a mover, you do not want to make too many trips. And finally, aim for lighter “boxes” – or page weight. Every asset on a page carries some weight, thus impacting it’s speed. As great as your large images look on a desktop, they will often hinder the user experience on a mobile device.
Once you have identified some issues with your site, read on for some common speed issues and considerations for improving your site with this mindset of efficient “moving”.
Use Chrome DevTools to view the size of images in chrome dev tools. Google recommends compressing images and avoiding those that are bigger than 100kb. Note that compressed images may still be too big so it may be necessary to resize and reformat the image. A total of 500kb or below of all images total is what they recommend.
Consider webfonts, such as open source solutions like Google fonts, instead of large custom fonts to help with mobile site speed. If you use custom fonts, Google recommends compression with GZIP for a smaller file size and to start with a web font, loading the custom font later on the page. With Google fonts, you can also easily download common webfonts they support. Since they work across different sites and browsers, the font may already be cached. To get into a very deep dive on web fonts, view the below video.
A redirect occurs when the request URL goes to a different URL, such as the mobile version of a website. Best practice is to remove redirects from a website and ensure all pages send users to the final URL. The time it takes for a site to constantly request new content for the redirect impacts the load time. Redirects are especially important to check in AdWords since there should not be any redirects with ads.
Advertisers who want to explore this can access the AMP Project, which is open source and available to anyone. Two additional resources with templates and custom elements are AMP Start and AMP by Example.
Best practices for video
A fast loading website has a significant influence on the bounce rate and conversions. You do not want to lose customers from friction with this initial experience of simply getting them to your site. Review best practices that are sustainable for your organization and have a process for checks and balances over time. If above the fold content loads in 4 seconds, that is not terrible if it previously loaded in 10 seconds. It is on the right track. But if the load time was one second, an increase to 4 seconds could be a problem. Have some benchmarks in place so you can judge whether performance is “good” or “bad”. Google also offers a Mobile Sites certification for people who want to demonstrate expertise in mobile.