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.

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