Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads

Beat the ClockFinding the Gremlins Behind Slow Mobile Page Loads

Ken HarkerSenior Consultant@Ken_HarkerFebruary 2014

Today…

We are accustomed to fast

page loads

Speed is even more important on

mobile

Success is measured in

milliseconds, not seconds

Speed = SalesSpeed = Loyalty

…but there are gremlins in our

way…

We All Expect Fast Page Loads

“In the blink of an eye.”

Fast Mobile Page Loads, Too

After 10 seconds, half of your customers are gone.

The Motivation is Clear

Delays in page load time result in increased abandonment, decreased loyalty, and loss of revenue

Even very small delays will drive your potential customers to the competition or keep them from returning to your site

Success is measured in milliseconds, not seconds

You need to take command of the situation before it takes command of you!

Performance Management

A Winning Combination

Culture

A Winning Combination

Culture Tools

A Winning Combination

Culture Tools Best Practices

10 Mobile Performance Gremlins

1. Too Many New HTTP Requests

The slowest of these three mobile home pages is 50% slower than the fastest, and it has 20% more new HTTP requests.

Can you tell which one?

1. Too Many New HTTP Requests

2. Too Many Domains

Each new domain encountered in a page can result in a slow DNS lookup

3. Serial Downloads

Serialization is the enemy of performance

3. Serial Downloads

Serialization in action

4. Slow Initial Render

ABO

VEBE

LOW

Start above the fold

4. Slow Initial Render

[Source: https://developers.google.com/speed/docs/insights/mobile]

5. Unnecessary Redirections

Remove all redirections except for necessary HTTP HTTPS redirections

6. Third-Party Calls

Find the right balance

6. Third-Party Calls

This is a waterfall of the home page load of a major US financial news web site

7. Inefficient Images

PNG image- 304 x 181 pixels- 89K sent over the mobile network

Converted to a JPEG image (85% quality)- 304 x 181 pixels- 22K sent over the mobile network

This image from a mobile phone retail site in Europe is less than 1” (2.5 cm) wide on an Apple iPhone 5S display

Using the wrong image format can have performance implications

8. Caching Gremlins

The return visitor experience can be vastly improved by strategic cache control on the mobile-optimized site.

9. Nonpersistent TCP Connections

Enable HTTP Keep Alive, also known as Persistent Connections

10. Unnecessary SSL

SSL establishment (via key exchange) is done on each new TCP connection and is the slowest part of the SSL process

Let’s Go!

10 Mobile Performance Gremlins

Serial Downloads Slow Initial Render

Too Many New HTTP Requests Too Many Domains

Unnecessary Redirections

10 Mobile Performance Gremlins

Serial Downloads Slow Initial Render

Too Many New HTTP Requests Too Many Domains

Unnecessary Redirections

Caching Gremlins Nonpersistent TCP Connections

Unnecessary SSL

Third-Party Calls Inefficient Images

Beat the Clock

Develop a performance culture in your organization Make performance a business priority for the mobile site

Ongoing performance monitoring and measurement Synthetic, RUM, and diagnostic tools

Follow industry best practices to fight the mobile performance gremlins Disciplined development will lead to a faster site A faster site means better conversion, reduced bounce rate,

increased customer loyalty, and more sales!

Thank you!Ken HarkerSenior Consultant@Ken_Harkerken.harker@keynote.com