MAILE OHYE: Hi. I’m Maile Ohye. I work at Google as a
developer programs tech lead on our Webmaster
Support Team. This video is about
how to find quick fixes that you or a member
of your technical staff can easily implement
to improve performance on your mobile site. But before we talk about
how to speed things up, let’s check out the statistics. It’s a fact that performance
can affect profits. In an experiment
run by Strangeloop, they added one second
of additional latency to pages served to
smartphone users. With just a
one-second delay, they found over a 9%
decrease in page views, not to mention over 8%
increase in bounce rate, and, furthermore, a 3.5%
drop in conversions. Finally, to make matters worse,
even after the experiment was over, shoppers were
significantly less likely to return to the site. So what’s the current
state of users and the speed of mobile pages? Well, studies show there’s a
one-second limit for a user not to be distracted. While today, seven seconds
is the average page load time on mobile. This means that we
have six extra seconds to try another
website, completely forget our task at hand, or,
perhaps, brew in frustration. Let me explain a
bit more about why the mobile web is
slower than desktop. We can compare mobile versus
desktop latency potential. Take a laptop user,
let’s say, on google.com about to perform a search. Once the user enters a
query, the total round trip from the user’s browser
to connect to Google, Google’s servers to process
the query, and then for Google to return the results and have
them displayed in the laptop’s browser can happen in
less than half a second. In fact, that’s the
performance to which many of us have become accustomed. On smartphones, however,
a full round trip in less than a half second
is likely impossible. That’s because
when a user enters a query on their
smartphone, the client needs to connect to the
mobile phone network before it can reach the server. Mobile phone networks are
configured in such a way that whether it’s 3G or
4G, a smartphone still requires at minimum
0.5 seconds to connect to a server like Google. Once connected to the server
with a half second elapsed, Google still needs to process
the query, return the results, and have the smartphone
render the page. The key lesson is that your
potential smartphone visitors will experience a minimum
of 0.5 seconds just to connect to your server. Then about 0.6 seconds
later, when the time elapsed is over one second, it’s
already possible your visitor is distracted. So let’s talk about how
we can make things faster. For this video, I’ll demonstrate
ideas using Google Analytics with the e-commerce
site, the Google Store, at www.googlestore.com. Let’s begin in Google Analytics
and create a mobile traffic segment. Start with Create New Segment. Just last month, my colleagues
on the Page Speed Team launched a new feature in Google
Analytics called Site Speed. Let’s navigate to Site
Speed Page Timings. With our segment set
to Mobile Traffic, select the Distribution tab. Distribution provides
a high-level view of a site’s performance. We can see that the
average page load time on mobile for my
site, the Google Store, is over six seconds. We also notice that
46% of my site’s pages take three to seven
seconds to load on mobile. The good news is that we have
lots of room for improvement. Still within Site
Speed Page Timings, click the Explorer tab. On this page, in the default
sort order of page views, so we’re looking at the most
visited pages on our site, you can see the relative
speed of each page. Turns out that my third most
popular page, the YouTube category page, that sells things
like YouTube water bottles and magnets, is excruciatingly
slow, 350% slower than my average mobile page,
which, as we saw earlier, wasn’t that fast to begin with. We can use this feature to make
a list of popular slow pages we want to investigate. Now, let’s go to Site
Speed Suggestions to learn what
improvements to make. We see that for the
YouTube page there are nine page speed suggestions. Clicking the suggestions
launches Page Speed Insights in a new window. It’s like watching your test
graded before your eyes. Once it completes, take a
look at Mobile Performance. Our YouTube page,
unsurprisingly, scores a 55 out of 100
with respect to performance best practices. We have the equivalent of
an F. Since this video is about making quick fixes
for mobile performance, we’ll focus on fixing the
simplest, red exclamation point suggestions. Some of these suggestions may
be familiar and others less so. But for a suggestion, you
could expand for more details. I’d really like for
you to understand how easy and, perhaps,
ultimately profitable implementing these performance
suggestions can be. I made a chart, which is going
to cover two slides, that hopefully highlights the
easy performance suggestions and gives context to the
somewhat more difficult ones. Feel free to pause the video
if you want to further review. The top of the chart
covers what’s easy to do and can be done
within a few hours by a developer or someone
with more technical skill. First is to enable compression. Enabling compression
is zipping resources. So there’s less data to
transfer between your web server and the client. It’s a simple settings change
on your server’s configuration file. Minifying resources
can be easily performed through publicly
available tools. Using Asynchronous
Scripts is largely a matter of copying
and pasting new code snippets to replace
older versions. To leverage browser
caching, you can simply add appropriate HTTP
headers to your resources. The last fairly easy
speed suggestion is to avoid landing
page redirects. In the case of pages
in a redirect chain, this means to correct the
source URL to point directly to the target rather than
any intermediate pages. We can see how correcting
extraneous redirects is helpful by, again, looking
at latency on a smartphone. Every redirect will
require the mobile user to wait at minimum an extra 0.5
seconds for the page to load. Going back to another low
difficulty recommendation, enabling compression is
as easy as copying code into a server
configuration file. There already exists open
source master configuration files that you can
reference, i.e., copy, for the right security
and performance settings for your server. The speed suggestions on the
second page of this chart increase in
developer difficulty. Many of these won’t
be corrections you can make within a few hours. They require more thought
and process enhancements. Still, I’d like to
take a moment to chat about the recommendation
to optimize images. Optimizing images
includes a range of improvements from
lossless compression to creating and cropping
images specifically for your mobile site. Optimizing images
isn’t quite as simple as some of the other
speed suggestions on the previous slide. But it can have a large impact. Images comprise 65%
of mobile web data. Optimizing these resources
can reduce download time and, ultimately,
load pages faster. The main takeaway
from all of this is that if you have a
high traffic mobile page with red exclamation mark speed
suggestions of low developer difficulty, it would be
great for your visitors and for your business
to correct them. But for further
inspiration, let’s check out WebPageTest.org. With Web Page Test,
we can enter a page, like the YouTube category page,
and have it analyzed for speed. Select a mobile user agent,
like an iPhone or Android smartphone. When Web Page Test
completes for the slow page, that’s when we can see the hurt. I reviewed this page with
my colleague, Ilya Grigorik, who focuses primarily
on performance. His response– Yikes. That’s not a pretty waterfall. The waterfall
visually represents why the page load time
was over 15 seconds. The blue bars are
content downloads required to load the page. For the page to
start rendering, it required nearly seven seconds. With this performance,
my site is essentially expecting a YouTube shopper
to wait seven seconds to receive any visual
feedback and over 15 seconds for the
entire page to load. If you’re still not
inspired to make some of these
quick improvements, please note that according
to “What Users Want From Mobile Sites
Today,” 61% of users said that if they didn’t
find what they were looking for right away on a
mobile site, they’d quickly move on to another site. That’s why a fun activity is
to compare your page and page speed insights with your
competitor’s equivalent page. Having played sports
throughout my life and being the youngest
daughter of three, I find it especially
motivating to make improvements if I’m outperformed
by the competition. Also at Web Page Test, you
can download a film strip view of the rendering of
your mobile page. Feel free to compare
your render film strip with other sites’
pages in your industry. I wanted to end with
pointers to great resources. There’s Page Speed with tools
like Page Speed insights and articles. There are also
great videos by Ilya and members of the
Page Speed Team. And last, let’s give a shout
out to WebPageTest.org. Thanks for watching.