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.

1. Your WebPerf is !
Holger Bartel | @foobartel | HK CodeConf 23/10/2015

2. So, why?

4. 42 requests, 6.3 MB

6. 250 requests, 6.7 MB

7. "

9. 86 requests, 10.2 MB

10. Performance is a thing.

11. Users expect ~2-3 seconds to load a site…
Expectations

12. 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

13. 50% of people say they'll abandon a page that takes
longer than 4 seconds to load
Expectations

14. Faster is Be er!

15. So, why?

16. The Real World
(and why you should care)

17. 40% of surveyed online shoppers will
abandon a page that takes more than 3
seconds to load.
— Akamai (2009)

18. Speeding up a fundraising site by 60%
increased donations by 14%.
— Kyle Rush, Obama Campaign (2012)

19. Adding half a second to a search results
page can decrease traffic and ad
revenues by 20 percent
— Google

20. Every additional 100 milliseconds of load time
decreased sales by 1 percent.
— Amazon

21. Images - The Big 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. Performance is Design

27. Performance is Design
Design is Performance

28. Performance is Design
Design is Performance
Design directs Performance

29. — Ian Feather
“Performance is a compromise
between design and performance.
You can only be as fast as the
design allows.”

30. Collaboration & communication between designers
and developers nowadays is essential and more
important than ever before.
Breaking Silos

31. 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.

32. If your website is 15MB it’s not HTML5, it’s
stupid.
— Christian Heilmann

33. Ask yourself:
What's the gain?
What do you want to achieve?

34. A carousel with 7 images -
is it really worth the load
time or just pre y to look
at?

35. Whereas it's questionable
if images 3-7 will be seen
in the first place.

36. Building for
Performance

37. Rendering Pages

38. 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

39. Wait for CSS
Avoids “Flash of Unstyled Content” (FOUC)
Render Blocking CSS

40. 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

41. Every request fetched inside of HEAD, will postpone
the rendering of the page
Loading Assets

42. Every request takes roughly ~200ms
Avoid unnecessary redirects
Limit HTTP Requests

43. Critical Resource
Critical Path Length
Critical Bytes
Critical Rendering
Path

44. Optimising the dependency graph between HTML,
CSS, and JavaScript.
Optimising the Critical
Rendering
Path

45. Optimising the Critical
Rendering
Path
=
Ge ing ! on the
screen fast

46. To get our li le friend
! on the screen fast…

47. 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.

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. Tools

52. Performance Testing
http://www.webpagetest.org

53. http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/
Performance Testing

54. Chrome Dev Tools

55. Perf-Tooling Today
http://perf-tooling.today

56. Perf Rocks
http://perf.rocks

57. Perf School
github.com/bevacqua/perfschool

58. With achieving fast page load time,
people can quickly use your site and
accomplish what they want.

59. People will appreciate it and end up
being happier users.

60. Happier users mean be er
conversion rates.
Be er conversion rates can be
increased revenue, more signups,
returning visits, or downloads.

61. Let’s make the web
less !
So…

62. Thanks!
Holger Bartel | @foobartel | HK CodeConf 23/10/2015