Lazy Loading Images
Progressively and
Bundle Analyzing
SHODIPO AYOMIDE | FRONTSTACK.IO CONF, MEDIA ON THE WEB, LAGOS, NIGERIA
Slide 2
Slide 2 text
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
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
Used for tracking a user
interaction with your web
page but often slows down
scrolling
Scroll Event Listeners
Slide 7
Slide 7 text
[fix]
Passive Event Listeners
Slide 8
Slide 8 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 9
Slide 9 text
We have `data-src` here because we want this
image to pass through the Intersection
Observer API
Slide 10
Slide 10 text
Next we are
creating an object
`config` and
setting it up with an
`intersectionObser
ver `example
Slide 11
Slide 11 text
Finally, you iterate over all of your images and add
them to the Observer instance and lazy load the image.
Slide 12
Slide 12 text
Lazy Load Images everytime to increase performance
Slide 13
Slide 13 text
Oh Yea!!! you can also Lazy Load Iframes for that
faster web experience
Slide 14
Slide 14 text
Lozad.js
Slide 15
Slide 15 text
Lozad.js is a lightweight JS
library to lazy load any
HTML element such as
images, videos Iframes and
more.
Slide 16
Slide 16 text
First: you have to install
Lozad.js library in
whichever project you want
to Lazy Load on.
Slide 17
Slide 17 text
Install Lozad.js via `yarn` or
`npm` whichever package
handler you use.
Slide 18
Slide 18 text
Import lozard.js into your project
using the `import` command or via
`CDN` wrapped in a `` tag
at the bottom of the page.
Slide 19
Slide 19 text
Call an image using the `img`
element tag and reference the class
as Lozad
Slide 20
Slide 20 text
Lastly, in your JavaScript file
initialize Lozad, and set default
selector as ".lozad"
Slide 21
Slide 21 text
Think Cloudinary
Progressive
Image rendering
Slide 22
Slide 22 text
PlaceHolders
Slide 23
Slide 23 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 24
Slide 24 text
Next for the high-quality image, request for another
image without the greystyle, and blur function
Slide 25
Slide 25 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.
Slide 26
Slide 26 text
Preloading using
Cloudinary
Slide 27
Slide 27 text
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?
Slide 28
Slide 28 text
Always AUDIT from the Lighthouse
Slide 29
Slide 29 text
Fix issues alerted by Lighthouse
Use a Library like Lozad.js,
Placeholders, preloaders
Slide 30
Slide 30 text
Analyze a Production
JavaScript Bundle with
webpack-bundle-analyzer
Slide 31
Slide 31 text
Install the webpack-bundle-analyzer
via `NPM` or `YARN`. This will add
the webpack-bundle-analyser to
your `package.json` file.
Slide 32
Slide 32 text
Setup the
webpack-bundle-analyzer as a
plugin in your
`webpack.config.prod.js` file
Slide 33
Slide 33 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 34
Slide 34 text
By visiting the
generated
host you
`127.0.0.1:88
88` to view
the visuals of
your
JavaScript
Bundles
Slide 35
Slide 35 text
MOBILE APP VIEW
Should be performant
Slide 36
Slide 36 text
LAPTOP VIEW
Should be performant
Slide 37
Slide 37 text
DESKTOP VIEW
Should be performant
Slide 38
Slide 38 text
Follow me on Twitter & GitHub:
@developerayo
Any questions?
THANKS!