Optimize or Die Tryin'

This talk was made at Blend Conference (Lyon, October 1st and 2nd 2013).
It covers a simple process to optimize your page loading.

1. Optimize or Die Tryin’ Damian Le Nouaille CTO at Geeksters, Prof’ IngéSup, HashtagBattle @damln
2. Today BACKEND FRONTEND Today it’s me!
3. FLAT DESIGN = PERFORMANCE
4. Frustration: Indirect Performance • Not visible in development • Fast computers • Very fast Internet access • localhost Oh it’s fast! Look at my computer. PS: You’re not the end user.
5. Timeline HTML What we want ! JavaScript Images DOMReady <body> CSS
6. Plan • Images • Concatenation • Minification • Compression • Versionning • Async • Share Buttons • Extra
7. Images: format, size and optimisazion • Choose the format: PNG 8-24 bits? JPEG? • Right size: 800x600 for a thumbnail? • Paint: width + height on <img> • ImageOptim, remove meta-data, reduce image weight • No images: Fonts or SVG (for icons)
8. Images: Example
9. Reminder ...
10. Timeline HTML CSS JavaScript Images DOMReady <body>
11. Timeline HTML CSS JavaScript Images DOMReady <body> Goal
12. Concatenation Goal: • Reduce number of requests Tools: • Sass : use partials for CSS • Grunt (grunt-contrib-concat) : Combine JavaScript files in the right order
13. Concatenation: Example _global.scss main.css _nav.scss _sidebar.scss 160 Ko 111 Ko
14. Timeline HTML CSS JavaScript Images DOMReady <body>
15. Timeline: After Concatenation HTML CSS JavaScript Images DOMReady <body> Goal
16. Minification Goal: • Reduce the weight of the request Tools: • Sass : ouputFormat :compressed • Grunt : grunt-contrib-uglify
17. Thanks, Brackets <3 • Browsers don’t care about formating • Thanks! {;}
18. Minification: Example 111 Ko 88 Ko
19. Timeline HTML CSS JavaScript Images DOMReady <body>
20. Timeline: After Minification HTML CSS JavaScript Images DOMReady <body> Goal
21. Compression (Gzip) Goal: • Reduce the weight of the request, even MORE Why: • It’s easy to compress text • Good support (IE8+)
22. Compression: Example 88 Ko 16 Ko
23. Compression: Real Accept-Encoding:gzip,deflate, sdch /css/main.css main.css main.css.gz GZIP Content-Encoding:gzip GZIP content NGINX / APACHE
24. Compression: Check Weight
25. Compression: Check Headers
26. Timeline HTML CSS JavaScript Images DOMReady <body>
27. Timeline HTML CSS JavaScript Images DOMReady <body> Goal
28. Versionning: Cache Busting Goal: • Don’t GET existing assets Basics: • Rename assets (with MD5) • HTTP header : max-age=30000000
29. “It works for me” • “Hi Bob, I upload the latest modifications.” • “I don’t see them, I have an old version.” • “Aaahhhhrrrrgffgg” Bob’s iPad is crap. NO!
30. Versionning: Grunt-Hash lib.min.js MD5 lib.min.12345678.js assets.json { “lib.min.js”: ”lib.min.12345678.js”, ... }
31. Versionning: ViewHelper
32. Grunt, is it fast? 1.6 sec
33. Async loading Goal: • Accelerate the DOM Load • Provide visual feedback to visitor Where: • Images • JavaScript
34. Async load: Images How: • Change the source: src=”load.gif” • Add: data-src=”image.jpg” • Use a plugin to replace src by data-src • Unveil.js
35. Images: Example HTML JavaScript
36. Timeline HTML CSS JavaScript Images DOMReady <body>
37. Timeline: After Unveil.js HTML CSS JavaScript Images DOMReady <body> Goal
38. Async load: JavaScript How: • Use head.js • Declare the files • Use the callback • NO AMD • DEAD SIMPLE
39. JavaScript: Example
40. Timeline HTML CSS JavaScript Images DOMReady <body>
41. Timeline: After head.js HTML CSS JavaScript Images DOMReady <body>
42. Timeline: After Cache HTML CSS JavaScript Images DOMReady <body>
43. Share Buttons • Facebook likes, Tweet button, etc • Useless for the rendering • Trigger load at the right time Plugins: • Socialite • AddThis • Sharrre
44. Extra • Sprite CSS : Compass • CDN : Latency / Mobile • Turbolinks : PJAX evolution Tools et readings : • YSlow • Page Speed Insights : Online + Chrome • Guides : Yahoo et Google
45. Recap’ Source Concat Min Cache Hash Gzip Async 160 Ko 111 Ko 88 Ko 88 Ko 16 Ko MD5 Development Server Client
46. Thanks Damian Le Nouaille www.damln.com www.geeksters.co Twitter, Github, Coderwall: @damln