Slide 1
Slide 1 text
the art of lazy loading
lazy loading
@hdjirdeh
Slide 2
Slide 2 text
lazy
defer until the user needs it
Slide 3
Slide 3 text
loading
fetch + render
Slide 4
Slide 4 text
what?
Slide 5
Slide 5 text
images!
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
highest
high
medium
low
low
high
highest
medium
low
Slide 8
Slide 8 text
highest
high
medium
low
low
high
highest
medium
low
Slide 9
Slide 9 text
low
highest
high
medium
low
low
high
highest
medium
Slide 10
Slide 10 text
highest
high
medium
low
low
high
highest
medium
medium
low
Slide 11
Slide 11 text
> 40% of data fetched = images
Slide 12
Slide 12 text
scroll event listeners
Slide 13
Slide 13 text
Slide 14
Slide 14 text
let image = document.querySelector("img.lazy");
const lazyLoad = () "=> {
setTimeout(() "=> {
if (
image.getBoundingClientRect().top "<= window.innerHeight "&&
image.getBoundingClientRect().bottom ">= 0
) {
image.src = image.dataset.src;
}
}, 200);
};
document.addEventListener("scroll", lazyLoad);
let image = document.querySelector("img.lazy");
const lazyLoad = () "=> {
setTimeout(() "=> {
if (
image.getBoundingClientRect().top "<= window.innerHeight "&&
image.getBoundingClientRect().bottom ">= 0
) {
image.src = image.dataset.src;
}
}, 200);
}
document.addEventListener("scroll", lazyLoad);
};
Slide 15
Slide 15 text
intersection observer
Slide 16
Slide 16 text
let image = document.querySelector("img.lazy");
let lazyObserver = new IntersectionObserver(entry "=> {
if (entry.isIntersecting) {
const image = entry.target;
image.src = lazyImage.dataset.src;
lazyObserver.unobserve(image);
}
});
lazyObserver.observe(image);
let image = document.querySelector("img.lazy");
let lazyObserver = new IntersectionObserver(entry "=> {
if (entry.isIntersecting) {
const image = entry.target;
image.src = lazyImage.dataset.src;
lazyObserver.unobserve(image);
}
});
lazyObserver.observe(image);
Slide 17
Slide 17 text
bit.ly/inter-obs
Slide 18
Slide 18 text
native browser feature?
Slide 19
Slide 19 text
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
what else?
Slide 22
Slide 22 text
code!
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
1 KB of Image
1 KB of JavaScript
≠
Slide 25
Slide 25 text
split, split, split ✂
Slide 26
Slide 26 text
import('lodash.sortby')
.then(module "=> module.default)
.then(doSomethingCool)
import('lodash.sortby')
.then(module "=> module.default)
.then(doSomethingCool)
dynamic import
Slide 27
Slide 27 text
what should I do?
Slide 28
Slide 28 text
audit
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
audit
fix
✂
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
Use a library
lozad.js
lazysizes
yall.js
Slide 35
Slide 35 text
Use IO + polyfill
Use a library
Use placeholders/
load early
Slide 36
Slide 36 text
Use placeholders/
load early
pinterest
pinterest.com
Slide 37
Slide 37 text
Use placeholders/
load early
lqip-loader
github.com/zouhir/lqip-loader
Slide 38
Slide 38 text
Use placeholders/
load early
Primitive
primitive.lol
Slide 39
Slide 39 text
Use placeholders/
load early
sqip
github.com/technopagan/sqip
SQIP
LQIP
Image
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
export const routes: Routes = [
{
path: 'main',
component: 'MainComponent',
},
{
path: 'details',
loadChildren: 'details/details.module#DetailsModule'
}
];
angular router
Slide 42
Slide 42 text
const DetailsComponent = () "=> import(‘./details.vue');
export const router = new VueRouter({
routes: [
{ path: '/details', component: DetailsComponent },
]
})
const DetailsComponent = () "=> import(‘./details.vue');
export const router = new VueRouter({
routes: [
{ path: '/details', component: DetailsComponent },
]
})
const DetailsComponent = () "=> import(‘./details.vue');
export const router = new VueRouter({
routes: [
{ path: '/details', component: DetailsComponent },
]
})
export const router = new VueRouter({
routes: [
{ path: '/details', component: DetailsComponent },
]
})
vue router
Slide 43
Slide 43 text
import { Router } from 'preact-router';
import Home from '"../routes/home';
import Details from 'async!./details';
export const App = () "=> (
"
);
import { Router } from 'preact-router';
import Home from '"../routes/home';
import Details from 'async!./details';
export const App = () "=> (
"
);
preact cli
import { Router } from 'preact-router';
import Home from '"../routes/home';
import Details from 'async!./details';
export const App = () "=> (
"
);
Slide 44
Slide 44 text
const loadPage = (page) "=> (dispatch) "=> {
switch(page) {
case 'view1':
import('"../my-view1.js').then((module) "=> {
"// ""...
});
break;
"//""...
}
dispatch(updatePage(page));
};
const loadPage = (page) "=> (dispatch) "=> {
switch(page) {
case 'view1':
import('"../my-view1.js').then((module) "=> {
"// ""...
});
break;
"//""...
}
dispatch(updatePage(page));
};
const loadPage = (page) "=> (dispatch) "=> {
switch(page) {
case 'view1':
import('"../my-view1.js').then((module) "=> {
"// ""...
});
break;
"//""...
}
dispatch(updatePage(page));
};
polymer pwa-starter-kit
Slide 45
Slide 45 text
import Loadable from 'react-loadable';
const DetailsComponent = Loadable({
loader: () "=> import('./details.component'),
loading: () "=>
Loading""..."
,
});
import Loadable from 'react-loadable';
const DetailsComponent = Loadable({
loader: () "=> import('./details.component'),
loading: () "=> Loading""..."
,
});
import Loadable from 'react-loadable';
const DetailsComponent = Loadable({
loader: () "=> import('./details.component'),
loading: () "=> Loading""..."
,
});
jamiebuilds / react-loadable
Slide 46
Slide 46 text
import loadable from 'loadable-components';
const DetailsComponent =
loadable(() "=> import('./details.component'), {
LoadingComponent: () "=>
Loading""..."
});
import loadable from 'loadable-components';
const DetailsComponent =
loadable(() "=> import('./details.component'), {
LoadingComponent: () "=> Loading""..."
});
import loadable from 'loadable-components';
const DetailsComponent =
loadable(() "=> import('./details.component'), {
LoadingComponent: () "=> Loading""..."
});
smooth-code / loadable-components
Slide 47
Slide 47 text
import LoadableVisibility from
‘react-loadable-visibility/react-loadable'
const DetailsComponent = LoadableVisibility({
loader: () "=> import('./details.component'),
loading: () "=>
Loading""..."
,
})
import LoadableVisibility from
‘react-loadable-visibility/react-loadable'
const DetailsComponent = LoadableVisibility({
loader: () "=> import('./details.component'),
loading: () "=> Loading""..."
,
})
import LoadableVisibility from
‘react-loadable-visibility/react-loadable'
const DetailsComponent = LoadableVisibility({
loader: () "=> import('./details.component'),
loading: () "=> Loading""..."
,
})
stratiformltd / react-loadable-visibility
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
const DetailsComponent = Loadable({
loader: () "=> import('./details.component'),
loading: () "=>
Loading""..."
,
delay: 300,
});
jamiebuilds / react-loadable
const DetailsComponent = Loadable({
loader: () "=> import('./details.component'),
loading: () "=> Loading""..."
,
delay: 300,
});
Slide 50
Slide 50 text
suspense
Slide 51
Slide 51 text
bit.ly/lazy-metro
metro (react native)
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
audit
fix
✂
observe
Slide 54
Slide 54 text
webpack-bundle-analyzer
Slide 55
Slide 55 text
size-plugin
Slide 56
Slide 56 text
progressivetooling.com
Slide 57
Slide 57 text
responsive images
with srcset
preload critical
chunks
convert gifs
to .mp4
pre-cache assets
using a service
worker
compress assets
remove unused
packages
module /
nomodule
Slide 58
Slide 58 text
/
Dx
Ux
Slide 59
Slide 59 text
@hdjirdeh