Google's Web Performance Best Practices #6: Optimize for Mobile

Once you have optimized your website for desktop performance, your next concern is rapid growth of mobile usage. And mobile searches keep quadrupling. Moreover, of people who react to seeing a mobile ad: 42 percent click on the mobile ad; 35 percent visit the advertiser’s site; 32 percent search for more information on their phone; 49 percent make a purchase and 27 percent call the business. Despite these findings, 79 percent of large online advertisers still do not have a mobile optimized site (Google/Kelsey 2010). It is estimated at the moment that there are almost 1.2 billion mobile Web users in the world.

Mobile device CPU capabilities are even lower than that of desktop computers, which makes the round trip time even longer, and adds to the page load time.

Reduce the initial page load time

“By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page,” it is explained in Google’s best practices.

For one, you can defer the loading of Java Script until it is needed. One of the techniques is using <script async> attribute where appropriate. This will prevent parsing from blocking the initial page load by deferring it until the browser’s UI thread is not busy doing something else. Java Script can also be loaded in comments, and evaluated later, or stored in string literals.

Conclusive findings from Google’s Web Performance 2011 test say:

“On modern mobile devices, each additional kilobyte of JavaScript adds about 1ms of parse time to the overall page load time. So 100kB of JavaScript included in the initial page load would add 100ms of load time for your users. Because JavaScript must be parsed on every visit to a page, this added load time will be part of every page load, whether loaded from the network, via the browser cache, or in HTML5 offline mode.”

And are you aware that mobile users behavior is such that 80% of customers will abandon a mobile site if they have a bad user experience? Also, 21% of mobile device users expect their load times on their phone to be about equal with their desktop, although mobile sites are affected by extra factors such as already mentioned slower parsing of Java Script, slower network connection, smaller browser cache memory, slower parsing of HTML… This is an alarming matter for e-sellers, especially if you take into account that mobile web penetration is growing stronger even in the developing countries, and it is expected that mobile data usage will to grow 20-fold by 2017, as cost per megabyte continues to fall.

Make Redirects Cacheable

As mobile search evolves and mobile ranking factors become prevalent, optimizing the page for mobile searches involves redirecting a user from a desktop optimized site to mobile content. To put it more simply, mobile pages often redirect users from one URL to another, replacing “www.” with “m.”, for example, which in turn, requires extra client-side processing.

To speed up the page load time, this redirect should be made cacheable, since cache memory performs faster by accessing information in fewer clock cycles. Mobile caches, however, unlike desktop browser caches, cannot hold a large amount of content. It is thus important to note that as many landing page redirections as possible should be avoided – completely. Finally, if the mobile site is served from the same location as the main site, it is best to avoid redirects and serve the mobile site to the user directly.

Timberland-mobile_store
Image 2 – Timberland: “Shoppers today expect fast and relevant results especially on mobile, where speed and interactivity matter most. Since we launched our mobile-optimized website, we have seen mobile sales grow 20 times faster than our desktop site sales.”
Image source

Google’s Best Practices recommend using a 302 redirect with a cache lifetime of one day. The redirect should include a Vary: User-Agent header as well as a Cache-Control: private header. These headers prevent proxies from serving mobile-specific redirects to non-mobile users, they explain. In addition, you may want to use an Expires header in the past, to prevent old proxies from caching the redirects and serving them to non-mobile users.

Launching a mobile optimized website is crucial today for businesses, and many have seen a large return of investments since they have launched one. As SEO experts suggest, “brands that don’t optimize a mobile site today will be busy playing catch up tomorrow.”

Table of Contents

Reduce the initial page load time

Make Redirects Cacheable

Related articles