Lazy Loading Images Progressively and Bundle Analyzing

Topic: Lazy Loading Images Progressively and Bundle Analyzing

Conference: JavaScript and Friends Conference

Location: Columbus, Ohio, United States

Transcript

1. Lazy Loading Images Progressively and Bundle Analyzing SHODIPO AYOMIDE | JAVASCRIPT AND FRIENDS CONFERENCE, COLUMBUS, OH
2. 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 :)
3. Fetched data + Client’s Output Loading
4. Images account for 60% of the bytes on average needed to load a webpage on the internet - Google. Tweet - @developerayo
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. 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
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. But then you enable this once you have successfully preloaded all images
10. LazyLoading everything to increase performance
11. Oh Yea!!! you can also Lazy Load Iframes for that faster web experience
12. Lozad.js
13. Lozad.js is a lightweight JS library to lazy load any HTML element such as images, videos Iframes and more.
14. First: You have to install the Lozad.js package from nam into whichever project you want to Lazy Load images on.
15. Install Lozad.js via `yarn` or `npm` whichever package handler you use.
16. Import lozard.js into your project using the `import` command or via `CDN` wrapped in a `<script>` tag at the bottom of the page.
17. Call an image using the `img` element tag and reference the class as Lozad
18. Lastly, in your JavaScript file initialize Lozad, and set default selector as ".lozad"
19. Think Cloudinary Progressive Image rendering
20. PlaceHolders
21. 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.
22. Next for the high-quality image, request for another image without the grey style, and blur function
23. 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.
24. Track your images using light house
25. Run a preloaded in the background for 5s while images loads. #the-traditional-way
26. Always AUDIT from the Lighthouse
27. Fix issues alerted by Lighthouse Use a Library like Lozad.js, Placeholders, preloaders
28. Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
29. Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add the webpack-bundle-analyser to your `package.json` file.
30. Setup the webpack-bundle-analyzer as a plugin in your `webpack.config.prod.js` file
31. 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.
32. By visiting the generated host you `127.0.0.1:88 88` to view the visuals of your JavaScript Bundles
33. MOBILE APP VIEW Should be performant and fast
34. The Desktop Site Should be performant and fast
35. Any questions? Follow me on Twitter @developerayo THANKS!