Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lazy Loading Images Progressively and Bundle An...

Lazy Loading Images Progressively and Bundle Analyzing

Topic: Lazy Loading Images Progressively and Bundle Analyzing
Location: London

Shodipo Ayomide

May 28, 2020
Tweet

More Decks by Shodipo Ayomide

Other Decks in Programming

Transcript

  1. 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 :)
  2. Images account for 60% of the bytes on average needed

    to load a webpage on the internet - Google. Tweet - @developerayo
  3. Used for tracking a user interaction with your web page

    but often slows down scrolling Scroll Event Listeners
  4. 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
  5. 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
  6. Lozad.js is a lightweight JS library to lazy load any

    HTML element such as images, videos Iframes and more.
  7. First: You have to install the Lozad.js package from nam

    into whichever project you want to Lazy Load images on.
  8. Import lozard.js into your project using the `import` command or

    via `CDN` wrapped in a `<script>` tag at the bottom of the page.
  9. 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.
  10. 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.
  11. Install the webpack-bundle-analyzer via `NPM` or `YARN`. This will add

    the webpack-bundle-analyser to your `package.json` file.
  12. 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.
  13. By visiting the generated host you `127.0.0.1:88 88` to view

    the visuals of your JavaScript Bundles