Hey everyone! This is Scott from sertmedia.com and in this video I'll be
covering a free plugin called A3
Lazy Load. I haven't talked a lot about
lazy loading on this channel before and
I feel like I'm gonna address how lazy
loading works and how this plugin works
in particular. So lazy loading is the
process of rewriting basically the
source attribute of an image or an
iframe or a video and then when you
scroll down the page via JavaScript, it
gets replaced with the actual source URL
of the image. So what this does is it
reduces the amount of requests and the
page weights on your initial page load.
So for example, and this is a staging
site for a redesign for my home page
that I was working on. We are going to go
ahead and publish all these posts that I
have in the trashcan and I'm gonna show
you how this works. When you lazy load a
resource you're basically telling the
browser it doesn't need to download this
until it reaches the point to which it
can render it. So, as we could see and
we're just gonna go to the home page, we
have images like this image item right here.
on the initial page load only the items
that are above, so everything in the
initial viewports down to this text
should be what's rendered. This image, if
it existed, would also render. But this
image doesn't need to be downloaded
until it begins to enter viewport. This
is particularly useful if you're on a
larger website where you have a lot of
images. For instance, on my own website
and this is the live site where I push
this design live, when I get, when I load
it up, as you can see I have many images
and you saw a bit of a loading icon for
these ones as you scroll down the images
begin to render in. A3 Lazy Load
allows this to happen. What it does, is it
says to the browser you don't need to
download this resource and then as it
begins to scroll it replaces the data
source attribute with the correct source
for the resource. So, your page weight
goes down and your request count goes
down and this helps improve the load
speed particularly for mobile devices.
So, A3 Lazy Load makes this incredibly easy
and we're gonna go through it and I'm
gonna show you the optimal way to
configure it and to let you know some of
the pitfalls you may run into. So, first
off, the plug-in global settings these
don't really do all that much. You can
just choose to open up the display box
which will show and enable all of the
boxes to be enabled and then you could
choose to clean up on deletion, which
basically just says when you delete the
plug-in it will delete all of its data
from the database, which is optimal. I
would take this on, typically if you
delete a plugin you don't want to keep
the settings laying around. Lazy load
activation allows you to turn lazy
loading on. This activates the actual
plugin. If you're trying to debug and you
uncheck this option, it will completely
disable the functionality. Under lazy
loading for images, this is where you get
the, to enable and disable specific image
types that get lazy loaded. So, post
thumbnails, image within widgets images
in the content, Gravatar's and then no
scripts support isn't a type of lazy
load. It adds a no script attribute that
it works when a browser has lazy loading
or rather JavaScript disabled. So that
way images can still be rendered, but
also for crawlers like Google, it can
read it. Google, while it does render
JavaScript, typically it does a first
pass of the page where it only checks
the HTML and then when, then it'll
do another check at a later date to do a
full render. This just makes sure that
your images are properly indexed and
avoids any SEO concerns that you may
have, with the, by adding the no script
support now you have the ability to
exclude images, what this does is allows
you to include a class for the images to
not be lazy loaded. So what you'll do is
you'll go to your website and let's just
say you don't ever want these,  this image
type to be lazy loaded. So, you look for
some type of class, this is a background
image, so there's not gonna be one, but
let's say we have this image right here
and we'd look to see if the image has a
class. This particular image does not
have an associative class because the
class name needs to be included on the
image source, not
above attributes. So, if I wanted to lazy
exclude this from lazy load I now need
to edit it and add a class for it to be
bypassed from lazy load. So I'll have to
add this attribute to the class name or
if it has an existing class name, I can
provide it here. And we're basically just
telling it that you doesn't need to be
lazy loaded and it's because this is an
advertisement we want to render right
away for whoever our partner is that
we're working on so we just scroll down
in this case on this theme and it has an
option to provide it with an extra class
name so I'm just gonna click skip lazy
as the class and then I'm adding
depending on your own theme it may have
a different way for you to do this
you'll have to consult with them or if
it's another thing that I've covered it
should have already been covered in the
video. So, if you look over here now, we
now have the image class and the skip
lazy attribute was actually added onto
the div class. Which gotta love themes
and their odd decisions, but the concept
works the same and you add the class
skip lazy to any image that you don't
want to be lazy loaded and it will not
lazy load them. The horizontal scroll,
what this does, is if you have a
gallery where you have a horizontal
scroll so sometimes if you use, um, some kind
of a slider maybe you have a collection
of logos that you're displaying like
through owl carousel, you could
include this, the container class name or
the IDs.
So, that way there's no weird
interactions with it working. Under, the
lazy load videos and iframes what this
does is, it will lazy load the most common
videos, WordPress embeds, um, YouTube videos,
Vimeo videos. What it will do is it won't
download the video JS, until after it
comes into viewport. This helps a lot.
While I do recommend that you host actual
videos on something like YouTube,
primarily to have good playback speed
and for it to download quickly, the
player itself is quite bulky. It's about
one megabyte of JS. So, by lazy loading
the videos not in viewport, you can
dramatically reduce the initial page
weight and improve the render speed. If
you've ever run a GTmetrix test for
instance and
you see defer JS and it comes up with the
YouTube embed JS, this is one solution
that you could look at resolving it. And
you enable it and it should work out of
the box with the most common YouTube
implementations, including video series,
playlists, and the just a single video. So
long as it's in an iframe, it will work.
You can exclude by URL's and page types. So, if you want
to exclude pages to not be lazy loaded,
you could include a URL in the entire
page will not be lazy loaded. So, let's
say you have your checkout page and
WooCommerce and you don't want any of the
images that you're showing on there to
be lazy loaded. You'll just include
checkout and now they will not be lazy
loaded. You can choose to exclude it by
page type as well, including different
archive types. So, say you don't want lazy
loading on your post categories, this
will disable it for all post categories.
You typically don't need to do any of
this, this is more of a debugging tool. So,
just keep this in mind. I wouldn't do
this unless you have a real reason to do
it. Under script load optimization, make
sure this is checked to say footer. By
loading in the footer, it's not going to
be render blocking, which will improve
your website's load time. Under WordPress
mobile template plugins, if you're using
WPtouch or melt mobile press you will
need to make sure it's disabled because
there are conflicts with it. WPtouch, if I
recall, does have its own implementation
of lazy loading, at least on some of the
images so you want to make sure that
you're not lazy loading again, which
could prevent the images from rendering.
The affected style allows you to choose
the load in effect.
The default is a spinner. There's also a
fade in effect to really no matter which
one you go with, it's personal preference.
I prefer a fade in effect because it
looks a lot more natural and cleaner.
When you have a spinning icon, though it
does give more feedback to the user to
let them know that this image is being
downloaded it's just not quite ready yet.
Whichever you go with is really your own
call. You can choose a background color
too so that way you do have branding
colors which can work to your advantage
depending on how you're trying to style
your website. These effects typically
only last at the most I normally see as
a second and that
for fairly large images. So, it's really
just personal preference and how you
want it to look. The image load threshold,
what this does is it expands, it increases the amount
of pixels outside of viewport for the
images to start being fetched. So, if you
notice that your images are taking a
long time to download and you're waiting
for the spinner or the fade in effect to
go away in the actual image come in, what
you can do is increase the threshold by
a number of pixels. So, what you'll do is
say if you set to 100 so on top of the
initial threshold limit that the plug-in
has in place this will add plus 100. So,
it'll be up to, let's just say the
default is 300 now it'll be 400 pixels
outside of the viewport that images are
starting to be downloaded. This allows
you to have a more seamless interface. If
you're a website that has a lot of
images but you still need to have some
sort of lazy loading, increasing the
threshold limit, while it can cause more
images to be downloaded on the initial
load, it will cause them to download
faster, so that way the icon isn't
staying there as long. You'll have to
experiment. In most implementations where
you have a fairly optimized website, you
shouldn't need to mess around with this
option but if your websites are serving
large images, like in a photography based
website then you may need to include
increase the threshold so that way users
are able to download the images faster.
Then the final option is the Jetpack
Site Accelerator. If you're using the
Jetpack Site Accelerator for images you
need to check this option, so that way
those CDN images can be lazy loaded. By
default they are skipped and this is,
this will only allow them to be lazy
loaded so long as you have this option
enabled. There's never any issues that I
see with it I think it's just some kind
of weird hiccup with the device pixel JS and how this thing works.
After you enable this option though it
should work without a problem.
Really A3 Lazy Loading is just a
solid lazy load plugin. I never have
any issues. It's not as dangerous as some
of the other lazy load plugins. And
what I mean by dangerous is, it is
a lot less prone to issue. Some
lazy load plugins are quite heavy handed and they will lazy load every image and it will
cause breakage. This plug-in is very
conservative but it does do quite a bit.
It does cover most images without breakage.
If you have any questions about this
plugin please feel free to ask on the
comments below
otherwise thank you so much for watching
and good bye
