Lazy load Everything!

4,001 views

Published on

Slides from my talk at Web Directions South 2012, Sydney

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,001
On SlideShare
0
From Embeds
0
Number of Embeds
82
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Lazy load Everything!

    1. 1. LAZY LOADEVERYTHING! Sebastiano Armeli @sebarmeli Web Directions South 2012, Sydney
    2. 2. LAZYNESS??
    3. 3. PERFORMANCE
    4. 4. LAZY LOADING• Load on-demand• Asynchronous calls• Driven by Events• window ‘onload’ NOT
    5. 5. What can we lazy load?
    6. 6. <script> </script>
    7. 7. Concatenation<body> <!-- Page content --> <img .../> <!--JS concatenated, at the bottom--> <script src=”js/one.min.js”></script></body>
    8. 8. ‘DOMContentLoaded’ ‘onload’
    9. 9. DRAWBACKS• No parallel downloads• Limit benefits from caching• Limit benefits from CDN• ‘DOMContentLoaded’ still
    10. 10. Dynamic <script>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);
    11. 11. HTML 5 Async<script async src="script.js"></script>
    12. 12. Async + Event-driven$(window).load(function(){ // Async insert <script> 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);});
    13. 13. after ‘onload’
    14. 14. What if some JScode depends on a lazy-loaded file?
    15. 15. MonitorreadyState attribute
    16. 16. SCRIPT LOADERS• Intuitive methods to load JS• Dependecy Management• Parallel downloads
    17. 17. YepNope.js$(img).click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded console.log("Hi!"); });});
    18. 18. Lazy load assets based on visibility
    19. 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(); } }); }}
    20. 20. <img>
    21. 21. The problemVisible and not visible images are loaded
    22. 22. JAIL LazyLoad YUI ImageLoaderor ... mod_pagespeed
    23. 23. JAIL.js• jQuery plugin by• Easy to use -> $• ‘data-src’ attribute• A few configurations
    24. 24. // Images loaded scrolling down$(function(){ $(‘img’).jail();});// Images loaded after an event$(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ });});
    25. 25. 4 images downloaded after‘onload’ in different moments!
    26. 26. http://yepnopejs.com/ http://requirejs.com https://gist.github.com/3899364http://sebarmeli.github.com/jail @sebarmeli

    ×