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

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 :)

Fetched data + Client’s Output Loading

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

Images

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

[fix] Passive Event Listeners

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

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

LazyLoading everything to increase performance

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

Lozad.js

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

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

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

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

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

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

Think Cloudinary Progressive Image rendering

PlaceHolders

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.

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

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.

Track your images using light house

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

Always AUDIT from the Lighthouse

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

Analyze a Production JavaScript Bundle with webpack-bundle-analyzer

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

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

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.

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

MOBILE APP VIEW Should be performant and fast

The Desktop Site Should be performant and fast

Any questions? Follow me on Twitter @developerayo THANKS!