The document discusses the increasing web and mobile performance expectations of users, emphasizing that websites should load in under 2 seconds for desktop and 5 seconds for mobile. It highlights the significant impact of page load times on business outcomes, such as conversion rates and user retention. The document also outlines strategies for optimizing web performance using tools like Page Speed and best practices tailored for mobile environments.

1. Optimizing Web And Mobile Site
Performance Using Page Speed
Steve Tack Bryan McQuade
CTO APM, Compuware Senior Software Engineer, Google

2. End-Users’ Web Performance Expectations
Keep Increasing
“What are your expectations for how quickly a website should load?”
4.5
4
Web Page Load Time (seconds)
3.5
3
2.5
2
1.5
1 50%
reduction Another
0.5 50%
reduction?
0
2006 2009 2012*
Source: 2006 & 2009 based on Forrester survey data, 2012* data estimated

3. End-Users’ Web Performance Expectations Are
Not Being Met
47% of end-users expect a website to load in 2 seconds or less
Gomez Last Mile Home Page Benchmark Response Times Across Verticals
12
10
Response Time (seconds)
8
7.379
6.775
6
5.377 5.54 5.543
5.17
4
2 Customer Expectation
0
US Banking HP US Online US Retail HP – US Insurance US Automotive US Airlines HP
– Last Mile Travel Agent Last Mile HP – Last Mile HP – Last Mile – Last Mile
HP – Last Mile
Source: Forrester Consulting, Gomez Last Mile Benchmarks, June 1 – July 1 2011

4. End-Users’ Mobile Web Performance
Expectations Are Not Being Met
89% of US mobile web users expect a website to load on their
mobile phone in 5 seconds or less
Gomez Mobile Web Home Page Benchmark Response Times Across Verticals
18
16
Response Time (seconds)
14
12
10
8.633 8.275
8 7.286
6.593
6
5.054
4 4.227 Customer Expectation
2
0
US Banking HP US Insurance US News HP – US Sports HP – US Retail HP – US Travel HP –
– AT&T/iPhone HP – AT&T/iPhone AT&T/iPhone AT&T/iPhone AT&T/iPhone
AT&T/iPhone
Source: 2011 Gomez/Compuware Equation Research Study and Gomez Mobile Benchmarks, May 1 - June 1 2011

5. Web Performance Impacts Business Results
• Transaction conversion rate increases 74% when page load time improves
from 8 to 2 seconds
5.85% 74%
3.36%
Source: Gomez Real-User Monitoring

6. Mobile Performance Impacts Business Results
• 52% of consumers are unlikely to return to a website they had trouble
accessing from their phone
– 40% said they’d likely visit a competitor’s site instead
• Clear correlation between increase in mobile page load time & abandonment
Abandonment Rate Across 200+ Web Sites / 177+ Million Page
30
Abandonment Rate
25
- All Browsers
Abandonment Rate
Abandonment Rate (%)
20 - iPhone Safari
15
Slower pages = higher abandonment
10 • Reduces revenue
• Increases costs
5 • Damages brand
0
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Page Load Time (sec.)
Source: Gomez Real-User monitoring

7. How Do We Assess And Improve Web And Mobile
Site Performance?
The Application Delivery Chain
Cloud Customers
Private Public Browsers
Local
Data Center ISP
3rd Party/
Virtual/Physical Environment Cloud Services
DB App Web Load
Mainframe Servers Servers Servers Balancers Major
ISP
Customer/user point of view
Storage
Network Content
Delivery
Networks
Web Mobile WAN
Services Components Optimization Mobile
Carrier
Devices
Employees Employees

8. The Browser Is Becoming The Integration Platform
Inside the Outside the firewall User’s browser
firewall
Web
Shopping analytics
Session cart
Information
Ads from
Adserver
Search
CMS
content Video from
media server
CDN
content

9. The Web Is Becoming More Complex – Number Of
Hosts Per User Transaction

10. The Web Is Becoming More Complex – Rich
Internet Application Frameworks
• 32.3% of transactions surveyed depend on at least one of
these frameworks
12.00%
10.00%
8.00%
6.00%
4.00%
2.00%
0.00%
Source: Compuware APM platform data

11. The Web Is Becoming More Complex –
Performance Differences Across Devices
18.00
16.00
Average Load Time (sec.)
14.00
12.00
10.00
8.00
6.00
4.00
2.00
0.00
Source: Gomez Real-User Monitoring
• Real users around the world
• ~200,000,000 page measurements

12. Front-End Performance Optimization
More Important Than Ever
• More potential for improvement by focusing on front-end
• Front-end improvements often require less time &
resources than back-end projects
• Proven, established best practices exist in the form of
tools such as Page Speed
Web Page
Vast majority
of web and
mobile page
load time
Mobile Page spent on the
front-end

13. Use Page Speed
To Optimize Your Mobile Web Site Performance
Bryan McQuade
Staff Software Engineer
Google
13

