Performance in a Responsive World - Converge 2013

Transcript

1. Rob Harr @robertharr PERFORMANCE IN A RESPONSIVE WORLD Monday, April 29, 13
2. Let’s talk about you. Monday, April 29, 13
3. Who, me? Monday, April 29, 13
4. Senior Software Performance Architect Monday, April 29, 13
5. What is performance? Monday, April 29, 13
6. A simpler time Monday, April 29, 13
7. Is performance important? Monday, April 29, 13
8. YES! Monday, April 29, 13
9. Has #RWD made performance worse? Monday, April 29, 13
10. This is our fault. Monday, April 29, 13
11. 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/ Monday, April 29, 13
12. Responsive & Responsible via @scotjehl https://speakerdeck.com/scottjehl/responsive-responsible http://www.lukew.com/ff/entry.asp?1565 Monday, April 29, 13
13. 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 Monday, April 29, 13
14. PERFORMANCE IN A RESPONSIVE WORLD BACK TO THE BASICS Monday, April 29, 13
15. The things that were important to performance before #RWD are still the most important things. Monday, April 29, 13
16. Things that will affect site performance. ‣ Server time ‣ Number of requests ‣ Total download size of required assets ‣ Rendering of the CSS and JS init Monday, April 29, 13
17. “The fastest HTTP request is the one not made.” - Steve Souders Monday, April 29, 13
18. Server Time. Monday, April 29, 13
19. PERFORMANCE IN A RESPONSIVE WORLD CHANGE THE WAY WE WORK Monday, April 29, 13
20. The first step is to actually start to care. Monday, April 29, 13
21. Let’s not blame the technique or the tools but the implementation. Monday, April 29, 13
22. So? Monday, April 29, 13
23. We have to change our process. Monday, April 29, 13
24. Traditional Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, April 29, 13
25. Traditional Linear Workflow M ake it FA ST! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, April 29, 13
26. Traditional Linear Workflow M ake it FA ST! CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Monday, April 29, 13
27. This doesn’t work. Monday, April 29, 13
28. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX Monday, April 29, 13
29. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Monday, April 29, 13
30. 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! Monday, April 29, 13
31. Let’s invite everyone into the process. Monday, April 29, 13
32. This will allow your team to focus on performance at every step. Monday, April 29, 13
33. In the end site performance is really about user experience. Monday, April 29, 13
34. Make it feel fast. Monday, April 29, 13
35. Performance Budget http://clearleft.com/thinks/responsivedesignonabudget/ Monday, April 29, 13
36. You have to take the time to test for performance. Monday, April 29, 13
37. PERFORMANCE IN A RESPONSIVE WORLD SOME GOOD IDEAS Monday, April 29, 13
38. Decrease the number of requests. Monday, April 29, 13
39. CSS at the top. Monday, April 29, 13
40. JS at the bottom. Monday, April 29, 13
41. Concat and minify CSS/JS. Monday, April 29, 13
42. Optimize or cut out images. Monday, April 29, 13
43. “Compressive” Images ‣ http://filamentgroup.com/lab/ rwd_img_compression/ ‣ Increases the image dimensions and adds maximum compression. Monday, April 29, 13
44. 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. Monday, April 29, 13
45. Sprites Monday, April 29, 13
46. Use GZIP. Monday, April 29, 13
47. Use GZIP Monday, April 29, 13
48. File Fingerprinting. application-e8b17301ad701ee8a318ed37d286643b.css File Extension File Name File Content Hash Monday, April 29, 13
49. <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 Monday, April 29, 13
50. <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 Monday, April 29, 13
51. <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 Monday, April 29, 13
52. <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 Monday, April 29, 13
53. Choose your third party apps/libs/services wisely. Monday, April 29, 13
54. Only serve the browser what is needed. Monday, April 29, 13
55. Conditionally load extra stuff. http://24ways.org/2011/conditional-loading-for-responsive-designs/ Monday, April 29, 13
56. Homepage image carousels Monday, April 29, 13
57. FOUT Monday, April 29, 13
58. TOOLS PERFORMANCE IN A RESPONSIVE WORLD Monday, April 29, 13
59. Pingdom Monday, April 29, 13
60. Google Page Speed Monday, April 29, 13
61. Web Inspector Monday, April 29, 13
62. CSS Pre-processors. Monday, April 29, 13
63. EXAMPLES PERFORMANCE IN A RESPONSIVE WORLD Monday, April 29, 13
64. Large assets Monday, April 29, 13
65. Hero Replacements Monday, April 29, 13
66. Client side caching Monday, April 29, 13
67. WHAT’S NEXT? PERFORMANCE IN A RESPONSIVE WORLD Monday, April 29, 13
68. Static Site Revolution Monday, April 29, 13
69. Content Strategy Monday, April 29, 13
70. Questions? Monday, April 29, 13
71. THANKS! @robertharr rob@heysparkbox.com Monday, April 29, 13