SlideShare uma empresa Scribd logo
1 de 33
Optimizing Web And Mobile Site
Performance Using Page Speed




     Steve Tack           Bryan McQuade
     CTO APM, Compuware   Senior Software Engineer, Google
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
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
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
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
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
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
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
The Web Is Becoming More Complex – Number Of
Hosts Per User Transaction
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
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
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
Use Page Speed
To Optimize Your Mobile Web Site Performance




Bryan McQuade
Staff Software Engineer
Google



                                               13
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
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
Agenda

• Mobile web performance overview

• Key differences on mobile

• Page Speed rules for mobile




                                    16
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
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
Example mobile web page load
       Client           Server     Render


    Mobile Channel
    Establishment


     DNS Lookup


     TCP Connect


    HTTP Request        Server
                      Processing
                         Time
    Parse & Layout


     Subrequests



                                            19
Agenda

• Mobile web performance overview

• Key differences on mobile

• Page Speed rules for mobile




                                    20
Key differences between mobile and desktop

• Networks
   • Round-trip time
   • Bandwidth


• Devices
   • CPU
   • Memory
   • Interaction model (touch vs click)




                                             21
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
Mobile networks: bandwidth



                        Mobile vs Desktop Bandwidth
                 2500

                 2000

                 1500
          kbps




                                                      3G
                 1000                                 Cable

                  500

                    0
                           Download      Upload



                                                              23
Source:
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
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
Agenda

• Mobile web performance overview

• Key differences on mobile

• Page Speed rules for mobile




                                    26
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
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
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
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
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
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
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

Mais conteúdo relacionado

Semelhante a Optimizing web and mobile site performance using page speed

Complexity At The Edge How To Maximize The Mobile Opportunity In China
Complexity At The Edge  How To Maximize The Mobile Opportunity In ChinaComplexity At The Edge  How To Maximize The Mobile Opportunity In China
Complexity At The Edge How To Maximize The Mobile Opportunity In ChinaCompuware APM
 
Complexity At The Edge How To Maximize The Mobile Opportunity
Complexity At The Edge  How To Maximize The Mobile OpportunityComplexity At The Edge  How To Maximize The Mobile Opportunity
Complexity At The Edge How To Maximize The Mobile OpportunityCompuware APM
 
Idc mobility event - Compuware slides
Idc mobility event - Compuware slidesIdc mobility event - Compuware slides
Idc mobility event - Compuware slidesCompuware ASEAN
 
IIM L - ConArtists
IIM L - ConArtistsIIM L - ConArtists
IIM L - ConArtistslehartawde
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightonAkamai Technologies
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalLiz Bradley
 
Maximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyMaximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyCompuware APM
 
MeasureWorks - Emerece eTravel - 7 performance concerns for marketers
MeasureWorks - Emerece eTravel -  7 performance concerns for marketersMeasureWorks - Emerece eTravel -  7 performance concerns for marketers
MeasureWorks - Emerece eTravel - 7 performance concerns for marketersMeasureWorks
 
Bms thu sponsored breakfast adobe
Bms thu sponsored breakfast adobeBms thu sponsored breakfast adobe
Bms thu sponsored breakfast adobeMediaPost
 
State of Web Readiness: E-Commerce 2013
State of Web Readiness: E-Commerce 2013State of Web Readiness: E-Commerce 2013
State of Web Readiness: E-Commerce 2013Load Impact
 
Goldman Sachs Conference London
Goldman Sachs Conference LondonGoldman Sachs Conference London
Goldman Sachs Conference LondonWEG
 
Engaging the Tablet User
Engaging the Tablet UserEngaging the Tablet User
Engaging the Tablet UserBen Mantooth
 
How CDNs Can improve Mobile Application Performance
How CDNs Can improve Mobile Application PerformanceHow CDNs Can improve Mobile Application Performance
How CDNs Can improve Mobile Application PerformanceCloudflare
 
