Soumettre la recherche
Mettre en ligne
Lazy load Everything!
•
Télécharger en tant que KEY, PDF
•
4 j'aime
•
3,605 vues
S
Sebastiano Armeli
Suivre
Slides from my talk at Web Directions South 2012, Sydney
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 29
Télécharger maintenant
Recommandé
Modern frontend development with VueJs
Modern frontend development with VueJs
Tudor Barbu
Building a js widget
Building a js widget
Tudor Barbu
Our application got popular and now it breaks
Our application got popular and now it breaks
ColdFusionConference
Instant and offline apps with Service Worker
Instant and offline apps with Service Worker
Chang W. Doh
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
Andrew Rota
An Introduction to webOS
An Introduction to webOS
Kevin Decker
Drupal point of vue
Drupal point of vue
David Ličen
Recommandé
Modern frontend development with VueJs
Modern frontend development with VueJs
Tudor Barbu
Building a js widget
Building a js widget
Tudor Barbu
Our application got popular and now it breaks
Our application got popular and now it breaks
ColdFusionConference
Instant and offline apps with Service Worker
Instant and offline apps with Service Worker
Chang W. Doh
The Future of CSS with Web Components
The Future of CSS with Web Components
ColdFusionConference
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
Andrew Rota
An Introduction to webOS
An Introduction to webOS
Kevin Decker
Drupal point of vue
Drupal point of vue
David Ličen
Rapid Testing, Rapid Development
Rapid Testing, Rapid Development
mennovanslooten
Chrome enchanted 2015
Chrome enchanted 2015
Chang W. Doh
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Andrew Rota
Os mobile
Os mobile
jimlindforpope
Os mobile
Os mobile
jimlindforpope
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Michiel De Mey
Testing frontends with nightwatch & saucelabs
Testing frontends with nightwatch & saucelabs
Tudor Barbu
VueJS Introduction
VueJS Introduction
David Ličen
Unobtrusive JavaScript
Unobtrusive JavaScript
Vitaly Baum
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
Liking performance
Liking performance
Stoyan Stefanov
JavaScript performance patterns
JavaScript performance patterns
Stoyan Stefanov
Nodejs.meetup
Nodejs.meetup
Vivian S. Zhang
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
Katy Slemon
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
Yorick Phoenix
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Zachary Klein
Service Worker - Reliability bits
Service Worker - Reliability bits
jungkees
Up and Running with ReactJS
Up and Running with ReactJS
Loc Nguyen
Enforcing coding standards
Enforcing coding standards
Sebastiano Armeli
Saulė
Saulė
adrijov
Contenu connexe
Tendances
Rapid Testing, Rapid Development
Rapid Testing, Rapid Development
mennovanslooten
Chrome enchanted 2015
Chrome enchanted 2015
Chang W. Doh
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Andrew Rota
Os mobile
Os mobile
jimlindforpope
Os mobile
Os mobile
jimlindforpope
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Michiel De Mey
Testing frontends with nightwatch & saucelabs
Testing frontends with nightwatch & saucelabs
Tudor Barbu
VueJS Introduction
VueJS Introduction
David Ličen
Unobtrusive JavaScript
Unobtrusive JavaScript
Vitaly Baum
Nuxt.JS Introdruction
Nuxt.JS Introdruction
David Ličen
Liking performance
Liking performance
Stoyan Stefanov
JavaScript performance patterns
JavaScript performance patterns
Stoyan Stefanov
Nodejs.meetup
Nodejs.meetup
Vivian S. Zhang
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
Katy Slemon
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
Chris Love
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
Yorick Phoenix
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Holly Schinsky
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Zachary Klein
Service Worker - Reliability bits
Service Worker - Reliability bits
jungkees
Up and Running with ReactJS
Up and Running with ReactJS
Loc Nguyen
Tendances
(20)
Rapid Testing, Rapid Development
Rapid Testing, Rapid Development
Chrome enchanted 2015
Chrome enchanted 2015
The Complementarity of React and Web Components
The Complementarity of React and Web Components
Os mobile
Os mobile
Os mobile
Os mobile
A brave new web - A talk about Web Components
A brave new web - A talk about Web Components
Testing frontends with nightwatch & saucelabs
Testing frontends with nightwatch & saucelabs
VueJS Introduction
VueJS Introduction
Unobtrusive JavaScript
Unobtrusive JavaScript
Nuxt.JS Introdruction
Nuxt.JS Introdruction
Liking performance
Liking performance
JavaScript performance patterns
JavaScript performance patterns
Nodejs.meetup
Nodejs.meetup
Laravel 8 export data as excel file with example
Laravel 8 export data as excel file with example
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
The Fine Art of JavaScript Event Handling
The Fine Art of JavaScript Event Handling
The Point of Vue - Intro to Vue.js
The Point of Vue - Intro to Vue.js
Room with a Vue - Introduction to Vue.js
Room with a Vue - Introduction to Vue.js
Service Worker - Reliability bits
Service Worker - Reliability bits
Up and Running with ReactJS
Up and Running with ReactJS
En vedette
Enforcing coding standards
Enforcing coding standards
Sebastiano Armeli
Saulė
Saulė
adrijov
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Pulsslag
Drinks
Drinks
Onur Kalafat
öğRenciler e twinning te neler yapabilir
öğRenciler e twinning te neler yapabilir
Onur Kalafat
在巴黎设置旗舰店须知 2011——1
在巴黎设置旗舰店须知 2011——1
Myrachan
What students can do in e twinning
What students can do in e twinning
Onur Kalafat
Dilemma 6
Dilemma 6
slewis99
Tutorial excel vb_aplication
Tutorial excel vb_aplication
Mauricio Arellano Escudero
Puppymill paper
Puppymill paper
Ebony Hunter
Sunde vaner begynder med sunde valg-Irma
Sunde vaner begynder med sunde valg-Irma
Pulsslag
eReading talk SJSU 2012 01
eReading talk SJSU 2012 01
TAPintoIT
Medical design operational efficiency seminar.ppt
Medical design operational efficiency seminar.ppt
frankricci
Ala pr forum talk peters 2012 06e
Ala pr forum talk peters 2012 06e
TAPintoIT
Nihonggo
Nihonggo
Kyle Macadaeg
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Pulsslag
Going mobile talk 2013 04 25
Going mobile talk 2013 04 25
TAPintoIT
26 Smirks: eReading and Libraries
26 Smirks: eReading and Libraries
TAPintoIT
Idioms
Idioms
Dawn Handig
La tertulia 1995 2015 b
La tertulia 1995 2015 b
ZamoranoSagreno
En vedette
(20)
Enforcing coding standards
Enforcing coding standards
Saulė
Saulė
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Drinks
Drinks
öğRenciler e twinning te neler yapabilir
öğRenciler e twinning te neler yapabilir
在巴黎设置旗舰店须知 2011——1
在巴黎设置旗舰店须知 2011——1
What students can do in e twinning
What students can do in e twinning
Dilemma 6
Dilemma 6
Tutorial excel vb_aplication
Tutorial excel vb_aplication
Puppymill paper
Puppymill paper
Sunde vaner begynder med sunde valg-Irma
Sunde vaner begynder med sunde valg-Irma
eReading talk SJSU 2012 01
eReading talk SJSU 2012 01
Medical design operational efficiency seminar.ppt
Medical design operational efficiency seminar.ppt
Ala pr forum talk peters 2012 06e
Ala pr forum talk peters 2012 06e
Nihonggo
Nihonggo
Sunde vaner begynder med sunde valg
Sunde vaner begynder med sunde valg
Going mobile talk 2013 04 25
Going mobile talk 2013 04 25
26 Smirks: eReading and Libraries
26 Smirks: eReading and Libraries
Idioms
Idioms
La tertulia 1995 2015 b
La tertulia 1995 2015 b
Similaire à Lazy load Everything!
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Steve Souders
JavaScript Perfomance
JavaScript Perfomance
Anatol Alizar
Introduction to jQuery
Introduction to jQuery
Nagaraju Sangam
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
javascript examples
javascript examples
Egerton University
The Future of CSS with Web components
The Future of CSS with Web components
devObjective
HTML5 and Mobile
HTML5 and Mobile
doodoofish
Web Performance Part 4 "Client-side performance"
Web Performance Part 4 "Client-side performance"
Binary Studio
Short intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
Jussi Pohjolainen
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
robgalvinjr
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
Dmitry Makarchuk
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
Steve Souders
JavaScript Performance Patterns
JavaScript Performance Patterns
Stoyan Stefanov
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
eLuminous Technologies Pvt. Ltd.
Javascript first-class citizenery
Javascript first-class citizenery
toddbr
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Juliano Martins
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo homepage presentation
masudakram
jQuery (MeshU)
jQuery (MeshU)
jeresig
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
Similaire à Lazy load Everything!
(20)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Perfomance
JavaScript Perfomance
Introduction to jQuery
Introduction to jQuery
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
javascript examples
javascript examples
The Future of CSS with Web components
The Future of CSS with Web components
HTML5 and Mobile
HTML5 and Mobile
Web Performance Part 4 "Client-side performance"
Web Performance Part 4 "Client-side performance"
Short intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
AppForum 2014 Boost Hybrid App Performance
AppForum 2014 Boost Hybrid App Performance
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
JavaScript Performance Patterns
JavaScript Performance Patterns
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Solution to capture webpage screenshot with html2 canvas.js for backend devel...
Javascript first-class citizenery
Javascript first-class citizenery
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
Desenvolvendo uma aplicação híbrida para Android e IOs utilizando Ionic, aces...
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo homepage presentation
jQuery (MeshU)
jQuery (MeshU)
Performance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Plus de Sebastiano Armeli
Managing a software engineering team
Managing a software engineering team
Sebastiano Armeli
Enforcing coding standards in a JS project
Enforcing coding standards in a JS project
Sebastiano Armeli
ES6: The future is now
ES6: The future is now
Sebastiano Armeli
EcmaScript 6 - The future is here
EcmaScript 6 - The future is here
Sebastiano Armeli
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Sebastiano Armeli
Karma - JS Test Runner
Karma - JS Test Runner
Sebastiano Armeli
RequireJS
RequireJS
Sebastiano Armeli
MVC on the server and on the client
MVC on the server and on the client
Sebastiano Armeli
Backbone.js in a real-life application
Backbone.js in a real-life application
Sebastiano Armeli
Getting started with Selenium 2
Getting started with Selenium 2
Sebastiano Armeli
Web Storage
Web Storage
Sebastiano Armeli
Plus de Sebastiano Armeli
(11)
Managing a software engineering team
Managing a software engineering team
Enforcing coding standards in a JS project
Enforcing coding standards in a JS project
ES6: The future is now
ES6: The future is now
EcmaScript 6 - The future is here
EcmaScript 6 - The future is here
Dependency management & Package management in JavaScript
Dependency management & Package management in JavaScript
Karma - JS Test Runner
Karma - JS Test Runner
RequireJS
RequireJS
MVC on the server and on the client
MVC on the server and on the client
Backbone.js in a real-life application
Backbone.js in a real-life application
Getting started with Selenium 2
Getting started with Selenium 2
Web Storage
Web Storage
Dernier
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
hariprasad279825
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
charlottematthew16
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
Lars Bell
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
charlottematthew16
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Dilum Bandara
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
Dubai Multi Commodity Centre
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
Sri Ambati
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
RankYa
Dernier
(20)
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
Lazy load Everything!
1.
LAZY LOAD EVERYTHING!
Sebastiano Armeli @sebarmeli Web Directions South 2012, Sydney
2.
LAZYNESS??
3.
PERFORMANCE
4.
LAZY LOADING • Load
on-demand • Asynchronous calls • Driven by Events • window ‘onload’ NOT
5.
What can we
lazy load?
6.
<script> </script>
7.
Concatenation <body> <!--
Page content --> <img .../> <!--JS concatenated, at the bottom--> <script src=”js/one.min.js”></script> </body>
8.
‘DOMContentLoaded’
‘onload’
9.
DRAWBACKS • No parallel
downloads • Limit benefits from caching • Limit benefits from CDN • ‘DOMContentLoaded’ still
10.
Dynamic <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);
11.
HTML 5 Async <script
async src="script.js"></script>
12.
Async + Event-driven $(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); });
13.
after ‘onload’
14.
What if some
JS code depends on a lazy-loaded file?
15.
Monitor readyState attribute
16.
SCRIPT LOADERS • Intuitive
methods to load JS • Dependecy Management • Parallel downloads
17.
YepNope.js $('img').click(function(){ yepnope.injectJs("script.js", function(){
// Executed when the script is loaded console.log("Hi!"); }); });
18.
Lazy load assets
based on visibility
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(); } }); } }
20.
<img>
21.
The problem Visible and
not visible images are loaded
22.
JAIL
LazyLoad YUI ImageLoader or ... mod_pagespeed
23.
JAIL.js • jQuery plugin
by • Easy to use -> $ • ‘data-src’ attribute • A few configurations
24.
// Images loaded
scrolling down $(function(){ $(‘img’).jail(); }); // Images loaded after an event $(function(){ $(‘img’).jail({ triggerElement: ‘a.link’, event: ‘click’ }); });
25.
4 images downloaded
after ‘onload’ in different moments!
26.
27.
28.
29.
http://yepnopejs.com/
http://requirejs.com https://gist.github.com/3899364 http://sebarmeli.github.com/jail @sebarmeli
Notes de l'éditeur
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Télécharger maintenant