Lazy Loading comments is a simple strategy that you can implement on your website to improve your load time. If your blog posts have comments enabled and you frequently find yourself with long threads, you may be tempted to find ways to improve your load time.
There are a few options. You can split your comments into multiple pages, which is the worst option in my opinion. You can lazy load the images, which is a great half way approach. Or the final option is to lazy load all of your comments. This not only removes the HTTP requests from the images, but also reduces the initial load time.
Lazy Load For Comments Plugin
The Lazy Load For Comments plugin does just that. It allows you to load your comments either on button click or on scroll. This can dramatically improve your posts load time (as demonstrated in the above video). This is because it removes all the associated DOM elements, and improves the initial HTML render speed. It also removes all the Gravatar images, which many times are unoptimized and are served from different URLS, regardless if they are the same image or not.
Personally I am a fan of loading the comments on button click, but if you need them to load in automatically, there is an option to load them in on scroll.
Performance Improvement
On staging, I tested a page with 112 comments. I then ran a before and after report on GTMetrix. Before enabling lazy load on the comments section, the website gave the following grades as measurements.
Before Lazy Loading Comments
Page Speed Score: 36%
YSlow Score: 74%
Fully Loaded Time: 3.6 Seconds
Page Weight: 0.99MB
Request Count: 136
After Enabling Lazy Loading For Comments
After I setup Lazy Loading for the comments, we ended up with the following.
Page Speed Score: 91%
YSlow Score: 89%
Fully Loaded Time: 1.7 Seconds
Page Weight: 277KB
Request Count: 19
Closing Thoughts
Lazy Loading your comments can improve your overall load time, by no longer loading Gravatars on the initial load. One thing to keep in mind is, this plugin does load in comments via an admin-ajax.php request. But using CloudFlare, you can in theory cache this request to reduce your server load.
Leave a Reply