Optimizing Internet Application Performance
Optimizing Internet Application PerformanceOptimizing Internet Application Performance
Optimizing Internet Application PerformancePaul Dehnert
 
Performance Measurement and Monitoring for Salesforce Web & Mobile Apps
Performance Measurement and Monitoring for Salesforce Web & Mobile AppsPerformance Measurement and Monitoring for Salesforce Web & Mobile Apps
Performance Measurement and Monitoring for Salesforce Web & Mobile AppsSalesforce Developers
 
Atlanta AppFolio meetup 2/13/2013
Atlanta AppFolio meetup 2/13/2013Atlanta AppFolio meetup 2/13/2013
Atlanta AppFolio meetup 2/13/2013AppFolio
 
CS Conference 2012
CS Conference 2012CS Conference 2012
CS Conference 2012WEG
 
Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Yottaa
 
Twinkle100 web performance study
Twinkle100 web performance studyTwinkle100 web performance study
Twinkle100 web performance studyMeasureWorks
 

Semelhante a Optimizing web and mobile site performance using page speed (20)

Complexity At The Edge How To Maximize The Mobile Opportunity In China
Complexity At The Edge  How To Maximize The Mobile Opportunity In ChinaComplexity At The Edge  How To Maximize The Mobile Opportunity In China
Complexity At The Edge How To Maximize The Mobile Opportunity In China
 
Complexity At The Edge How To Maximize The Mobile Opportunity
Complexity At The Edge  How To Maximize The Mobile OpportunityComplexity At The Edge  How To Maximize The Mobile Opportunity
Complexity At The Edge How To Maximize The Mobile Opportunity
 
Idc mobility event - Compuware slides
Idc mobility event - Compuware slidesIdc mobility event - Compuware slides
Idc mobility event - Compuware slides
 
IIM L - ConArtists
IIM L - ConArtistsIIM L - ConArtists
IIM L - ConArtists
 
IIM L - ConArtists
IIM L - ConArtistsIIM L - ConArtists
IIM L - ConArtists
 
eTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom LeightoneTail Keynote from Akamai CEO Tom Leighton
eTail Keynote from Akamai CEO Tom Leighton
 
Etail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_FinalEtail West 2013 Akamai CEO Tom Leighton_Final
Etail West 2013 Akamai CEO Tom Leighton_Final
 
Maximize Your M-Commerce Strategy
Maximize Your M-Commerce StrategyMaximize Your M-Commerce Strategy
Maximize Your M-Commerce Strategy
 
MeasureWorks - Emerece eTravel - 7 performance concerns for marketers
MeasureWorks - Emerece eTravel -  7 performance concerns for marketersMeasureWorks - Emerece eTravel -  7 performance concerns for marketers
MeasureWorks - Emerece eTravel - 7 performance concerns for marketers
 
Bms thu sponsored breakfast adobe
Bms thu sponsored breakfast adobeBms thu sponsored breakfast adobe
Bms thu sponsored breakfast adobe
 
State of Web Readiness: E-Commerce 2013
State of Web Readiness: E-Commerce 2013State of Web Readiness: E-Commerce 2013
State of Web Readiness: E-Commerce 2013
 
Goldman Sachs Conference London
Goldman Sachs Conference LondonGoldman Sachs Conference London
Goldman Sachs Conference London
 
Engaging the Tablet User
Engaging the Tablet UserEngaging the Tablet User
Engaging the Tablet User
 
How CDNs Can improve Mobile Application Performance
How CDNs Can improve Mobile Application PerformanceHow CDNs Can improve Mobile Application Performance
How CDNs Can improve Mobile Application Performance
 
Optimizing Internet Application Performance
Optimizing Internet Application PerformanceOptimizing Internet Application Performance
Optimizing Internet Application Performance
 
Performance Measurement and Monitoring for Salesforce Web & Mobile Apps
Performance Measurement and Monitoring for Salesforce Web & Mobile AppsPerformance Measurement and Monitoring for Salesforce Web & Mobile Apps
Performance Measurement and Monitoring for Salesforce Web & Mobile Apps
 
