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

Lazy Load Everything!

Sebastiano Armeli
October 18, 2012
Programming
3
400

Lazy Load Everything!

Talk given at Web Directions South, Sydney - October 2012

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
sebarmeli
1
120
From Strategy Definition to Execution with OKRs and Roadmap
sebarmeli
0
120
From Mission to Strategy: going over OKRs and Roadmap
sebarmeli
0
250
Managing a software engineering team
sebarmeli
1
550
Enforcing coding standards in a JS project
sebarmeli
0
570
Enforcing Coding Standards
sebarmeli
1
110
ES6: The future is now
sebarmeli
2
470
EcmaScript 6 - the future is here
sebarmeli
5
7.1k
Dependency management and Package management in JavaScript
sebarmeli
0
700

Other Decks in Programming

See All in Programming
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4k
React 19アップデートのために必要なこと
uhyo
8
1.4k
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
150
PRレビューのお供にDanger
stoticdev
1
230
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
910
CloudNativePGを布教したい
nnaka2992
0
110
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
130
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
290
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
140
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
未経験でSRE、はじめました！ 組織を支える役割と軌跡
curekoshimizu
1
130

Featured

See All Featured
Designing for humans not robots
tammielis
250
25k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
A better future with KSS
kneath
238
17k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
GitHub's CSS Performance
jonrohan
1030
460k
Faster Mobile Websites
deanohume
306
31k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250

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