Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Transcript

1. LAZY LOAD
   EVERYTHING!
   Sebastiano Armeli
   @sebarmeli
   Web Directions South 2012, Sydney
   Monday, 3 June 13
   

   View Slide

2. LAZYNESS??
   Monday, 3 June 13
   

   View Slide

3. PERFORMANCE
   Monday, 3 June 13
   

   View Slide

4. • Asynchronous calls
   • Load on-demand
   LAZY LOADING
   • window ‘onload’ NOT delayed
   • Driven by Events
   Monday, 3 June 13
   

   View Slide

5. What can we
   lazy load?
   Monday, 3 June 13
   

   View Slide

6. 
   Monday, 3 June 13
   

   View Slide

7. 
   
   
   
   
   
   Concatenation
   Monday, 3 June 13
   

   View Slide

8. ‘onload’
   ‘DOMContentLoaded’
   Monday, 3 June 13
   

   View Slide

9. DRAWBACKS
   • No parallel downloads
   • Limit bene!ts from caching
   • Limit bene!ts from CDN
   • ‘DOMContentLoaded’ still late
   Monday, 3 June 13
   

   View Slide

10. var g = document.createElement('script');
    g.type = 'text/javascript';
    g.async = true;
    g.src = 'js/third_party.js';
    var s = document.
    getElementsByTagName('script')[0];
    s.parentNode.insertBefore(g, s);
    Dynamic <br/>Monday, 3 June 13<br/>

    View Slide

11. 
    HTML 5 Async
    Monday, 3 June 13
    

    View Slide

12. $(window).load(function(){
    // Async insert <br/>var g = document.createElement('script');<br/>g.type = 'text/javascript';<br/>g.async = true;<br/>g.src = 'js/third_party.js';<br/>var s = document.<br/>getElementsByTagName('script')[0];<br/>s.parentNode.insertBefore(g, s);<br/>});<br/>Async + Event-driven<br/>Monday, 3 June 13<br/>

    View Slide

13. after ‘onload’
    Monday, 3 June 13
    

    View Slide

14. What if some JS
    code depends on
    a lazy-loaded
    file?
    Monday, 3 June 13
    

    View Slide

15. Monitor
    readyState
    attribute
    Monday, 3 June 13
    

    View Slide

16. • Dependecy Management
    • Intuitive methods to load JS
    SCRIPT LOADERS
    • Parallel downloads
    Monday, 3 June 13
    

    View Slide

17. $('img').click(function(){
    yepnope.injectJs("script.js", function(){
    // Executed when the script is loaded
    console.log("Hi!");
    });
    });
    YepNope.js
    Monday, 3 June 13
    

    View Slide

18. Lazy load assets
    based
    on visibility
    Monday, 3 June 13
    

    View Slide

19. function loadVisible(el, script, callback) {
    var rect = el.getBoundingClientRect();
    if (rect.top >= 0 && rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth) {
    // Load the script
    yepnope.injectJs(script, function(){
    if (callback) { callback(); }
    });
    }
    }
    Monday, 3 June 13
    

    View Slide

20. 
    Monday, 3 June 13
    

    View Slide

21. The problem
    Visible and not visible images are loaded
    Monday, 3 June 13
    

    View Slide

22. JAIL
    LazyLoad
    YUI ImageLoader
    or ...
    mod_pagespeed
    Monday, 3 June 13
    

    View Slide

23. JAIL.js
    • jQuery plugin by @sebarmeli
    • Easy to use -> $(‘img’).jail()
    • ‘data-src’ attribute
    • A few con!gurations available
    Monday, 3 June 13
    

    View Slide

24. // Images loaded scrolling down
    $(function(){
    $(‘img’).jail();
    });
    // Images loaded after an event
    $(function(){
    $(‘img’).jail({
    triggerElement: ‘a.link’,
    event: ‘click’
    });
    });
    Monday, 3 June 13
    

    View Slide

25. 4 images downloaded after
    ‘onload’ in different moments!
    Monday, 3 June 13
    

    View Slide

26. Monday, 3 June 13
    

    View Slide

27. Monday, 3 June 13
    

    View Slide

28. http://requirejs.com
    http://yepnopejs.com/
    http://sebarmeli.github.com/jail
    @sebarmeli
    https://gist.github.com/3899364
    Monday, 3 June 13
    

    View Slide