Atlanta AppFolio meetup 2/13/2013
Atlanta AppFolio meetup 2/13/2013Atlanta AppFolio meetup 2/13/2013
Atlanta AppFolio meetup 2/13/2013
 
CS Conference 2012
CS Conference 2012CS Conference 2012
CS Conference 2012
 
Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1Mobile Optimization Tips from Yottaa - MEGMeetup #1
Mobile Optimization Tips from Yottaa - MEGMeetup #1
 
Twinkle100 web performance study
Twinkle100 web performance studyTwinkle100 web performance study
Twinkle100 web performance study
 

Mais de Compuware APM

Managing Cost in Public Cloud Environments
Managing Cost in Public Cloud EnvironmentsManaging Cost in Public Cloud Environments
Managing Cost in Public Cloud EnvironmentsCompuware APM
 
Don't Lose Your Viewers: Keep Their Attention With High Performance Streaming
Don't Lose Your Viewers:  Keep Their Attention With High Performance StreamingDon't Lose Your Viewers:  Keep Their Attention With High Performance Streaming
Don't Lose Your Viewers: Keep Their Attention With High Performance StreamingCompuware APM
 
Why Server Virtualization Demands an End-user’s Perspective
Why Server Virtualization Demands an End-user’s PerspectiveWhy Server Virtualization Demands an End-user’s Perspective
Why Server Virtualization Demands an End-user’s PerspectiveCompuware APM
 
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals Compuware APM
 
3 Keys to Great Customer Experience When Launching Web and Mobile Applications
3 Keys to Great Customer Experience When Launching Web and Mobile Applications3 Keys to Great Customer Experience When Launching Web and Mobile Applications
3 Keys to Great Customer Experience When Launching Web and Mobile ApplicationsCompuware APM
 
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...Compuware APM
 
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOps
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOpsSpeed Your Apps Launch to Market: Learn Six Best Practices for DevOps
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOpsCompuware APM
 
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...Compuware APM
 
Web Load Testing for Dummies
Web Load Testing for DummiesWeb Load Testing for Dummies
Web Load Testing for DummiesCompuware APM
 
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...Compuware APM
 
How to Mitigate the Performance Risk of Third-party Web Components
How to Mitigate the Performance Risk of Third-party Web ComponentsHow to Mitigate the Performance Risk of Third-party Web Components
How to Mitigate the Performance Risk of Third-party Web ComponentsCompuware APM
 
Delta Air Lines Shares Best Practices for Becoming a Top Performing Website
Delta Air Lines Shares Best Practices for Becoming a Top Performing WebsiteDelta Air Lines Shares Best Practices for Becoming a Top Performing Website
Delta Air Lines Shares Best Practices for Becoming a Top Performing WebsiteCompuware APM
 
"What Users Want from Mobile - A study of consumers’ mobile web and applicati...
"What Users Want from Mobile - A study of consumers’ mobile web and applicati..."What Users Want from Mobile - A study of consumers’ mobile web and applicati...
"What Users Want from Mobile - A study of consumers’ mobile web and applicati...Compuware APM
 
Are Your Applications Delivering What Your End-Users Expect?
Are Your Applications Delivering What Your End-Users Expect?Are Your Applications Delivering What Your End-Users Expect?
Are Your Applications Delivering What Your End-Users Expect?Compuware APM
 
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...Compuware APM
 
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone Users
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone UsersTop Tips To Deliver Quality Mobile Web And App Experiences To Smartphone Users
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone UsersCompuware APM
 
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to AvoidCompuware APM
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Compuware APM
 
Testing Tools Landscape
Testing Tools LandscapeTesting Tools Landscape
Testing Tools LandscapeCompuware APM
 
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhone
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhoneTop Tips to Deliver Quality Web Experiences From IE 9 to the iPhone
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhoneCompuware APM
 

