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.

HK CodeConf 2015 - Your WebPerf Sucks

10,000 views

Published on

These are the slides from my talk "Your WebPerf Sucks" at HK CodeConf 2015 (http://hongkong.codeconf.io) at Science Park in Hong Kong, October 24th.
Web Performance is an important aspect of building for the web and this talk highlights different aspects of what is important and what can be done to improve web performance and build faster sites. While mentioning different aspects of possible improvements, the main focus lies on optimising the critical rendering path to get pages on the screen faster and what tools can help to do so.

Published in: Software, Technology
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have a scary story when i didnt have internet nether wifi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

HK CodeConf 2015 - Your WebPerf Sucks

  1. Your WebPerf is ! Holger Bartel | @foobartel | HK CodeConf 23/10/2015
  2. So, why?
  3. 42 requests, 6.3 MB
  4. 250 requests, 6.7 MB
  5. "
  6. 86 requests, 10.2 MB
  7. Performance is a thing.
  8. Users expect ~2-3 seconds to load a site… Expectations
  9. Users expect ~2-3 seconds to load a site… That’s the definition of ‘fast’ We’re even aiming to deliver something in even less Expectations
  10. 50% of people say they'll abandon a page that takes longer than 4 seconds to load Expectations
  11. Faster is Be er!
  12. So, why?
  13. The Real World (and why you should care)
  14. 40% of surveyed online shoppers will abandon a page that takes more than 3 seconds to load.
 — Akamai (2009)
  15. Speeding up a fundraising site by 60% increased donations by 14%.
 — Kyle Rush, Obama Campaign (2012)
  16. Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent
 — Google
  17. Every additional 100 milliseconds of load time decreased sales by 1 percent.
 — Amazon
  18. Images - The Big Evil (and an easy fix)
  19. Original Optimised 2 MB @ 298 x 530 73 KB ImageOptim App
  20. 01 Oct 2012 - 15 Oct 2014 http://httparchive.org/interesting.php
  21. http://httparchive.org/interesting.php 01 Oct 2014 - 01 Oct 2015
  22. Performance is Design
  23. Performance is Design Design is Performance
  24. Performance is Design Design is Performance Design directs Performance
  25. — Ian Feather “Performance is a compromise between design and performance. You can only be as fast as the design allows.”
  26. Collaboration & communication between designers and developers nowadays is essential and more important than ever before. Breaking Silos
  27. Get designs into the browser as soon as possible, so you, your team and your client can get a be er feel for what it will be like in the real world.
  28. If your website is 15MB it’s not HTML5, it’s stupid. 
 — Christian Heilmann
  29. Ask yourself: What's the gain? What do you want to achieve?
  30. A carousel with 7 images - is it really worth the load time or just pre y to look at?

  31. Whereas it's questionable if images 3-7 will be seen in the first place.
  32. Building for Performance
  33. Rendering Pages
  34. Waiting for DOM and CSSOM to build the render tree. Render tree contains nodes to render the page. Layout computes the exact position and size. Paint turns the render tree into pixels on screen. Render-Tree Construction, Layout & Paint
  35. Wait for CSS Avoids “Flash of Unstyled Content” (FOUC) Render Blocking CSS
  36. The parser has to stop for scripts before continuing to parse HTML. JavaScript can query and modify DOM and CSSOM. JavaScript blocks DOM construction unless explicitly declared as async. Render Blocking JavaScript
  37. Every request fetched inside of HEAD, will postpone the rendering of the page Loading Assets
  38. Every request takes roughly ~200ms Avoid unnecessary redirects Limit HTTP Requests
  39. Critical Resource Critical Path Length Critical Bytes Critical Rendering Path
  40. Optimising the dependency graph between HTML, CSS, and JavaScript. Optimising the Critical Rendering Path
  41. Optimising the Critical Rendering Path = Ge ing ! on the screen fast
  42. To get our li le friend ! on the screen fast…
  43. Minimise the number of critical resources. Minimise the number of critical bytes. Minimise the critical path length. A critical resource is a resource that can block initial rendering of a page.
  44. Analyse and characterise: number of resources, bytes, length. Minimise number of critical resources. Optimise order of remaining critical resources being loaded: download critical assets as early as possible. Optimise the number of critical bytes to reduce the download time (number of roundtrips).
  45. Tools
  46. Performance Testing http://www.webpagetest.org
  47. http://tools.pingdom.com/fpt/ https://developers.google.com/speed/pagespeed/ https://developer.yahoo.com/yslow/ Performance Testing
  48. Chrome Dev Tools
  49. Perf-Tooling Today http://perf-tooling.today
  50. Perf Rocks http://perf.rocks
  51. Perf School github.com/bevacqua/perfschool
  52. With achieving fast page load time, people can quickly use your site and accomplish what they want.
  53. People will appreciate it and end up being happier users.
  54. Happier users mean be er conversion rates. Be er conversion rates can be increased revenue, more signups, returning visits, or downloads.
  55. Let’s make the web less ! So…
  56. Thanks! Holger Bartel | @foobartel | HK CodeConf 23/10/2015

×