Hey everyone! It is Scott from sertmedia.com and in this video I'm gonna be
showing you an awesome free plugin
called Lazy Load For Comments. So in the
A3 Lazy Load video, I talked
about how it can improve the load time
of your website by lazy loading videos
and iframes, which basically just meant
that your browser
will not download those images or videos
until they scroll to show to the user. So
basically, if you have a footer image in
your footer, but the user never scrolls
to the footer,
they won't download that image, which
reduces the number of bytes they need to
download from that data connection but
it improves their load time because they
don't have to wait for that data to be
sent for the page they fully downloaded.
Lazy Load for Comments is along the
same concept, but for the comments on
your articles. Having a website where
you are having an active comment base is
good for your SEO, but it's also very
challenging from a performance point of
view. One thing that people try to do is
offload their comments to a service like
Disqus or Facebook. That way they don't
have to worry about the impact on their
browser; from the browser's rendering
speed but they don't have to impact
their server either, to handle the
processing of the comments. So what
happens is when you're using the native
WordPress comments and you get a very
large number of comments, in this case I
auto-generated 112 of them, you start to
notice that you're gonna start getting
some performance issues. Most of the
scrolling for instance on this is due to
the comments. I ran a GTmetrix report as
well to help illustrate the impact on
the DOM size. So there's 2906 DOM
elements most of which are originating
from the comments and as you can also
see there's a substantial number of
Gravatar's, even though they are all
coming as the same image, the mysterious person. So not only is the browser now
having to download all of the HTML for
your comment section, they have to
download every image even though it's
the exact same
image. This is one of the inefficiencies
in Gravatar where one user has the same
Gravatar as another, they're still
treated as two entirely separate URLs. So
the browser has to download each and
every one of these little images. Now
using a plugin like A3 Lazy Load
will cut out these requests here on the
initial load.
However A3 Lazy Load will not solve
the DOM size issue and the only way to
do that is to use Lazy Load for Comments.
So Lazy Load for Comments, when you
install it, you get a new menu under the
discussion settings. You could choose to
not lazy load, lazy load on click, or lazy
load on scroll. To illustrate what
happens, I'm gonna set it to on click.
That way you can see what actually is
going on. So I'm gonna refresh this page
and the one thing you immediately notice
is the scroll bar is way smaller. So we
can automatically assume now that the
comments are indeed not there and as you
can see it's left with a load comments
button. This can be easily styled with
custom CSS. This is just whatever the
2019 theme decided it would look like. And to
load the comments all they have to do is
click this button. You get a nice little
image and then the comments load in and the DOM size will balloon. So to
illustrate the how this can improve, I'm
now going to run a second GTmetrix test.
GTmetrix isn't a perfect testing tool
by any means, but this is a good way of
grasping the immediate impact of loading
comments on your website. So we're going
to go ahead and let this run and what
I'm expecting is, notably the request to
drop because we're no longer downloading the Gravatar's and I'm also expecting
that DOM size to be substantially
smaller. So we're gonna go ahead and let
it go and it looks like it has hit the
varnish cache. Of course it did. You can
never have and you can never have an
easy test without varnish getting in the way
can you. So we're just gonna go over to my Cloudways real quick and I'm going to
purge my server cache to remove that
issue.
And if you're doing this on your own
website, you probably ran the test and
you already saw the reduction.
That's always going to happen, by lazy
loading these comments. But we have
varnish. Varnish always likes to be a
little bit of a persnickety server side
cache. Alright. There we go. We're gonna
run it one more time and hopefully we
should see that amazing improvement that
I was just referring too. You can also set
it to lazy load on scroll and whichever
method you choose is really coming down
to how you want to interact with your
users. If you have content in the footer
that you're not trying to bury under
your comments, then I do recommend you
set it to load via the button. And as you
can see the improvement that we just
have was quite dramatic.
Remember, we're loading the same image
but from a bunch of different URLs.
Because Gravatar isn't efficient, which
so we reduced our page size by about 140
kilobytes. We reduced the request count
down from 122 to 19. And we reduced the
fully loaded time dramatically, but
that's mostly because of all the images
we were downloading. And our DOM size which was originally 2,900 elements now passes
and it doesn't even flag you anymore.
This is a pretty substantial improvement.
We still have 60 Gravatar requests
because the theme loads them in the
header naturally so you wouldn't have
this unless you're also using the 2019
theme or your own theme does a little
bit something interesting. But back to
the discussion settings, the on-click
method is my preferred method if I'm
working on a website where they have a
large amount of comments. But if it's a
website where the comments are the
primary reason people go there, meaning
when the website is created and you're
writing a post, you're trying to
immediately engage with the audience and
your footer is less of a concern, then I
set it to on-scroll. It's also a good
thing to do if you're trying to keep the
the user experience a
little bit more seamless. So if you set
it to the on-scroll, then the users just
get a nice little loading bar and they
don't have to click a button. So if
you're concerned about the comments
decreasing, I recommend you set it to on-scroll, that way users don't even notice
really the impact that they're getting.
But if you're just strictly going for
performance and you want to optimize
what's showing in your footer and you
want to lead users to other pages,
without setting your comments up in
multiple pages, then on-click is also
fine. And then one more note would be,
you can break comments into pages, but as has  been covered by Yoast SEO and a
couple of other outlets, the problem with
this method is it splits your post into
multiple pages. So what happens is is if
you split the comments into pages... I'm
gonna show you what happens on this one.
Remember we have about one hundred and
twelve comments. So I'm gonna set the
amount of comments per page to 20 and
we're gonna reload. The DOM size is
immediately smaller, but what happens
is, is when you get to the bottom you
have to now click to go to the previous
comments. So now you get your URL with
comment-page- five and now it's
splitting the number of pages that users
have to click through to read the rest
of the comments. This is not really good.
And if you don't have proper canonicals
in place, what can also happen is comment-page-five may be indexed as its own
separate page. The issue with that is as
your rankings aren't typically coming
from your comments. It's going to be
coming from the content of your blog
post. So what happens here is you're
splitting the number of pages. If they
both get indexed, you could get hit
with duplicate content warnings because
you're having the same post index for
multiple URLs. So just make sure you have
proper canonicals in place and that
you're devs haven't done anything
particularly odd. But I just don't
recommend you use this method at all.
Lazy loading the comments is just a
much more efficient means of improving
your load time without really having any
weirdness going on with your URL schemes.
If you have any questions about this
plugin please feel
free to ask in the comments below and I
will try to help you out. I'll include a
link to it in the description below. You
should certainly check it out if you
have very active comment base. Otherwise
thank you so much for watching and
goodbye.
