• Save
Optimizing web and mobile site performance using page speed
Upcoming SlideShare
Loading in...5
×
 

Optimizing web and mobile site performance using page speed

on

  • 4,290 views

End-users’ expectations for web and mobile site performance keep rising. In a 2011 survey of 4,014 mobile web users 71% stated they expect websites to load as quickly, almost as quickly or faster on ...

End-users’ expectations for web and mobile site performance keep rising. In a 2011 survey of 4,014 mobile web users 71% stated they expect websites to load as quickly, almost as quickly or faster on their mobile phone than on the computer they use at home – up from 58% in 2009.

With web and mobile sites your customers expect transactions that are fast and work faultlessly. Failure to deliver quality web experiences through slow or malfunctioning sites will result in lost customers and business.

Featured speakers, Bryan McQuade, Senior Software Engineer at Google and Page Speed tech lead, and Compuware APM CTO Steve Tack show:

• What end-users rising performance expectations mean for website owners and developers

• The impact of web and mobile site performance on business results

• Best practices to optimize web and mobile site performance using Page Speed

Statistics

Views

Total Views
4,290
Views on SlideShare
4,290
Embed Views
0

Actions

Likes
7
Downloads
1
Comments
1

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • good color
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Optimizing web and mobile site performance using page speed Optimizing web and mobile site performance using page speed Presentation Transcript

  • Optimizing Web And Mobile SitePerformance 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 4Web 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 10Response 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 16Response 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 RateAbandonment 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 LoadMainframe 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 OfHosts 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 frameworks12.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.00Average Load Time (sec.) 14.00 12.00 10.00 8.00 6.00 4.00 2.00 0.00Source: Gomez Real-User Monitoring • Real users around the world • ~200,000,000 page measurements
  • Front-End Performance OptimizationMore 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 SpeedTo Optimize Your Mobile Web Site PerformanceBryan McQuadeStaff Software EngineerGoogle 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 17Source: http://goo.gl/tGhCn
  • Components of a mobile web page load Server Network ClientProcessing 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 23Source:
  • 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 25Source: Libo Song
  • Agenda• Mobile web performance overview• Key differences on mobile• Page Speed rules for mobile 26
  • Page Speed Rules for Mobile1. Use an Application Cache2. Defer parsing of JavaScript3. Make landing page redirects cacheable4. 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-zoomTry 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 yearFor more information visit Compuware.com or contact us at +1 781.778.2700