Comments on a site can be a detriment to performance, particularly if you have a few hundred of them on a post. Since comments have a lot of markup, they can increase the DOM size. This causes the page to render slower and delays the execution of other third-party scripts that rely on the DOM being ready.
To alleviate the issue with DOM size and comments, you can split them up into pages, lazy load them, or both.
In this How To, I’ll show you how to lazy load native WordPress comments.
Step 0: Use native comments
It’s always a good idea to make sure that core comments are left alone so as to have the most compatibility with other commenting plugins. That means that Jetpack Comments or ThriveComments are out.
Avoid Jetpack Comments like the plague.
Jetpack loads its comment form in an iframe, which makes it impossible to target or extend. While Jetpack Comments has some nice subscription features, it does not work with the majority of third-party commenting plugins.
Step 1: Install Ajaxify Comments
Ajaxify Comments is a neat little plugin that adds some Ajax functionality to the comment section, allowing you to interact with comments without a reload.
We’re going to use Ajaxify Comments to enable lazy loading. Go to your WordPress admin and go to “Plugin->Add New.”
From there, type into the search input: ajaxify comments. Install and activate the plugin.
Step 2: Activate Menu Helper in Ajaxify Comments
Head to the Ajaxify Comments admin screen, which you can find under “Settings->Ajaxify Comments.”
You’ll want to enable an admin bar helper called Menu Helper. Since native comments can be the Wild West, Ajaxify Comments needs to know how to “select” your comment section so it can be lazy-loaded. Menu Helper provides a tool that can scan your comments page for the right selectors.
Step 3: Visit a post with comments open and that has a few comments and launch Selector Helper
Find a post with comments open, that has a few comments.
Open up Menu Helper by clicking Ajaxify in the admin bar menu.
Click on “Launch Selector Helper,” which will guide you through a wizard to learn about your comment section.
Once Selector Helper is launched, it’ll walk you through the selection process.
Step 4: Enable Lazy Loading
Head to the admin settings for Ajaxify Comments and enable Lazy Loading.
You’ll see several options to configure lazy loading, such as what triggers it. For more on the Ajaxify Comments lazy loading settings, please visit the lazy load documentation.
Step 5: Visit a Post With Comments
Visit a post with comments and you’ll see a Loading Comments popover. You’ll then see the rest of your comments load in like normal.
You’re Done!
Ajaxify Comments is a free plugin that works with the native comment system. Today you learned how to enable lazy loading using the plugin and your existing theme.
