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