Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizing web performance (Fronteers edition)

6,372 views

Published on

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.

In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Optimizing web performance (Fronteers edition)

  1. 1. Optimizing Web Performance Dave Olsen, @dmolsen West Virginia University http://flic.kr/p/7A8xxN
  2. 2. What I’ll Talk About • Quick Intro About Why We Should Care About Web Perf • Diagnosing Perf Problems • Easy Web Performance Optimization Wins • Tools to Help Test & Automate Perf Optimizations • Setting Up a Device Lab
  3. 3. WHY SHOULD WE CARE ABOUT WEB PERFORMANCE? http://flic.kr/p/4JY1Yr
  4. 4. brad’s iceberg © Brad Frost © Brad Frost
  5. 5. The way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for small screens. Source: Jason Grigsby on Speakerdeck - Jason Grigsby, @grigs
  6. 6. brad’s iceberg © Brad Frost© Brad Frost © Brad Frost
  7. 7. The average weight of a web page today: Source: HTTP Archive Images JavaScript Flash HTML CSS Other 78% 1.8 MB
  8. 8. RWD sites whose small screen design weighs the same as the large screen design. Source: Podjarny, 2013 72%
  9. 9. Users expect your mobile site to load as quickly as your desktop site. 71% Source: Gomez
  10. 10. Bounce Rate Conversion Rate Cart Size PageViews 200ms - - - -1.2% 500ms -4.7% -1.9% - -5.7% 1000ms -8.3% -3.5% -2.1% -9.4% CASE STUDY: MOBILE PERFORMANCE EFFECT ON BUSINESS Source: Web Performance Today
  11. 11. Mobile first means performance first.
  12. 12. Over Downloading Download & Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
  13. 13. Current Dev Practices + Desktop First RWD Web Performance Blues REVIEWING WHY WE SHOULD CARE
  14. 14. sad face https://flic.kr/p/9g5Gg8
  15. 15. https://flic.kr/p/6DBSCi DIAGNOSING WEB PERFORMANCE ISSUES
  16. 16. THE BASICS: PAGESPEED INSIGHTS developers.google.com/speed/pagespeed/insights
  17. 17. NEXT STEPS: CHROME DEV TOOLS dev tools is more than just the elements view!
  18. 18. NEXT STEPS: CHROME DEV TOOLS COURSE udacity.com/course/ud884/
  19. 19. DEEP CUTS: WEBPAGETEST www.webpagetest.org
  20. 20. DEEP CUTS: WEBPAGETEST note the big red F :(
  21. 21. WEBPAGETEST FEATURES • Test real browsers from mult. locations • Modify connection speeds • Video capture • Content blocking • Script the session • Use with continuous integration • Collect tests over time • Free
  22. 22. REVIEW OF DIAGNOSTIC TOOLS • Fast & easy? Pagespeed Insights • Local development? Chrome Dev Tools • Customization? WebPagetest
  23. 23. http://flic.kr/p/4zzKee easy web performance optimization wins EASY WEB OPTIMIZATION WINS https://flic.kr/p/nYDzXn
  24. 24. Performance http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e A budget is a guide, not a hard & fast limit. Performance tweaks are compromises.
  25. 25. MOBILE OPTIMIZATION TENETS 1. Reduce requests 2.Reduce asset size 3.Speed-up page render http://flic.kr/p/4zzKee
  26. 26. Best request is no request. Source: Ilya Grigorik - Ilya Grigorik, @ilyagrigorik
  27. 27. WEB PERF & SERVER-SIDE: EASY WINS Compress HTML & CSS If you’re using Apache make sure to use mod_deflate so text-based assets are compressed for transfer. Browser cache The simplest way to reduce requests is to make sure the browser doesn’t need to make them. Make sure assets are bring cached on the browser. Try redbot.org to see if you’re caching. Avoid AJAX requests Think critically about how you use AJAX. You may be able to increase perceived performance by “caching” mark-up in script tags.
  28. 28. WEB PERFORMANCE & IMAGES: EASY WINS Try to avoid images When possible think about avoiding images. Implement with CSS or Canvas. Or use SVG or Progressive JPEGs. Image compression Choose appropriate image formats and compress within reason. Consider using CSS sprites. Responsive images Use srcset to serve regular images. You can use picture to serve art directed responsive images. Avoid dark matter display: none; hides content. It doesn’t stop content from loading. Properly set media queries.
  29. 29. WEB PERF & IMAGES: TOOLS Grunt & Gulp Tools imagemin, image-resize, spritesmith, svgmin On the Web kraken.io, smushit.com, spriteme.org, imigix.com
  30. 30. CDNs Consider using CDNs to serve common JS libraries to help reduce RTT for requests. WEB PERF & JAVASCRIPT: EASY WINS MicroJS or, even better, Vanilla JS Avoid using bulky frameworks if you’re using them for simple tasks like selectors. Try microjs.com to find libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page. Use Touch or FastClick While not directly related to page render, by making sure your links use a Touch event or FastClick rather than an onClick event user interactions will speed up by 300ms. Avoid DOM reflows & repaints By using JS to modify the DOM you can cause unnecessary reflows & repaints of your browser. They slow down page render time as well as burn battery.
  31. 31. WEB PERF & JAVASCRIPT: TOOLS Grunt & Gulp Tools uglify, concat, closure- compiler, google-cdn On the Web microjs.com, developer.mozilla.org, developers.google.com
  32. 32. CONTENT BREAKDOWN
  33. 33. WEB PERF & 3rd PARTY CODE: EASY WINS Beware the SPOF Be careful regarding what 3rd-party code you use on your pages. Downtime for them can mean slow loading pages for you. Try using spof-o-matic in the Chrome Web Store to see how your page is affected. Avoid SM widgets Try using simple links to services rather than utilizing their JavaScript widgets. They’re performance hogs. Removing the widgets also increases user privacy. 2- click social widgets from Heise is a good solution.
  34. 34. TESTING SPOF
  35. 35. Worst request is one that blocks the parser. Source: Ilya Grigorik - Ilya Grigorik, @ilyagrigorik
  36. 36. Image source: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ THE CRITICAL RENDERING PATH
  37. 37. LEARN TO LOVE THE WATERFALL
  38. 38. LEARN TO LOVE THE WATERFALL onload start render domcontentloaded
  39. 39. CRITICAL RENDERING PATH: FILMSTRIP VIEW
  40. 40. CRITICAL RENDERING PATH: % COMPLETE
  41. 41. CRITICAL RENDERING PATH: EASY WINS Defer loading of JavaScript Place script elements just above the body tag. Otherwise use HTML5’s script defer & async attributes to avoid blocking the parser. Can also insert script elements into the DOM using the onload event. Inline Critical CSS & Defer Rest Place critical CSS directly within your document and load the rest of the CSS after onload with JavaScript. Use a service like Penthouse to find critical CSS. Same DNS origin Above the fold elements should be on the same hostname. Reduces DNS look-ups. Possible to try for a single request for all above the fold content?
  42. 42. The ultimate goal is a narrower, shorter waterfall. Also focus on getting a fast initial render.
  43. 43. http://flic.kr/p/bMdzZ2 TEST THE SQUISHY default styles vs. min-width vs. max-width
  44. 44. SCRIPTING & CUSTOM VIEWPORTS
  45. 45. SCRIPTING & CUSTOM VIEWPORTS
  46. 46. Google Analytics Site Speed www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - BEYOND THE BASICS
  47. 47. REVIEWING TOP TIPS FOR EASY WINS • Budget to give yourself and a client a performance goal • Enable cache headers • Enable compression • Properly format or reduce images • Defer as much as you can • Use a task runner to build web performance into your workflow
  48. 48. RESS can be a scalpel for your responsive designs. REsponsive Design + Server Side Components http://flic.kr/p/a4VsPv
  49. 49. RESS: AN EVOLUTION OF RESPONSIVE DESIGN slidesha.re/KtByzQ it is not an “evolution” but just another tool
  50. 50. Testing Tools toolbox, tools MORE WEB PERFORMANCE TOOLS http://flic.kr/p/4BZsQJ
  51. 51. LIST OF PERF TOOLS perf-tooling.today
  52. 52. Google Analytics Site Speed GOOGLE ANALYTICS’ SITE SPEED
  53. 53. PERFORMANCE MONITORING speedcurve.com
  54. 54. PERFMAP (alpha) github.com/zeman/perfmap
  55. 55. REAL USER TESTING yahoo.github.io/boomerang/doc/
  56. 56. MOD_PAGESPEED: PERF AUTOMATION developers.google.com/speed/pagespeed/mod   add_head   combine_css    convert_jpeg_to_progressive    convert_meta_tags    extend_cache    flatten_css_imports    inline_css    inline_import_to_link    inline_javascript    rewrite_css    rewrite_images    rewrite_javascript    rewrite_style_attributes_with_url Default Filters
  57. 57. DEVICES http://flic.kr/p/cfkZhN
  58. 58. REMOTE DEBUGGING
  59. 59. charlesproxy.com SLOWING THINGS DOWN NLCCharles
  60. 60. USING CHARLES PROXY blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
  61. 61. eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
  62. 62. OPENDEVICELAB.COM
  63. 63. SUMMING IT ALL UP • Open conversations using a performance budget • First render speed is more important than pure resource size • Integrate perf into your workflow • Test, evaluate, and monitor
  64. 64. WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @bbinto @scottjehl just a sampling @tameverts
  65. 65. Dave Olsen Professional Technologist West Virginia University @dmolsen THANKS FOR LISTENING
  66. 66. QUESTIONS?
  67. 67. Dave Olsen Professional Technologist West Virginia University @dmolsen THANKS AGAIN FOR LISTENING

×