Slide 1

Slide 1 text

Lazy Loading Images Progressively and Bundle Analyzing SHODIPO AYOMIDE | JAVASCRIPT AND FRIENDS CONFERENCE, COLUMBUS, OH

Slide 2

Slide 2 text

Hello! Name: Shodipo Ayomide What I do: - Senior Developer Advocate at Fleek - Media Developer Expert at Cloudinary - Instructor at egghead - Community Evangelist @unStack @oscafrica - @DevCLagos @NaijaHacks You can contact me @developerayo on Twitter :)

Slide 3

Slide 3 text

Fetched data + Client’s Output Loading

Slide 4

Slide 4 text

Images account for 60% of the bytes on average needed to load a webpage on the internet - Google. Tweet - @developerayo

Slide 5

Slide 5 text

Images

Slide 6

Slide 6 text

Used for tracking a user interaction with your web page but often slows down scrolling Scroll Event Listeners

Slide 7

Slide 7 text

[fix] Passive Event Listeners

Slide 8

Slide 8 text

We indicated that the listener will never cancel the scroll event. `{passive: true}` That information enables browsers to scroll the page immediately, rather than after the listener has finished. By indicating that the listener will never cancel the scrolls event. `{passive: true}` That exactly will enable the browser to scroll immediately rather than lagging

Slide 9

Slide 9 text

We indicated that the listener will never cancel the scroll event. `{passive: true}` That information enables browsers to scroll the page immediately, rather than after the listener has finished. But then you enable this once you have successfully preloaded all images

Slide 10

Slide 10 text

LazyLoading everything to increase performance

Slide 11

Slide 11 text

Oh Yea!!! you can also Lazy Load Iframes for that faster web experience

Slide 12

Slide 12 text

Lozad.js

Slide 13

Slide 13 text

Lozad.js is a lightweight JS library to lazy load any HTML element such as images, videos Iframes and more.

Slide 14

Slide 14 text

First: You have to install the Lozad.js package from nam into whichever project you want to Lazy Load images on.

Slide 15

Slide 15 text

Install Lozad.js via `yarn` or `npm` whichever package handler you use.

Slide 16

Slide 16 text

Import lozard.js into your project using the `import` command or via `CDN` wrapped in a `` tag at the bottom of the page.

Slide 17

Slide 17 text

Call an image using the `img` element tag and reference the class as Lozad

Slide 18

Slide 18 text

Lastly, in your JavaScript file initialize Lozad, and set default selector as ".lozad"

Slide 19

Slide 19 text

Think Cloudinary Progressive Image rendering

Slide 20

Slide 20 text

PlaceHolders

Slide 21

Slide 21 text

Placeholders Cloudinary is a media transformation tool, using a placeholder with cloudinary, you’ll have to request for a low-quality image of 400 X 300 (depending on main image size) resolution, grey style, 100% blurry picture from cloudinary.

Slide 22

Slide 22 text

Next for the high-quality image, request for another image without the grey style, and blur function

Slide 23

Slide 23 text

The Low-quality, blurry image would be sent first thanks to Cloudinary, then in 5 seconds fades-into the high quality image we requested for.

Slide 24

Slide 24 text

Track your images using light house

Slide 25

Slide 25 text

Run a preloaded in the background for 5s while images loads. #the-traditional-way

Slide 26

Slide 26 text

Always AUDIT from the Lighthouse

Slide 27

Slide 27 text

Fix issues alerted by Lighthouse Use a Library like Lozad.js, Placeholders, preloaders

Slide 28

Slide 28 text

Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

Slide 29

Slide 29 text

Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle-analyser to your `package.json` file.

Slide 30

Slide 30 text

Setup the webpack-bundle-analyzer as a plugin in your `webpack.config.prod.js` file

Slide 31

Slide 31 text

Once you have setup the webpack bundle analyzer you then have to run the `npm run build` command in your terminal. and it’ll generate another host.

Slide 32

Slide 32 text

By visiting the generated host you `127.0.0.1:88 88` to view the visuals of your JavaScript Bundles

Slide 33

Slide 33 text

MOBILE APP VIEW Should be performant and fast

Slide 34

Slide 34 text

The Desktop Site Should be performant and fast

Slide 35

Slide 35 text

Any questions? Follow me on Twitter @developerayo THANKS!