14. Page Speed background
• Help developers optimize their web pages
• Generates tailored, actionable suggestions to make the page load faster
• Released version 1.12 beta (for Firefox and Chrome) today! (http://goo.gl/1X0j8)
• Products
• Page Speed Online, with mobile support
• Firefox add-on
• Chrome extension
• Page Speed Online API
• 3rd-party integrations
• Gomez Recorder
• WebPagetest
• W3 Total Cache
14

15. Free Web Performance Tools
• Page Speed
• Generates tailored, actionable suggestions to make the page load faster
• Minimizes result variability by not depending on timing data
• WebPagetest
• Detailed network waterfall charts show where time is spent during a page load
• Need to understand if the waterfall is representative of actual user experience
• dynaTrace AJAX Edition
• Detailed network waterfall charts and JavaScript activity timeline
• Best practices based on various timing metrics
• Rendering analysis
15

16. Agenda
• Mobile web performance overview
• Key differences on mobile
• Page Speed rules for mobile
16

17. Mobile web performance optimization matters
• DoubleClick removed one client-side redirect
• 1.5 second reduction in ad load time
• 12% increase in click-through rate
• Google Maps enabled HTML5 Application Cache
• 3-second reduction in average page load time
17
Source: http://goo.gl/tGhCn

18. Components of a mobile web page load
Server Network Client
Processing time Bandwidth Parse
Round-trip time Resource fetches
Tower connect time Layout and Render
JavaScript
18

19. Example mobile web page load
Client Server Render
Mobile Channel
Establishment
DNS Lookup
TCP Connect
HTTP Request Server
Processing
Time
Parse & Layout
Subrequests
19

20. Agenda
• Mobile web performance overview
• Key differences on mobile
• Page Speed rules for mobile
20

21. Key differences between mobile and desktop
• Networks
• Round-trip time
• Bandwidth
• Devices
• CPU
• Memory
• Interaction model (touch vs click)
21

22. Mobile networks: round trip times
• High channel establishment time
• Lower active channel RTTs
• Multi-modal distribution for a single client
• 4G may be a game changer for mobile performance
22

23. Mobile networks: bandwidth
Mobile vs Desktop Bandwidth
2500
2000
1500
kbps
3G
1000 Cable
500
0
Download Upload
23
Source:

24. Mobile devices: CPU and memory
• Increased JavaScript parse and execution times
• Increased layout times
• More code and objects = more frequent GCs
• More complex DOM = greater memory usage
SunSpider JavaScript Benchmark
Device Time (ms)
MacBook Pro (2.4GHz, Chrome 10) 427
Nexus S (Android Gingerbread) 5869
Samsung Captivate (Android Eclair) 12606
• 10x JavaScript runtime cost on mobile devices
• JavaScript that runs for 100ms on desktop will take ~1 second on mobile
24

25. Mobile devices: Interaction model
• Desktop: mouse
• Mobile: touch
• Mobile will synthesize click events, but with delays (300-500ms)
• Video comparing touch and click event responsiveness:
http://youtu.be/t7ON2KL9I8A
25
Source: Libo Song

26. Agenda
• Mobile web performance overview
• Key differences on mobile
• Page Speed rules for mobile
26

27. Page Speed Rules for Mobile
1. Use an Application Cache
2. Defer parsing of JavaScript
3. Make landing page redirects cacheable
4. Prefer touch events
27

28. 1. Use an Application Cache
• Problem:
• Very high initial connection cost
• 2.5 seconds
• Solution:
• HTML5 Application Cache
HTML
<!DOCTYPE HTML>
<html manifest="/my.manifest">
...
</html>
Cache Manifest
CACHE MANIFEST
/my.js
/my.css
...
28

29. 2. Defer parsing of JavaScript
• Problem:
• Cost of parsing JavaScript about 1 millisecond per kilobyte
• Want to load JS up front to reduce round trips
• Solution:
• Defer parsing of JavaScript until it is needed
• Load JS in string literals, eval on demand
Parse times for popular JS libraries on iPhone 4
Script Size (kB) Parse Time (ms)
Jquery 84 76
Dojo 102 99
Prototype 160 119
Jquery-UI 195 181
29

30. 3. Make landing page redirects cacheable
• Problem:
• Landing page redirect chain
• Example
example.com ->
www.example.com ->
m.example.com ->
www.example.com/m
• User must wait multiple RTTs on every visit to the page
• Solution:
• Make these redirects browser cacheable
• Cache-Control: private, max-age > 0
30

31. 4. Prefer touch events
• Problem:
• onclick event has 300-500ms delay on touch devices
• Solution:
• ontouch events have no delay
• but be mindful about double-click, pinch-zoom
Try it yourself on a touch-enabled device:
http://pcapperf.appspot.com/fastbutton/
31

32. Thank you
• Learn and use
• http://code.google.com/speed/page-speed/
• http://pagespeed.googlelabs.com/
• Contribute
• http://code.google.com/p/page-speed/
• Discuss
• http://groups.google.com/group/page-speed-discuss
32

33. Questions? The Gomez Recorder
integrates with Page
Speed to provide
Compuware Customers
proven, actionable
Enjoy Measurable Benefits recommendations to
• Increased revenue 25% make your site faster
• Reduced revenue loss by
92% and $737,251 annually
• Reduced home page load time
from 11.3 seconds
to 3.4 seconds
• Saved 50%+ in staff and fees
• Reduced downtime 45%
• Improved first-hour problem
resolution rate to 80%
• Improved annual dynaTrace AJAX Edition 3
troubleshooting efficiency by makes building lightning fast
97%, saving $784,000 Web 2.0 applications easy
• Reduced SAP license costs by
$475,000 per year
For more information visit Compuware.com or contact us at +1 781.778.2700