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
2. LAZYNESS?? Monday, 3 June 13
3. PERFORMANCE Monday, 3 June 13
4. • Asynchronous calls • Load on-demand LAZY LOADING • window ‘onload’ NOT delayed • Driven by Events Monday, 3 June 13
5. What can we lazy load? Monday, 3 June 13
6. <script> </script> Monday, 3 June 13
7. <body> <!-- Page content --> <img .../> <!--JS concatenated, at the bottom--> <script src=”js/one.min.js”></script> </body> Concatenation Monday, 3 June 13
8. ‘onload’ ‘DOMContentLoaded’ Monday, 3 June 13
9. DRAWBACKS • No parallel downloads • Limit bene!ts from caching • Limit bene!ts from CDN • ‘DOMContentLoaded’ still late Monday, 3 June 13
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 <script> Monday, 3 June 13
11. <script async src="script.js"></script> HTML 5 Async Monday, 3 June 13
12. $(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); }); Async + Event-driven Monday, 3 June 13
13. after ‘onload’ Monday, 3 June 13
14. What if some JS code depends on a lazy-loaded file? Monday, 3 June 13
15. Monitor readyState attribute Monday, 3 June 13
16. • Dependecy Management • Intuitive methods to load JS SCRIPT LOADERS • Parallel downloads Monday, 3 June 13
17. $('img').click(function(){ yepnope.injectJs("script.js", function(){ // Executed when the script is loaded console.log("Hi!"); }); }); YepNope.js Monday, 3 June 13
18. Lazy load assets based on visibility Monday, 3 June 13
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
20. <img> Monday, 3 June 13
21. The problem Visible and not visible images are loaded Monday, 3 June 13
22. JAIL LazyLoad YUI ImageLoader or ... mod_pagespeed Monday, 3 June 13
23. JAIL.js • jQuery plugin by @sebarmeli • Easy to use -> $(‘img’).jail() • ‘data-src’ attribute • A few con!gurations available Monday, 3 June 13
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
25. 4 images downloaded after ‘onload’ in different moments! Monday, 3 June 13
26. Monday, 3 June 13
27. Monday, 3 June 13
28. http://requirejs.com http://yepnopejs.com/ http://sebarmeli.github.com/jail @sebarmeli https://gist.github.com/3899364 Monday, 3 June 13