Beat the Clock Finding the Gremlins Behind Slow Mobile Page Loads Ken Harker Senior Consultant @Ken_Harker February 2014
Jan 14, 2015
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@[email protected]