Mais de Compuware APM (20)

Managing Cost in Public Cloud Environments
Managing Cost in Public Cloud EnvironmentsManaging Cost in Public Cloud Environments
Managing Cost in Public Cloud Environments
 
Don't Lose Your Viewers: Keep Their Attention With High Performance Streaming
Don't Lose Your Viewers:  Keep Their Attention With High Performance StreamingDon't Lose Your Viewers:  Keep Their Attention With High Performance Streaming
Don't Lose Your Viewers: Keep Their Attention With High Performance Streaming
 
Why Server Virtualization Demands an End-user’s Perspective
Why Server Virtualization Demands an End-user’s PerspectiveWhy Server Virtualization Demands an End-user’s Perspective
Why Server Virtualization Demands an End-user’s Perspective
 
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals
Webcast: CIO Insights: How to Optimize User Experience Across 60 Hospitals
 
3 Keys to Great Customer Experience When Launching Web and Mobile Applications
3 Keys to Great Customer Experience When Launching Web and Mobile Applications3 Keys to Great Customer Experience When Launching Web and Mobile Applications
3 Keys to Great Customer Experience When Launching Web and Mobile Applications
 
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...
The State Of Mobile Commerce – Are You Meeting Your Mobile Customers’ Expecta...
 
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOps
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOpsSpeed Your Apps Launch to Market: Learn Six Best Practices for DevOps
Speed Your Apps Launch to Market: Learn Six Best Practices for DevOps
 
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...
Recent Survey Reveals that Optimized APM Approaches Increase Business Efficie...
 
Web Load Testing for Dummies
Web Load Testing for DummiesWeb Load Testing for Dummies
Web Load Testing for Dummies
 
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...
Measure Twice, Cut Once: 5 Best Practices For Selecting Your Cloud Service Pr...
 
How to Mitigate the Performance Risk of Third-party Web Components
How to Mitigate the Performance Risk of Third-party Web ComponentsHow to Mitigate the Performance Risk of Third-party Web Components
How to Mitigate the Performance Risk of Third-party Web Components
 
Delta Air Lines Shares Best Practices for Becoming a Top Performing Website
Delta Air Lines Shares Best Practices for Becoming a Top Performing WebsiteDelta Air Lines Shares Best Practices for Becoming a Top Performing Website
Delta Air Lines Shares Best Practices for Becoming a Top Performing Website
 
"What Users Want from Mobile - A study of consumers’ mobile web and applicati...
"What Users Want from Mobile - A study of consumers’ mobile web and applicati..."What Users Want from Mobile - A study of consumers’ mobile web and applicati...
"What Users Want from Mobile - A study of consumers’ mobile web and applicati...
 
Are Your Applications Delivering What Your End-Users Expect?
Are Your Applications Delivering What Your End-Users Expect?Are Your Applications Delivering What Your End-Users Expect?
Are Your Applications Delivering What Your End-Users Expect?
 
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...
Managing Complexity Across Today’s Application Delivery Chain:Six key indicat...
 
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone Users
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone UsersTop Tips To Deliver Quality Mobile Web And App Experiences To Smartphone Users
Top Tips To Deliver Quality Mobile Web And App Experiences To Smartphone Users
 
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid
5 Best Practices for Successful Cloud Deployments – and the Pitfalls to Avoid
 
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
Best Practices For Delivering Quality Web Experiences In A Mobile, Multi-Brow...
 
Testing Tools Landscape
Testing Tools LandscapeTesting Tools Landscape
Testing Tools Landscape
 
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhone
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhoneTop Tips to Deliver Quality Web Experiences From IE 9 to the iPhone
Top Tips to Deliver Quality Web Experiences From IE 9 to the iPhone
 

Último

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGSujit Pal
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesSinan KOZAK
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...gurkirankumar98700
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 

Último (20)

#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAGGoogle AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen FramesUnblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
 
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
 
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 

Optimizing web and mobile site performance using page speed

  • 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