Frontend performance - where it matters

The fact that it matters if your site takes 2 or 20 seconds to load probably does not surprise you. But how does this knowledge impact your frontend coding? There are plenty of advices on how to make your page faster. Some of them only apply to very big international sites, some of them only save you milliseconds. But there are some best practices, some tricks to be aware of and some traps to avoid.

Transcript

1. FRONTEND PERFORMANCE WHERE IT MATTERS Frontend Conference 2013 Urban Etter
2. ABOUT ME
3. URBAN LEGENDS
4. URBAN MYTHS
6. URBAN ETTER
8. SCHWEIZER RADIO UND FERNSEHEN
9. ARCHITECT
10. PART OF THE FRONTEND TEAM
11. @URBMC
12. PERFORMANCE IS A HUGE TOPIC
13. CACHE INVALIDATION
14. VERTICAL SCALING
15. DATABASE CLUSTERS
16. THIS TALK IS NOT ABOUT THAT
17. ADVICES FOR CREATING SINGLE-PAGE WEB APPS
18. [ ' h e l l o ' , ' w o r l d ' ] . j o i n ( ' ' ) instead of ' h e l l o ' + ' ' + ' w o r l d '
19. THIS TALK IS NOT ABOUT THAT EITHER
20. GOOD PRACTICE
21. SOME TRAPS
22. SOME CODE
23. FRONTEND PERFORMANCE FOR THE CRAFTSMAN
24. #1 PERFORMANCE MATTERS #2 LOADING PROCESS #3 DON'T BLOCK THE BROWSER #4 DEFERRED LOADING OF JS
25. #5 BROWSER CACHE #6 TOOLS #7 DOM MANIPULATION #8 RECAP
26. #1 PERFORMANCE MATTERS
27. ... that slowing down the search results page by 100 to 400 milliseconds has a measurable impact on the number of searches per user of -0.2% to -0.6% by Google
28. To get that sensation, your requests need to take less than 100ms. by 37 signals
29. PERFORMANCE IS A FEATURE
30. IT TAKES EFFORT TO GET IT RIGHT
31. IT CONFLICTS WITH OTHER FEATURES REDUCED COMPLEXITY MAINTAINABILITY SECURITY
32. COMPLEX
33. INVOLVES EVERY DISCIPLINE IN WEB DEVELOPMENT
34. #2 LOADING PROCESS
35. KEY TO FRONTEND PERFORMANCE IS TO UNDERSTAND THE PAGE LOADING PROCESS
37. A LOT FASTER A LOT MORE FILES
40. TIMING POINT #1: FETCH THE INITIAL HTML TIMING POINT #2: REACH DOM READY TIMING POINT #3: REACH "LOADED" EVENT
42. NOT ALL IMAGES LOAD IN PARALLEL
43. RESTRICTION IS PART OF THE HTTP STANDARD
44. 2 PARALLEL CONNECTIONS PER HOST for older browsers
45. MODERN BROWSERS 6 PARALLEL CONNECTIONS PER HOST
46. #3 DON'T BLOCK THE BROWSER
47. < h e a d > < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e . c s s " > < s c r i p t s r c = " s c r i p t . j s " > < / s c r i p t > < / h e a d > < b o d y > M y f a n c y c o n t e n t < / b o d y >
48. JS LOADING AND PARSING BLOCKS THE RENDERING PROCESS
49. SOLUTION 1
50. USE THE A S Y N C ATTRIBUTE
51. < h e a d > < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e . c s s " > < s c r i p t s r c = " s c r i p t . j s " a s y n c > < / s c r i p t > < / h e a d > < b o d y > M y f a n c y c o n t e n t < / b o d y >
52. A S Y N C == NOT BLOCKING
53. SOLUTION 2 Preferred
54. PUT JS AT THE END OF THE BODY TAG
55. < h e a d > < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e . c s s " > < / h e a d > < b o d y > M y f a n c y c o n t e n t < s c r i p t s r c = " s c r i p t . j s " > < / s c r i p t > < / b o d y >
56. #4 DEFERRED LOADING OF JAVASCRIPT
57. NOT ALL JS IS NEEDED IN ALL SITUATIONS
59. LOAD CALENDAR JS WHEN CLICKING ON THE CALENDAR
61. LOAD CALENDAR JS WHEN HOVERING OVER THE CALENDAR
62. PROBLEM: DELAY ON HOVERING
63. LOAD CALENDAR JS WHEN ALL OTHER CODE IS LOADED
64. RESULT: ADDED COMPLEXITY
65. PERFORMANCE IS A FEATURE
66. NOT WORTH IT UNLESS YOU ARE CREATING A SINGLE-PAGE APPLICATION
67. BEEN THERE, DONE THAT
68. DEFERRED != BAD
69. DEFERRED IMAGE LOADING FTW
71. LAZY LOAD JQUERY PLUGIN Lazy load plugin for jQuery
72. < i m g s r c = " i m g / p l a c e h o l d e r . p n g " d a t a - o r i g i n a l - s r c = " i m g / r e a l _ i m a g e . j p g " >
73. #5 BROWSER CACHE
74. THE GOOD AND THE BAD PARTS
75. ALL JS IN ONE FILE TELL THE BROWSER TO CACHE IT BROWSER ONLY HAS TO DOWNLOAD IT ONCE
76. FREE FOR THE REST OF THE STAY
77. BETTER HAVE ONE BIG REQUEST
78. THAN HAVE A LOT OF SMALL REQUESTS
79. CSS SPRITES
82. . s p r i t e - m u s i k w e l l e { b a c k g r o u n d - p o s i t i o n : 0 0 ; . s p r i t e - s r f 1 { b a c k g r o u n d - p o s i t i o n : - 6 6 p x 0 ; w i . s p r i t e - s r f 2 { b a c k g r o u n d - p o s i t i o n : - 1 3 2 p x 0 ; w . s p r i t e - s r f 3 { b a c k g r o u n d - p o s i t i o n : - 1 9 8 p x 0 ; w . s p r i t e - s r f 4 { b a c k g r o u n d - p o s i t i o n : - 2 6 4 p x 0 ; w . s p r i t e - v i r u s { b a c k g r o u n d - p o s i t i o n : - 3 3 0 p x 0 ;
83. PERFORMANCE IS A FEATURE
84. COMPLEXITY VS PERFORMANCE
85. THE BAD PARTS
86. YOU CHANGE YOUR CSS
87. BROWSER CACHED CSS
89. < s c r i p t s r c = " s c r i p t . j s " > < / s c r i p t >
90. < s c r i p t s r c = " s c r i p t . j s ? v = 1 2 " > < / s c r i p t >
91. < h e a d > < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e . c s s " > < / h e a d > < b o d y > M y f a n c y c o n t e n t { r e n d e r _ i n c l u d e ( ' g l o b a l ' ) } < / b o d y >
92. [ g l o b a l ] j a v a s c r i p t [ ] = j q u e r y . j s j a v a s c r i p t [ ] = j q u e r y . c o o k i e . j s . . .
93. f u n c t i o n r e n d e r _ i n c l u d e ( g r o u p N a m e ) { f i l e s = g e t F i l e s B y G r o u p ( g r o u p N a m e ) ; i f ( f i l e s . n e w e s t > l a s t R u n . t i m e s t a m p ) { r e s u l t = p a c k ( c o n c a t e n a t e ( f i l e s ) ) ; f i l e n a m e = m d 5 ( f i l e s . n e w e s t ) ; s a v e _ f i l e ( f i l e n a m e , r e s u l t ) ; } e l s e { f i l e n a m e = l a s t R u n . f i l e n a m e ; } r e t u r n ' < s c r i p t s r c = " f i l e n a m e " > ' ; }
94. #6 TOOLS
95. YSLOW
96. CHROME DEVELOPER TOOLS
97. GOOGLE PAGESPEED INSIGHTS
98. WEB PAGE TEST
101. REGRESSION TEST
102. SHOW SLOW
103. #7 DOM MANIPULATION
104. DOM INTERNAL HTML REPRESENTATION ACCESSIBLE BY JS
105. $ ( ' # m s g ' ) . a d d C l a s s ( ' v e r y _ i m p o r t a n t ' ) ; LOOK UP THE ELEMENT WITH ID "MSG" IN THE INTERNAL STRUCTURE MODIFY THE INTERNAL STRUCTURE RERENDER (AT LEAST PARTS) OF THE PAGE
106. SAVE DOM MANIPULATIONS
107. REAL WORLD EXAMPLE
109. FILTERING
110. COLUMN MARKUP IN 2 <UL>S
111. HTML - SELECTS < s e l e c t i d = " t o p i c " > < o p t i o n v a l u e = " t o p i c : n e w s " > N e w s < / o p t i o n > < o p t i o n v a l u e = " t o p i c : t w i t t e r - r e l e v a n t " > T w i t t e r r e l e v a n t < / o p t i o n > < / s e l e c t >
112. HTML - LETTERS < d i v c l a s s = " l e t t e r " d a t a - l e t t e r = " t " > < u l > < l i d a t a - a t t r = " t o p i c : n e w s , s t a t i o n : s r f 1 " > T a g e s s c h a u < / l i > < / u l > < u l > < l i d a t a - a t t r = " t o p i c : t w i t t e r - r e l e v a n t " > T a t o r t < / l i > < / u l > < / d i v >
113. FIRST APROACH v a r t o p i c = $ ( ' # t o p i c - f i l t e r ' ) . v a l ( ) ; v a r s t a t i o n = $ ( ' # s t a t i o n - f i l t e r ' ) . v a l ( ) ; v a r s e l e c t o r = ' [ d a t a - a t t r * = " ' + t o p i c + ' " ] ' + ' [ d a t a - a t t r * = " ' + s t a t i o n + ' " ] ' ; $ ( ' l i ' ) . s h o w ( ) ; / / r e s e t $ ( ' l i : n o t ( ' + s e l e c t o r + ' ) ' ) . h i d e ( ) ;
114. RESULT
115. SECOND APPROACH HIDE ALL SHOWS ITERATE THROUGH LETTERS CLONE MATCHING SHOWS APPEND CLONED SHOWS TO LEFT OR RIGHT LIST SHOW CLONED SHOWS
116. ITERATING AND CLONING $ ( ' d i v . l e t t e r ' ) . e a c h ( f u n c t i o n ( ) { $ ( ' l i . s h o w ' ) . h i d e ( ) . f i n d ( s e l e c t o r ) . c l o n e ( ) . a d d C l a s s ( ' c o p i e d ' ) . a p p e n d T o ( ' b o d y ' ) ; . . . } ) ;
117. ITERATING AND CLONING . . . $ ( ' l i . c o p i e d ) . e a c h ( f u n c t i o n ( ) { / / a p p e n d t o l e f t o r r i g h t u l $ ( t h i s ) . s h o w ( ) ; } ) ; . . .
119. THIS WAS SLOW
120. THIRD APPROACH
121. ITERATING $ r e p o s i t o r y = $ ( ' l i . s h o w ' ) . h i d e ( ) ; $ ( ' d i v . l e t t e r ' ) . e a c h ( f u n c t i o n ( ) { $ r e p o s i t o r y . f i n d ( s e l e c t o r ) . c l o n e ( ) . e a c h ( f u n c t i o n ( ) { / / a p p e n d t o l e f t o r r i g h t u l } ) . s h o w ( ) ; } ) ;
122. THIS WAS FAST
123. WHAT'S THE DIFFERENCE
124. SECOND APPROACH INSERTING CLONED NODES IN DOM AND WORK ON THEM
125. THIRD APPROACH DO NOT INSERT UNTIL READY
126. DOM MANIPULATION IS THE KEY HERE
127. #8 RECAP
128. PERFORMANCE IS A FEATURE
129. CSS IN THE HEAD JS JUST BEFORE CLOSING TAG OF BODY
130. PUT ALL YOUR CSS AND JS IN ONE FILE
131. VERSION CSS AND JS FILES
132. USE TOOLS TO MEASURE PERFORMANCE OVER TIME
133. SAVE DOM MANIPULATIONS
134. Q&A
135. THANK YOU! SLIDES AT SPEAKERDECK.COM/URBANETTER @URBMC