Frontend performance - where it matters

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.

F1a81e1cfca792b9754e2489a8fed53f?s=128

Urban Etter

August 21, 2013
Tweet

Transcript

  1. FRONTEND PERFORMANCE WHERE IT MATTERS Frontend Conference 2013 Urban Etter

  2. ABOUT ME

  3. URBAN LEGENDS

  4. URBAN MYTHS

  5. None
  6. URBAN ETTER

  7. None
  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
  36. None
  37. A LOT FASTER A LOT MORE FILES

  38. None
  39. None
  40. TIMING POINT #1: FETCH THE INITIAL HTML TIMING POINT #2:

    REACH DOM READY TIMING POINT #3: REACH "LOADED" EVENT
  41. None
  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

  58. None
  59. LOAD CALENDAR JS WHEN CLICKING ON THE CALENDAR

  60. None
  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

  70. None
  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

  80. None
  81. None
  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

  88. None
  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

  99. None
  100. None
  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

  108. None
  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 ( ) ; } ) ; . . .
  118. None
  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