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

Optimize or Die Tryin'

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.

C1194b5728c155e195b223d91e1b0d77?s=128

Damian Le Nouaille

October 01, 2013
Tweet

Transcript

  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