Lazy Loading Images Progressively and Bundle Analyzing

This talk was given at...

- FrontStack Conf in Lagos
- JSCon Mombasa, Kenya
- React Meetup Nairobi, Kenya

Transcript

1. Lazy Loading Images Progressively and Bundle Analyzing SHODIPO AYOMIDE | FRONTSTACK.IO CONF, MEDIA ON THE WEB, LAGOS, NIGERIA
2. Senior Developer Advocate Media Developer Expert at Cloudinary Community Evangelist @unStack @oscafrica @DevCLagos @NaijaHacks Hello! I am Shodipo Ayomide You can contact me at @developerayo on Twitter/GitHub https://shodipoayomide.com
3. Fetched data + Client’s Output Loading
4. Images account for 60% of the bytes on average needed to load a webpage - Google.
5. Images
6. Used for tracking a user interaction with your web page but often slows down scrolling Scroll Event Listeners
7. [fix] Passive Event Listeners
8. 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.
9. We have `data-src` here because we want this image to pass through the Intersection Observer API
10. Next we are creating an object `config` and setting it up with an `intersectionObser ver `example
11. Finally, you iterate over all of your images and add them to the Observer instance and lazy load the image.
12. Lazy Load Images everytime to increase performance
13. Oh Yea!!! you can also Lazy Load Iframes for that faster web experience
14. Lozad.js
15. Lozad.js is a lightweight JS library to lazy load any HTML element such as images, videos Iframes and more.
16. First: you have to install Lozad.js library in whichever project you want to Lazy Load on.
17. Install Lozad.js via `yarn` or `npm` whichever package handler you use.
18. Import lozard.js into your project using the `import` command or via `CDN` wrapped in a `<script>` tag at the bottom of the page.
19. Call an image using the `img` element tag and reference the class as Lozad
20. Lastly, in your JavaScript file initialize Lozad, and set default selector as ".lozad"
21. Think Cloudinary Progressive Image rendering
22. PlaceHolders
23. 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 resolution, greystyle, 100% blurry picture from cloudinary.
24. Next for the high-quality image, request for another image without the greystyle, and blur function
25. The Low-quality, blurry image would be sent first thanks to Cloudinary, then in 5 seconds fade-into the high quality image we requested for.
26. Preloading using Cloudinary
27. Preloaders has been a fun thing before or now and would never be fun, but it might just be your only option at some point. In this case we are discussing preloading images first, a blog post always have that huge poster before the post that takes that little time to reload, how about you preload that image for a faster user experience?
28. Always AUDIT from the Lighthouse
29. Fix issues alerted by Lighthouse Use a Library like Lozad.js, Placeholders, preloaders
30. Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
31. Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle-analyser to your `package.json` file.
32. Setup the webpack-bundle-analyzer as a plugin in your `webpack.config.prod.js` file
33. 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.
34. By visiting the generated host you `127.0.0.1:88 88` to view the visuals of your JavaScript Bundles
35. MOBILE APP VIEW Should be performant
36. LAPTOP VIEW Should be performant
37. DESKTOP VIEW Should be performant
38. Follow me on Twitter & GitHub: @developerayo Any questions? THANKS!