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.