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.