Tip:
Highlight text to annotate it
X
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.