beat the clock: finding the gremlins behind slow mobile page loads
DESCRIPTION
TRANSCRIPT
![Page 1: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/1.jpg)
Beat the ClockFinding the Gremlins Behind Slow Mobile Page Loads
Ken HarkerSenior Consultant@Ken_HarkerFebruary 2014
![Page 2: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/2.jpg)
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…
![Page 3: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/3.jpg)
We All Expect Fast Page Loads
“In the blink of an eye.”
![Page 4: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/4.jpg)
Fast Mobile Page Loads, Too
After 10 seconds, half of your customers are gone.
![Page 5: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/5.jpg)
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!
![Page 6: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/6.jpg)
Performance Management
![Page 7: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/7.jpg)
A Winning Combination
Culture
![Page 8: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/8.jpg)
A Winning Combination
Culture Tools
![Page 9: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/9.jpg)
A Winning Combination
Culture Tools Best Practices
![Page 10: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/10.jpg)
10 Mobile Performance Gremlins
![Page 11: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/11.jpg)
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?
![Page 12: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/12.jpg)
1. Too Many New HTTP Requests
![Page 13: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/13.jpg)
2. Too Many Domains
Each new domain encountered in a page can result in a slow DNS lookup
![Page 14: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/14.jpg)
3. Serial Downloads
Serialization is the enemy of performance
![Page 15: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/15.jpg)
3. Serial Downloads
Serialization in action
![Page 16: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/16.jpg)
4. Slow Initial Render
ABO
VEBE
LOW
Start above the fold
![Page 17: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/17.jpg)
4. Slow Initial Render
[Source: https://developers.google.com/speed/docs/insights/mobile]
![Page 18: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/18.jpg)
5. Unnecessary Redirections
Remove all redirections except for necessary HTTP HTTPS redirections
![Page 19: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/19.jpg)
6. Third-Party Calls
Find the right balance
![Page 20: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/20.jpg)
6. Third-Party Calls
This is a waterfall of the home page load of a major US financial news web site
![Page 21: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/21.jpg)
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
![Page 22: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/22.jpg)
8. Caching Gremlins
The return visitor experience can be vastly improved by strategic cache control on the mobile-optimized site.
![Page 23: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/23.jpg)
9. Nonpersistent TCP Connections
Enable HTTP Keep Alive, also known as Persistent Connections
![Page 24: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/24.jpg)
10. Unnecessary SSL
SSL establishment (via key exchange) is done on each new TCP connection and is the slowest part of the SSL process
![Page 25: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/25.jpg)
Let’s Go!
![Page 26: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/26.jpg)
10 Mobile Performance Gremlins
Serial Downloads Slow Initial Render
Too Many New HTTP Requests Too Many Domains
Unnecessary Redirections
![Page 27: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/27.jpg)
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
![Page 28: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/28.jpg)
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!
![Page 29: Beat the Clock: Finding the Gremlins Behind Slow Mobile Page Loads](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b5d2ba4a7959d93c8b45c9/html5/thumbnails/29.jpg)
Thank you!Ken HarkerSenior Consultant@[email protected]