SEO Infographic: Mobile Load Time

Mobile Load Time VS. Expectations

Due to the limited CPU capabilities of mobile devices, the high round-trip times of mobile networks, and the rapid growth of mobile usage, it is even more critical to understand and optimize for mobile performance than for the desktop. Page Speed Insights now allows you to easily analyze and optimize your site for mobile performance. Many of the mobile-targeted best practices below are also relevant when optimizing for desktop, so these suggestions may also be included in Page Speed reports for desktop browsers.

If your website takes more than five seconds to download on a mobile device, you will lose 74 percent of your audience!  says the following Mobile Load Time VS. Expectations Infographic 

Mobile usage is growing fast, especially in North America, where it will soon outpace desktop browsing usage.

Make sure your site loads fast and that it looks nice on all types of mobile devices. 

Be sure to not use Flash or JavaScript, and keep photos and videos to a minimum. 

Here are two useful tips from Google for optimizing your mobile site speed.

1- Defer parsing of JavaScript

Overview

In order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. 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.

Details

There are several techniques that can be used to defer parsing of JavaScript. The simplest and preferred technique is to simply Defer loading of JavaScript until it is needed. A second technique is to use the <script async> attribute where appropriate, which prevents parsing from blocking the initial page load by deferring it until the browser's UI thread is not busy doing something else. If neither of these techniques is suitable, there are some additional techniques commonly used in mobile applications, described below:

When building mobile applications, it can be necessary to load all of the JavaScript needed by an application up front, so the application can continue to work when the user is offline. In this case, some applications, such as mobile Gmail, find it useful to load JavaScript in comments and later eval() the JavaScript when it is needed. This approach guarantees that all JavaScript is loaded during the initial page load, while not requiring that JavaScript to be parsed.

An alternative to storing code in comments is storing code in JavaScript string literals. When using this technique, the JavaScript is only parsed when needed, again by calling eval() on the string literal. This technique also allows an application to load JavaScript early, but defer parsing until it is needed.

Note that moving your <script> tags to the end of the page is sub-optimal, since the browser will continue to show a busy indicator until the page has finished parsing this JavaScript. Users may wait until the page load indicator shows that the page load is complete before interacting with the page, so it is important to load JavaScript in a way that minimizes the time it takes for the browser to indicate that the page load is complete.

In our own tests conducted in early 2011, we found that 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.

2- Make landing page redirects cacheable

Overview

Many pages, especially mobile pages, redirect users to a different URL, for instance from www.example.com to m.example.com. Making this redirect cacheable by the user's browser can speed up page load times for repeat visitors to a site.

Details

While the best practice with redirects is to remove them wherever possible, it can sometimes be difficult to eliminate landing page redirects, especially redirects to mobile-specific sites. For instance, the mobile version of a site may be served from a different web server, which can require redirecting to a different hostname. In these cases, it's important to make the redirect to the mobile-specific site cacheable, to reduce page load times for repeat visitors. If the mobile version of your web site is served from the same web server as the desktop version of your site, you should instead eliminate mobile-specific redirects and serve from the same URL as your desktop page.

Recommendations

Mobile-specific redirects must be privately cacheable, in order to prevent proxies from serving the mobile redirect to non-mobile users. We 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. You may also want to include an Expires header in the past, to prevent old HTTP/1.0 proxies from caching these redirects and serving them to non-mobile users.

Try to load your website on a mobile device and measure the download time.