Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Performance in a Responsive World - Codemash 2014

7a6f8abf3af4af2ab8720782b06c9d77?s=47 Rob
January 09, 2014
Programming
1
250

Performance in a Responsive World - Codemash 2014

7a6f8abf3af4af2ab8720782b06c9d77?s=128

Rob

January 09, 2014
Tweet

More Decks by Rob

See All by Rob
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
37
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
20
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
48
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
96
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
1
32
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
44
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
1
160
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
78
7a6f8abf3af4af2ab8720782b06c9d77?s=48 robharr
0
120

Other Decks in Programming

See All in Programming
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
280
Fbe7836c8ca96e3099dd5bbd83d1a391?s=48 hideg
0
360
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
13
15k
Db8a7eb9cf22f26cedce8295a53c8d7c?s=48 kawazu
0
360
7fccfb690a818ed2f3a15fc21d426d5a?s=48 texmeijin
1
110
Af64bc38c0ffcfcabdf430759ee491ce?s=48 lovee
4
220
6a1ff829a4a5333eb16f33ffc99542fd?s=48 torifukukaiou
0
130
D964b48ba3c3366cc967250087401257?s=48 deors
0
180
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
2
240
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
5
600
0c217b9a7dd0aa31ed40bd0f453727e1?s=48 ramsey
PRO
1
240
B61a8b5e5ce71ea4796afaea614bbb19?s=48 nein37
1
1.6k

Featured

See All Featured
9128d500301ae51524e887bb680f471d?s=48 caitiem20
314
18k
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
864a009ac73600c7c02e1f26629dd989?s=48 paigeccino
7
600
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
61
7.4k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
17
1.3k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
225
15k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.2k
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
333
37k
B83d5b590577969ee79a5ad845411a7d?s=48 ammeep
660
55k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.5k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
208
39k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k

