Download as PDF, PPTX
Uploaded byHolger Bartel
HK CodeConf 2015 - Your WebPerf Sucks
The document discusses the importance of web performance, emphasizing that users expect sites to load within 2-3 seconds, with significant abandonment rates for longer load times. It highlights the balance needed between design and performance while urging collaboration between designers and developers to optimize loading times. Strategies such as minimizing critical resources and optimizing the critical rendering path are suggested to improve overall site efficiency and user satisfaction.
More Related Content
![There Are No “Buts” in Progressive Enhancement [Øredev 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/therearenobutsinprogressiveenhancementredev-151106102141-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Beyond Responsive [18F 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/beyondresponsive18f2015-150812140602-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![Planning Adaptive Interfaces [RWD Summit 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/planningadaptiveinterfacesrwdsummit2016-160330235919-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
- 1. Your WebPerf is! Holger Bartel | @foobartel | HK CodeConf 23/10/2015
- 2.
- 4.
- 6.
- 7.
- 9.
- 10. Performance is athing.
- 11. Users expect ~2-3seconds to load a site… Expectations
- 12. Users expect ~2-3seconds to load a site… That’s the definition of ‘fast’ We’re even aiming to deliver something in even less Expectations
- 13. 50% of peoplesay they'll abandon a page that takes longer than 4 seconds to load Expectations
- 14. Faster is Beer!
- 15.
- 16. The Real World (andwhy you should care)
- 17. 40% of surveyedonline shoppers will abandon a page that takes more than 3 seconds to load. — Akamai (2009)
- 18. Speeding up afundraising site by 60% increased donations by 14%. — Kyle Rush, Obama Campaign (2012)
- 19. Adding half asecond to a search results page can decrease traffic and ad revenues by 20 percent — Google
- 20. Every additional 100milliseconds of load time decreased sales by 1 percent. — Amazon
- 21. Images - TheBig Evil (and an easy fix)
- 23. Original Optimised 2 MB @298 x 530 73 KB ImageOptim App
- 24. 01 Oct 2012- 15 Oct 2014 http://httparchive.org/interesting.php
- 25. http://httparchive.org/interesting.php 01 Oct 2014- 01 Oct 2015
- 26.
- 27. Performance is Design Designis Performance
- 28. Performance is Design Designis Performance Design directs Performance
- 29. — Ian Feather “Performanceis a compromise between design and performance. You can only be as fast as the design allows.”
- 30. Collaboration & communicationbetween designers and developers nowadays is essential and more important than ever before. Breaking Silos
- 31. Get designs intothe 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.
- 32. If your websiteis 15MB it’s not HTML5, it’s stupid. — Christian Heilmann
- 33. Ask yourself: What's thegain? What do you want to achieve?
- 34. A carousel with7 images - is it really worth the load time or just pre y to look at?
- 35. Whereas it's questionable ifimages 3-7 will be seen in the first place.
- 36.
- 37.
- 38. Waiting for DOMand 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
- 39. Wait for CSS Avoids“Flash of Unstyled Content” (FOUC) Render Blocking CSS
- 40. The parser hasto 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
- 41. Every request fetchedinside of HEAD, will postpone the rendering of the page Loading Assets
- 42. Every request takesroughly ~200ms Avoid unnecessary redirects Limit HTTP Requests
- 43. Critical Resource Critical PathLength Critical Bytes Critical Rendering Path
- 44. Optimising the dependencygraph between HTML, CSS, and JavaScript. Optimising the Critical Rendering Path
- 45. Optimising the Critical Rendering Path = Geing ! on the screen fast
- 46. To get ourli le friend ! on the screen fast…
- 47. Minimise the numberof 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.
- 48. 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).
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58. With achieving fastpage load time, people can quickly use your site and accomplish what they want.
- 59. People will appreciateit and end up being happier users.
- 60. Happier users meanbe er conversion rates. Be er conversion rates can be increased revenue, more signups, returning visits, or downloads.
- 61. Let’s make theweb less ! So…
- 62. Thanks! Holger Bartel |@foobartel | HK CodeConf 23/10/2015