React Atlanta Conference - Progressive Imaging & Handling in WebPack

Conference for React Atlanta, covered lazy loading images in JavaScript, and Analyzing images using the webpack-bundle-analyzer.

Transcript

1. Progressive Imaging & Handling in WebPack SHODIPO AYOMIDE | REACT ATLANTA, ATLANTA, UNITED STATES
2. Senior Developer Advocate GITHUB STAR Media Developer Expert at Cloudinary Community Lead @unStackAfrica @oscafrica @DevCLagos @NaijaHacks Hello! I am Shodipo Ayomide Twitter/Github: @developerayo 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. What is Lazy Loading The idea of Lazy Loading media files in the web helps reduce the risk of some of the web app performance problems to a minimal. Response time is drastically reduced, media files loading speed is increased.
7. Used for tracking a user interaction with your web page but often slows down scrolling Scroll Event Listeners
8. [fix] Passive Event Listeners
9. 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.
10. Intersection Observer API
11. We have `data-src` here because we want to hold this image and pass it through the Intersection Observer API
12. Next we are creating an object `config` and setting it up with an `intersectionObser ver `example
13. Finally, you iterate over all of your images and add them to the Observer instance and lazy load the image.
14. Lazy Load Images / Eagerly Load Images
15. Lazy Load Images everytime to increase performance Eager Loading helps you to load all your needed entities at once, powerful catching abilities. With Lazy Loading, we only retrieve just the amount of data, which we need in a single query.
16. Oh Yea!!! you can also Lazy Load Iframes for that faster web experience.
17. Lozad.js
18. - blazy.js - blazy.js is a lightweight JavaScript library for lazy loading and multi-serving images, iframes, video and other resources. - LazyLoad - LazyLoad is a script that automatically loads images as they enter the viewport. - Lozad
19. Lozad.js is a lightweight JS library to lazy load any media files or HTML elements such as images, videos Iframes and more.
20. First: you have to install the Lozad.js library in whichever project you want to Lazy Load on.
21. Install Lozad.js via `yarn` or `npm` whichever package manager you are used to.
22. Import lozard into your project using the `import` command or via `CDN` wrapped in a `<script>` tag at the bottom of the page.
23. Call an image using the `img` tag and set the class as Lozad
24. Lastly, in your JavaScript file initialize Lozad, and set default selector as ".lozad"
25. Think Cloudinary Progressive Image rendering
26. PlaceHolders
27. 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.
28. Next for the high-quality image, request for another image without the greystyle, and blur function
29. 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 after they have been loaded properly.
30. Lighthouse Auditing
31. Fix issues alerted by Lighthouse Use a Library/processes like Lozad.js, Placeholders, preloaders
32. Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
33. Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle-analyser to your `package.json` file.
34. Setup the webpack-bundle-analyzer as a plugin in your `webpack.config.prod.js` file
35. 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.
36. Visit the generated host by clicking the IP, `127.0.0.1:88 88` to view the visuals of your JavaScript Bundles
37. MOBILE APP VIEW Should be performant, PWA
38. LAPTOP VIEW Should be performant
39. DESKTOP VIEW Should be performant
40. Follow me on Twitter & GitHub: @developerayo Any questions? THANKS!