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

Lazy Load Everything!

Avatar for Sebastiano Armeli Sebastiano Armeli
October 18, 2012
Programming
3
410

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012
Avatar for Sebastiano Armeli

Sebastiano Armeli

October 18, 2012
Tweet

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
150
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
140
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
270
Managing a software engineering team
Avatar for Sebastiano Armeli sebarmeli
1
590
Enforcing coding standards in a JS project
Avatar for Sebastiano Armeli sebarmeli
0
580
Enforcing Coding Standards
Avatar for Sebastiano Armeli sebarmeli
1
120
ES6: The future is now
Avatar for Sebastiano Armeli sebarmeli
2
480
EcmaScript 6 - the future is here
Avatar for Sebastiano Armeli sebarmeli
5
7.2k
Dependency management and Package management in JavaScript
Avatar for Sebastiano Armeli sebarmeli
0
730

Other Decks in Programming

See All in Programming
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
190
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
Avatar for nrs nrslib
1
320
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
4
920
datadog dash 2025 LLM observability for reliability and stability
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
0
110
第9回 情シス転職ミートアップ 株式会社IVRy（アイブリー）の紹介
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
1
230
都市をデータで見るってこういうこと　PLATEAU属性情報入門
Avatar for nokonoko1203 nokonoko1203
1
560
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
290
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
Avatar for lni_T lnit
2
250
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
Avatar for Shohei Okada okashoi
1
170
Bytecode Manipulation 으로 생산성 높이기
Avatar for Daekyu bigstark
2
370
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
840
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
Avatar for Takuya Katsusa takuyakatsusa
2
340

Featured

See All Featured
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
700
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
48
2.8k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
94
14k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
161
15k

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