Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Load Everything!

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Sebastiano Armeli Sebastiano Armeli
October 18, 2012
Programming
420
3

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

Avatar for Sebastiano Armeli

Sebastiano Armeli

October 18, 2012

More Decks by Sebastiano Armeli

See All by Sebastiano Armeli
Cultivate Excellence In Engineering Teams through Continuous Software Engineering
Avatar for Sebastiano Armeli sebarmeli
1
200
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
210
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
310
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
640
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
610
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
130
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
510
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.5k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
780

Other Decks in Programming

See All in Programming
第3木曜LT会 #28
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
0
110
ハーネスエンジニアリングにどう向き合うか 〜ルールファイルを超えて開発プロセスを設計する〜 / How to approach harness engineering
Avatar for r-kagaya rkaga
23
13k
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
250
今こそ押さえておきたい アマゾンウェブサービス（AWS）の データベースの基礎 おもクラ #6版
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
250
書籍「ユーザーストーリーマッピング」が私のバイブル
Avatar for asumikam asumikam
3
350
Radical Imagining - LIFT 2025-2027 Policy Agenda
Avatar for LIFT lift1998
0
350
ソフトウェア設計の結合バランス #phperkaigi
Avatar for Takuma Kajikawa kajitack
0
130
2026-03-27 #terminalnight 変数展開とコマンド展開でターミナル作業をスマートにする方法
Avatar for SUZUKI Masashi masasuzu
0
340
Cache-moi si tu peux : patterns et pièges du cache en production - Devoxx France 2026 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
240
Kubernetes上でAgentを動かすための最新動向と押さえるべき概念まとめ
Avatar for Sota Makino sotamaki0421
3
500
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
Avatar for Marco Roth marcoroth
0
140
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
410

Featured

See All Featured
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
680
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
970
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
270
Fireside Chat
Avatar for paigeccino paigeccino
42
3.9k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
830
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
270
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
130

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