Progressive Imaging
& Handling in
WebPack
SHODIPO AYOMIDE | REACT ATLANTA, ATLANTA, UNITED STATES
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
Fetched data + Client’s Output
Loading
Slide 4
Slide 4 text
Images account for 60% of the
bytes on average needed to load
a webpage - Google.
Slide 5
Slide 5 text
Images
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
Used for tracking a user
interaction with your web
page but often slows down
scrolling
Scroll Event Listeners
Slide 8
Slide 8 text
[fix]
Passive Event Listeners
Slide 9
Slide 9 text
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.
Slide 10
Slide 10 text
Intersection Observer API
Slide 11
Slide 11 text
We have `data-src` here because we want to
hold this image and pass it through the
Intersection Observer API
Slide 12
Slide 12 text
Next we are
creating an object
`config` and
setting it up with an
`intersectionObser
ver `example
Slide 13
Slide 13 text
Finally, you iterate over all of your images and add
them to the Observer instance and lazy load the image.
Slide 14
Slide 14 text
Lazy Load Images / Eagerly Load Images
Slide 15
Slide 15 text
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.
Slide 16
Slide 16 text
Oh Yea!!! you can also Lazy Load Iframes for that
faster web experience.
Slide 17
Slide 17 text
Lozad.js
Slide 18
Slide 18 text
- 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
Slide 19
Slide 19 text
Lozad.js is a lightweight JS library
to lazy load any media files or
HTML elements such as images,
videos Iframes and more.
Slide 20
Slide 20 text
First: you have to install the
Lozad.js library in
whichever project you want
to Lazy Load on.
Slide 21
Slide 21 text
Install Lozad.js via `yarn` or
`npm` whichever package
manager you are used to.
Slide 22
Slide 22 text
Import lozard into your project using
the `import` command or via
`CDN` wrapped in a `` tag
at the bottom of the page.
Slide 23
Slide 23 text
Call an image using the `img` tag
and set the class as Lozad
Slide 24
Slide 24 text
Lastly, in your JavaScript file
initialize Lozad, and set default
selector as ".lozad"
Slide 25
Slide 25 text
Think Cloudinary
Progressive
Image rendering
Slide 26
Slide 26 text
PlaceHolders
Slide 27
Slide 27 text
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.
Slide 28
Slide 28 text
Next for the high-quality image, request for another
image without the greystyle, and blur function
Slide 29
Slide 29 text
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.
Slide 30
Slide 30 text
Lighthouse Auditing
Slide 31
Slide 31 text
Fix issues alerted by Lighthouse
Use a Library/processes like Lozad.js,
Placeholders, preloaders
Slide 32
Slide 32 text
Analyze a Production
JavaScript Bundle with
webpack-bundle-analyzer
Slide 33
Slide 33 text
Install the webpack-bundle-analyzer
via `NPM` or `YARN`. This will add
the webpack-bundle-analyser to
your `package.json` file.
Slide 34
Slide 34 text
Setup the
webpack-bundle-analyzer as a
plugin in your
`webpack.config.prod.js` file
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
Visit the
generated
host by
clicking the IP,
`127.0.0.1:88
88` to view
the visuals of
your
JavaScript
Bundles
Slide 37
Slide 37 text
MOBILE APP VIEW
Should be performant, PWA
Slide 38
Slide 38 text
LAPTOP VIEW
Should be performant
Slide 39
Slide 39 text
DESKTOP VIEW
Should be performant
Slide 40
Slide 40 text
Follow me on Twitter & GitHub:
@developerayo
Any questions?
THANKS!