WordPress comes with default comment system which you can use for having interactive discussions on your blog. You have an option to enable or disable comments site wide as well as for individual blog posts. When you have large number of comments on posts, users need to scroll through the entire comment section before reaching the footer. In this article, we will explain how to lazy load comments in WordPress to load them only when needed.
Lazy Loading of Comments
Lazy loading is the feature to load the content only when there is a user interaction. Though WordPress users primarily use lazy loading for images, you can also make use of this feature for comments. Here are some of the reasons why you need to lazy load comments in WordPress site.
- Comments are available only at the bottom of your blog posts and hence they are not required to load during the initial page load.
- Long list of comments will increase the DOM elements thus impacting page loading speed of your site.
- Comments form may intrude the user’s experience on your site when they do not want to leave comments.
- Lengthy list of comments will occupy large space on mobile devices which can be avoided.
- By default, comments will show gravatar images and most of the themes will not align the comment section properly if you disable gravatar from settings. Since gravatar images are loaded from third-party website, it will affect the speed of your site.
In summary, hiding and loading comments form when needed will improve page loading time as well as user experience. Since these are ranking factors in Google search algorithm, you can improve the ranking by lazy loading comments.
Default Options to Break Comments Section
WordPress offers few default settings under “Settings > Discussion” section to manage comments. For example, you can set the maximum number of comments showing on the blog post. This will create paginated comments when the number of comments exceeds the set limit. However, it does not improve much speed as the comment form will be loaded during initial page loading.
For gravatar images, you can use image lazy loading features with plugins like WP Rocket or Perfmatters. Also, most of the free caching and optimization plugins offer image lazy loading feature which you can use for lazy loading gravatar images.
Lazy Load Comments in WordPress
Lazy loading comments can solve many speed problems including lazy loading of gravatar images. For this you have to use Lazy Load Comments plugin and select the method. After logging into your WordPress dashboard section, go to “Plugins > Add New” area. Search for “lazy load comments” and scroll down to find Lazy Load for Comments plugin.
Click “Install Now” button and then “Activate” button to start using the plugin on your site.
Customizing Comments Lazy Loading Options
The plugin offers one simple setting to decide how you want to lazy load comments section. Go to “Settings > Discussion” section and scroll down to the bottom. Just above “Avatars” section, you can find a new option for “Lazy Load Comments”.
Click on the drop down against “Lazy Load Comments” to find three available options.
- On Scroll – lazy load comments on scrolling when the user reached the comments section on the page. This is a default option and works similar to lazy loading of image.
- On Click – this will show “Load Comments” button, users can click on it to reveal the comments and form sections.
- No Lazy Load – this will disable lazy loading feature, so do not select this option.
We recommend choosing “On Click” option to show a button which can help in two ways. First is only interested users who want to leave or read comments will click the button. Secondly, it can save space by hiding comments and form which can improve user experience on mobiles. After selecting the option, scroll down and click “Save Changes” button to apply the settings on your site.
Testing on Your Site
We recommend you to test the lazy loading button in your testing or staging site. This is because the appearance of the button depends on your theme’s style and most themes do not support the styling properly. Below is how the “Load Comments” button will look like in default twenty-twenty-two WordPress theme. When you click on the button, you will see a spinning loader and then the comment section will appear.
Here is how the button looks on one of a third-party theme we have tested. It simply appears as a text without clear visibility.
If your theme did not show the “Load Comments” button properly, you need to adjust the padding and margin details with custom CSS. The plugin uses the CSS class id llc_comments_button for the button. For example, below is the CSS code we used to align the button on breek theme.
#llc_comments_button {
padding: 15px;
margin: 100px;
border-radius: 5px;
font-size: 18px;
background: rgb(255 241 118);
}You can check the source code using inspect option in your browser and adjust the padding, margin, border radius and other parameters on live site.
If you want to change the button background on hover, use the following CSS. Since we have used yellow variation for default button background in the above CSS, here we use white to show on hover. This blends with the black text color so that users can clearly see the button and read the text.
#llc_comments_button:hover {
background: rgb(255 255 255);
}When your CSS is ready, go to your WordPress admin dashboard and navigate to “Appearance > Customize” section. Paste the CSS code under “Additional CSS” section and click “Publish” button.
Note that the customizer will not reflect the button as lazy loading will work only on the live site.
Problems with Comments Link
Many themes show a “Comments” link as post meta data below the post title. When lazy loading comments, this comments link will not work as there will be no comments section loaded when you are in the post title section.
Unfortunately, only option here is to disable comments meta link. Popular lightweight themes like Astra, GeneratePress and Kadence offer an option to toggle meta data you want to show below title. However, if your theme does not offer this feature, you may need to use CSS to hide the link. As explained above, you can right click on the link and use inspect option to find the relevant CSS class in the developer tools section. Once you have the CSS class for comments meta data, add the following CSS under “Appearance > Customize > Additional CSS” section to hide the link.
.my_comments_meta {
display: none;
}If required, get help from your theme’s developer on how to hide the meta link.
Lazy Loading Third-Party Comments Setup
Some site owners use Facebook or Disqus comments instead of default WordPress comments form. Though this helps to reduce comments spam, it will drastically impact speed by sending additional HTTP request for loading comments from third-party sites. If you are using Facebook or Disqus comments, then you can lazy loading them using different plugins. You can use Lazy Social Comments plugin for Facebook and Disqus Conditional Load plugin for Disqus.
These plugins are also from the same author, however, offer large number of custom settings. For Facebook comments lazy loading, after installing the plugin go to “Settings > Lazy FB Comments” section. Fill the details for app ID, number of comments to show, choose color scheme and select the on click option. You can also add a “Comments Div Class” to wrap the button inside a div element which you can customize with additional CSS as explained above.
Disqus Conditional Load plugin needs a complete integration of Disqus before you lazy load. It will create additional menu item in the dashboard sidebar with the name “Disqus”. You can navigate through different sections and customize the settings to lazy load Disqus comments.
Leave a Reply
Your email is safe with us.