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
160
From Strategy Definition to Execution with OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
150
From Mission to Strategy: going over OKRs and Roadmap
Avatar for Sebastiano Armeli sebarmeli
0
280
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
740

Other Decks in Programming

See All in Programming
Claude Codeで実装以外の開発フロー、どこまで自動化できるか？失敗と成功
Avatar for ndaDayo.Sugawawa ndadayo
2
1.3k
オープンセミナー2025 @広島 LT 技術ブログを続けるには
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
120
ワープロって実は計算機で
Avatar for Chiharu Shirasaka pepepper
2
1.4k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
Avatar for clshinji clshinji
1
140
Langfuseと歩む生成AI活用推進
Avatar for matsukada licux
3
300
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
770
🔨 小さなビルドシステムを作る
Avatar for Mutsuha Asada momeemt
1
480
コーディングエージェント時代のNeovim
Avatar for KEY60228 key60228
1
100
Honoアップデート 2025年夏
Avatar for Yusuke Wada yusukebe
1
840
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
Avatar for JaiChangPark itsmedreamwalker
0
150
Google I/O recap web編 大分Web祭り2025
Avatar for kponda kponda
0
2.9k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
Avatar for Tech Leverages leveragestech
2
180

Featured

See All Featured
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
56
5.8k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
236
140k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
6k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
283
13k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
780

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