Transcript

  1. Rob Harr @robertharr PERFORMANCE IN A RESPONSIVE WORLD Friday, January

    10, 14

  2. Friday, January 10, 14

  3. Let’s talk about you. Friday, January 10, 14

  4. Who, me? Friday, January 10, 14

  5. Senior Software Performance Architect Friday, January 10, 14

  6. Friday, January 10, 14

  7. Friday, January 10, 14

  8. Friday, January 10, 14

  9. What is performance? Friday, January 10, 14

  10. A simpler time Friday, January 10, 14

  11. Is performance important? Friday, January 10, 14

  12. YES! Friday, January 10, 14

  13. Has #RWD made performance worse? Friday, January 10, 14

  14. YES! Friday, January 10, 14

  15. Friday, January 10, 14

  16. This is our fault. Friday, January 10, 14

  17. Bandwidth Average Page Weights Increase by 32% in 2013 http://www.sitepoint.com/average-page-weights-increase-32-2013/

    Friday, January 10, 14

  18. Bandwidth As of March of 2012, 86% of the sites

    on mediaqueri.es demonstrated the same weight and load time at resolutions from 300ish to 1200ish. via @guypod http://www.guypo.com/mobile/performance-implications-of- responsive-design-book-contribution/ Friday, January 10, 14

  19. Responsive & Responsible via @scotjehl https://speakerdeck.com/scottjehl/responsive-responsible http://www.lukew.com/ff/entry.asp?1565 Friday, January 10,

    14

  20. Pixel Density Most new mobile devices have high pixel density

    displays: Apple iPhone 4+: 326 PPI Amazon Kindle Fire HD 8.9: 254 PPI Nokia Lumia 920: 332 PPI BlackBerry Z10: 356 PPI Samsung Galaxy Note: 285 PPI Friday, January 10, 14

  21. PERFORMANCE IN A RESPONSIVE WORLD BACK TO THE BASICS Friday,

    January 10, 14

  22. The things that were important to performance before #RWD are

    still the most important things. Friday, January 10, 14

  23. Things that will affect site performance. ‣ Server time ‣

    Number of requests ‣ Total download size of required assets ‣ Rendering of the CSS and JS init Friday, January 10, 14

  24. “The fastest HTTP request is the one not made.” -

    Steve Souders Friday, January 10, 14

  25. Server Time Friday, January 10, 14

  26. PERFORMANCE IN A RESPONSIVE WORLD CHANGE THE WAY WE WORK

    Friday, January 10, 14

  27. The first step is to actually start to care. Friday,

    January 10, 14

  28. Let’s not blame the technique or the tools but the

    implementation. Friday, January 10, 14

  29. So? Friday, January 10, 14

  30. We have to change our process. Friday, January 10, 14

  31. Traditional Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Friday,

    January 10, 14

  32. Traditional Linear Workflow M ake it FA ST! CONTENT UX

    DESIGN FRONT-END BACK-END LAUNCH! Friday, January 10, 14

  33. Traditional Linear Workflow M ake it FA ST! CONTENT UX

    DESIGN FRONT-END BACK-END LAUNCH! Friday, January 10, 14

  34. This doesn’t work. Friday, January 10, 14

  35. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX Friday,

    January 10, 14

  36. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE

    DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Friday, January 10, 14

  37. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX M

    ake it FA ST! Make it FAST! Make it FAST! Make it FAST! M ake it FA ST! Friday, January 10, 14

  38. Let’s invite everyone into the process. Friday, January 10, 14

  39. This will allow your team to focus on performance at

    every step. Friday, January 10, 14

  40. In the end site performance is really about user experience.

    Friday, January 10, 14

  41. Make it feel fast. I like to call this perceived

    performance. Friday, January 10, 14

  42. Performance Budget http://clearleft.com/thinks/responsivedesignonabudget/ Friday, January 10, 14

  43. You have to take the time to test for performance.

    Friday, January 10, 14

  44. PERFORMANCE IN A RESPONSIVE WORLD SOME GOOD IDEAS Friday, January

    10, 14

  45. Decrease the number of requests. Friday, January 10, 14

  46. CSS at the top. Friday, January 10, 14

  47. JS at the bottom. Friday, January 10, 14

  48. Concat and minify CSS/JS. Friday, January 10, 14

  49. Optimize or cut out images. Friday, January 10, 14

  50. “Compressive” Images ‣ http://filamentgroup.com/lab/ rwd_img_compression/ ‣ Increases the image dimensions

    and adds maximum compression. Friday, January 10, 14

  51. Icon Fonts ‣ Fonts by default are resolution independent, Icon

    fonts are no different. ‣ http://icomoon.io/app/ allows you to create your own icon fonts ‣ They do require a bit more markup, and JS for IE 7 and lower. Friday, January 10, 14

  52. Picture Fill ‣ A Responsive Images approach that you can

    use today that mimics the proposed picture element usingspans, for safety sake. ‣ https://github.com/scottjehl/ picturefill Friday, January 10, 14

  53. Sprites Friday, January 10, 14

  54. Use GZIP Friday, January 10, 14

  55. Use GZIP Friday, January 10, 14

  56. File Fingerprinting. application-e8b17301ad701ee8a318ed37d286643b.css File Extension File Name File Content Hash

    Friday, January 10, 14

  57. <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 second" ExpiresByType

    text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 518400 seconds" ExpiresByType image/jpeg "access plus 518400 seconds" ExpiresByType image/png "access plus 518400 seconds" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 216000 seconds" </ifmodule> Caching Configuration Friday, January 10, 14

  58. <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 second" ExpiresByType

    text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 518400 seconds" ExpiresByType image/jpeg "access plus 518400 seconds" ExpiresByType image/png "access plus 518400 seconds" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 216000 seconds" </ifmodule> Caching Configuration Friday, January 10, 14

  59. <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 second" ExpiresByType

    text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 518400 seconds" ExpiresByType image/jpeg "access plus 518400 seconds" ExpiresByType image/png "access plus 518400 seconds" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 216000 seconds" </ifmodule> Caching Configuration Friday, January 10, 14

  60. <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 second" ExpiresByType

    text/html "access plus 7200 seconds" ExpiresByType image/gif "access plus 518400 seconds" ExpiresByType image/jpeg "access plus 518400 seconds" ExpiresByType image/png "access plus 518400 seconds" ExpiresByType text/css "access plus 1 month" ExpiresByType text/javascript "access plus 216000 seconds" </ifmodule> Caching Configuration Friday, January 10, 14

  61. Choose your third party apps/libs/services wisely. Friday, January 10, 14

  62. Only serve the browser what is needed. Friday, January 10,

    14

  63. Conditionally load extra stuff. http://24ways.org/2011/conditional-loading-for-responsive-designs/ Friday, January 10, 14

  64. Homepage image carousels Friday, January 10, 14

  65. FOUT Friday, January 10, 14

  66. TOOLS PERFORMANCE IN A RESPONSIVE WORLD Friday, January 10, 14

  67. Friday, January 10, 14

  68. Pingdom Friday, January 10, 14

  69. Google Page Speed Friday, January 10, 14

  70. Web Inspector Friday, January 10, 14

  71. CSS Pre-processors. Friday, January 10, 14

  72. EXAMPLES PERFORMANCE IN A RESPONSIVE WORLD Friday, January 10, 14

  73. Large assets Friday, January 10, 14

  74. Hero Replacements Friday, January 10, 14

  75. Client side caching Friday, January 10, 14

  76. LOAD TESTING PERFORMANCE IN A RESPONSIVE WORLD Friday, January 10,

    14

  77. WHAT’S NEXT? PERFORMANCE IN A RESPONSIVE WORLD Friday, January 10,

    14

  78. Static Site Revolution Friday, January 10, 14

  79. Client Side JS Applications Friday, January 10, 14

  80. Content Strategy Friday, January 10, 14

  81. Focus on Perceived Performance Friday, January 10, 14

  82. Questions? Friday, January 10, 14

  83. THANKS! @robertharr rob@heysparkbox.com Friday, January 10, 14