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.

Damian Le Nouaille

October 01, 2013
Tweet

More Decks by Damian Le Nouaille

Other Decks in Programming

Transcript

  1. Optimize
    or
    Die Tryin’
    Damian Le Nouaille
    CTO at Geeksters, Prof’ IngéSup, HashtagBattle
    @damln

    View Slide

  2. Today
    BACKEND
    FRONTEND
    Today it’s me!

    View Slide

  3. FLAT DESIGN
    =
    PERFORMANCE

    View Slide

  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.

    View Slide

  5. Timeline
    HTML
    What we
    want !
    JavaScript
    Images
    DOMReady

    CSS

    View Slide

  6. Plan
    ● Images
    ● Concatenation
    ● Minification
    ● Compression
    ● Versionning
    ● Async
    ● Share Buttons
    ● Extra

    View Slide

  7. Images: format, size and optimisazion
    ● Choose the format: PNG 8-24 bits? JPEG?
    ● Right size: 800x600 for a thumbnail?
    ● Paint: width + height on
    ● ImageOptim, remove meta-data, reduce
    image weight
    ● No images: Fonts or SVG (for icons)

    View Slide

  8. Images: Example

    View Slide

  9. Reminder ...

    View Slide

  10. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  11. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    Goal

    View Slide

  12. Concatenation
    Goal:
    ● Reduce number of requests
    Tools:
    ● Sass : use partials for CSS
    ● Grunt (grunt-contrib-concat) :
    Combine JavaScript files in the right order

    View Slide

  13. Concatenation: Example
    _global.scss
    main.css
    _nav.scss
    _sidebar.scss
    160 Ko 111 Ko

    View Slide

  14. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  15. Timeline: After Concatenation
    HTML CSS JavaScript
    Images
    DOMReady

    Goal

    View Slide

  16. Minification
    Goal:
    ● Reduce the weight of the request
    Tools:
    ● Sass : ouputFormat :compressed
    ● Grunt : grunt-contrib-uglify

    View Slide

  17. Thanks, Brackets <3
    ● Browsers don’t care about formating
    ● Thanks!
    {;}

    View Slide

  18. Minification: Example
    111 Ko 88 Ko

    View Slide

  19. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  20. Timeline: After Minification
    HTML CSS JavaScript
    Images
    DOMReady

    Goal

    View Slide

  21. Compression (Gzip)
    Goal:
    ● Reduce the weight of the request,
    even MORE
    Why:
    ● It’s easy to compress text
    ● Good support (IE8+)

    View Slide

  22. Compression: Example
    88 Ko 16 Ko

    View Slide

  23. Compression: Real
    Accept-Encoding:gzip,deflate,
    sdch
    /css/main.css
    main.css
    main.css.gz
    GZIP
    Content-Encoding:gzip
    GZIP content
    NGINX / APACHE

    View Slide

  24. Compression: Check Weight

    View Slide

  25. Compression: Check Headers

    View Slide

  26. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  27. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    Goal

    View Slide

  28. Versionning: Cache Busting
    Goal:
    ● Don’t GET existing assets
    Basics:
    ● Rename assets (with MD5)
    ● HTTP header : max-age=30000000

    View Slide

  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!

    View Slide

  30. Versionning: Grunt-Hash
    lib.min.js MD5
    lib.min.12345678.js
    assets.json
    {
    “lib.min.js”: ”lib.min.12345678.js”,
    ...
    }

    View Slide

  31. Versionning: ViewHelper

    View Slide

  32. Grunt, is it fast?
    1.6 sec

    View Slide

  33. Async loading
    Goal:
    ● Accelerate the DOM Load
    ● Provide visual feedback to visitor
    Where:
    ● Images
    ● JavaScript

    View Slide

  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

    View Slide

  35. Images: Example
    HTML
    JavaScript

    View Slide

  36. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  37. Timeline: After Unveil.js
    HTML CSS JavaScript
    Images
    DOMReady

    Goal

    View Slide

  38. Async load: JavaScript
    How:
    ● Use head.js
    ● Declare the files
    ● Use the callback
    ● NO AMD
    ● DEAD SIMPLE

    View Slide

  39. JavaScript: Example

    View Slide

  40. Timeline
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  41. Timeline: After head.js
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  42. Timeline: After Cache
    HTML CSS JavaScript
    Images
    DOMReady

    View Slide

  43. Share Buttons
    ● Facebook likes, Tweet button, etc
    ● Useless for the rendering
    ● Trigger load at the right time
    Plugins:
    ● Socialite
    ● AddThis
    ● Sharrre

    View Slide

  44. Extra
    ● Sprite CSS : Compass
    ● CDN : Latency / Mobile
    ● Turbolinks : PJAX evolution
    Tools et readings :
    ● YSlow
    ● Page Speed Insights : Online + Chrome
    ● Guides : Yahoo et Google

    View Slide

  45. Recap’
    Source Concat Min Cache
    Hash Gzip Async
    160 Ko 111 Ko 88 Ko 88 Ko 16 Ko
    MD5
    Development Server Client

    View Slide

  46. Thanks
    Damian Le Nouaille
    www.damln.com
    www.geeksters.co
    Twitter, Github, Coderwall:
    @damln

    View Slide