Performance in a Responsive World - Codemash 2014

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