Dark Arts - Light Speed. My CSS DEV CONF slides.

1. CSS DEV CONF 2015
DARK ARTS of LIGHT SPEED
@HenriHelvetica #DarkArts

5. what is performance?

9. what is web performance?

10. it’s all about speed.

11. it’s all about seconds.

12. we have 3G, 4G/LTE, high speed
internet - we good.

13. CSS3, Retina®, new browser features,
iOS9, Android - we good, right?

15. “ [the front end is] The most
hostile development
platform in the world.” -
Peter Paul Koch

16. “front end development suffers from
the embarrassment of riches.” - me

17. it’s all about seconds.

18. “47% customer expect loads of 2 secs
or less” - Forrester Consulting

19. “A 10 second delay will often make
users leave a site immediately.”
- Jakob Nielsen

20. “57% of visitors will abandon a page
that takes 3 seconds or more to load.”
- Akamai

21. if it can be measured, we can improve it.

22. “ We need to shift from network-
based metrics to user experience
metrics that focus on rendering and
when content becomes available “
- Steve Souders

23. another intangible:

24. another intangible: culture.

25. another intangible: culture.

26. another intangible: culture.

28. 1. patty (html)
2. bread (images)

29. WEB
TODAY

30. 1. angus beef (html)
2. angus beef (framework)
3. rustic bread (images)
4. sautéed mushrooms (js)
5. sautéed onions (fonts)
6. chipotle mayo (css)
7. havarti jalapeño (js)
8. salt (js)

31. imgs html css scripts fonts video other

32. anatomy of a page load.

35. HTML gets loaded

38. javascript loading.

41. javascript loading.

42. <script> loading.

44. <script w/ async> loading.

46. <script src=“javascript.js” async></script>

47. <script w/ defer> loading.

49. <script src=“javascript.js” defer></script>

51. font loading.

54. @font-face

55. @font-face - @font-face-palm

56. FOUT: Flash Of Unstyled Text

57. FOIT: Flash Of Invisible Text

58. browsers do as they please.

59. web fonts subsetting.

62. http://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek

63. http://fonts.googleapis.com/css?family=Inconsolata&text=Hello

64. css loading.

65. the critical css.

68. css loading.

70. css loading.

71. web images.

74. web images.

75. jpg png gif WebP SVG

76. 72% of pages send same
page weight to mobile.

77. We web developers have a history
of placing blame on technology,
rather than ourselves. - Mat Marquis

81. <srcset>
<picture>

82. <srcset>
<picture>

84. best of the rest.

85. tools.

91. merci.