The Art of Lazy Loading

Transcript

1. 1.

   the art of lazy loading lazy loading @hdjirdeh

2. 2.

   lazy defer until the user needs it

3. 3.

   loading fetch + render

4. 4.

   what?

5. 5.

   images!

6. 6.

   None
7. 7.

   highest high medium low low high highest medium low

8. 8.

   highest high medium low low high highest medium low

9. 9.

   low highest high medium low low high highest medium

10. 10.

    highest high medium low low high highest medium medium low

11. 11.

    > 40% of data fetched = images

12. 12.

    scroll event listeners

13. 13.

    <img class="lazy" data-src="kittens.png"> class="lazy" data-src="kittens.png"

14. 14.

    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); };
15. 15.

    intersection observer

16. 16.

    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);
17. 17.

    bit.ly/inter-obs

18. 18.

    native browser feature?

19. 19.

    <img lazyload=“on”> lazyload=“on”

20. 20.

    None
21. 21.

    what else?

22. 22.

    code!

23. 23.

    None
24. 24.

    1 KB of Image 1 KB of JavaScript ≠

25. 25.

    split, split, split ✂

26. 26.

    import('lodash.sortby') .then(module "=> module.default) .then(doSomethingCool) import('lodash.sortby') .then(module "=> module.default) .then(doSomethingCool)

    dynamic import
27. 27.

    what should I do?

28. 28.

    audit

29. 29.

    None
30. 30.

    None
31. 31.

    None
32. 32.

    audit fix ✂

33. 33.

    None
34. 34.

    Use a library lozad.js lazysizes yall.js

35. 35.

    Use IO + polyfill Use a library Use placeholders/ load

    early
36. 36.

    Use placeholders/ load early pinterest pinterest.com

37. 37.

    Use placeholders/ load early lqip-loader github.com/zouhir/lqip-loader

38. 38.

    Use placeholders/ load early Primitive primitive.lol

39. 39.

    Use placeholders/ load early sqip github.com/technopagan/sqip SQIP LQIP Image

40. 40.

    None
41. 41.

    export const routes: Routes = [ { path: 'main', component:

    'MainComponent', }, { path: 'details', loadChildren: 'details/details.module#DetailsModule' } ]; angular router
42. 42.

    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
43. 43.

    import { Router } from 'preact-router'; import Home from '"../routes/home';

    import Details from 'async!./details'; export const App = () "=> ( <Router> <Home path="/" "/> <Details path="/details/" "/> "</Router> ); import { Router } from 'preact-router'; import Home from '"../routes/home'; import Details from 'async!./details'; export const App = () "=> ( <Router> <Home path="/" "/> <Details path="/details/" "/> "</Router> ); preact cli import { Router } from 'preact-router'; import Home from '"../routes/home'; import Details from 'async!./details'; export const App = () "=> ( <Router> <Home path="/" "/> <Details path="/details/" "/> "</Router> );
44. 44.

    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
45. 45.

    import Loadable from 'react-loadable'; const DetailsComponent = Loadable({ loader: ()

    "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }); import Loadable from 'react-loadable'; const DetailsComponent = Loadable({ loader: () "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }); import Loadable from 'react-loadable'; const DetailsComponent = Loadable({ loader: () "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }); jamiebuilds / react-loadable
46. 46.

    import loadable from 'loadable-components'; const DetailsComponent = loadable(() "=> import('./details.component'),

    { LoadingComponent: () "=> <div>Loading""..."</div> }); import loadable from 'loadable-components'; const DetailsComponent = loadable(() "=> import('./details.component'), { LoadingComponent: () "=> <div>Loading""..."</div> }); import loadable from 'loadable-components'; const DetailsComponent = loadable(() "=> import('./details.component'), { LoadingComponent: () "=> <div>Loading""..."</div> }); smooth-code / loadable-components
47. 47.

    import LoadableVisibility from ‘react-loadable-visibility/react-loadable' const DetailsComponent = LoadableVisibility({ loader: ()

    "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }) import LoadableVisibility from ‘react-loadable-visibility/react-loadable' const DetailsComponent = LoadableVisibility({ loader: () "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }) import LoadableVisibility from ‘react-loadable-visibility/react-loadable' const DetailsComponent = LoadableVisibility({ loader: () "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, }) stratiformltd / react-loadable-visibility
48. 48.

    None
49. 49.

    const DetailsComponent = Loadable({ loader: () "=> import('./details.component'), loading: ()

    "=> <div>Loading""..."</div>, delay: 300, }); jamiebuilds / react-loadable const DetailsComponent = Loadable({ loader: () "=> import('./details.component'), loading: () "=> <div>Loading""..."</div>, delay: 300, });
50. 50.

    suspense

51. 51.

    bit.ly/lazy-metro metro (react native)

52. 52.

    None
53. 53.

    audit fix ✂ observe

54. 54.

    webpack-bundle-analyzer

55. 55.

    size-plugin

56. 56.

    progressivetooling.com

57. 57.

    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
58. 58.

    / Dx Ux

59. 59.

    @hdjirdeh