Lazy loading comments can improve performance
Lazy-loading comments can improve the page load of your blog posts and pages. If there are a lot of comments on a post, this can slow down the page's loading speed.
Make sure you set your selectors first. You can use Menu Helper to help set your selectors.
Find the Lazy Load options in the admin settings. The first option on the page allows you to enable or disable lazy loading for comments.
You can use Menu Helper to simulate lazy loading before it's activated.
Here are the types of Triggers and what you can do for each one.
Comments do not load unless specifically invoked by an external source.
The external source will want to call this JavaScript function to load in the comments:
This option allows Ajaxify Comments to load when the comments section has been reached. This will be useful for never loading the comments for the user until that user reaches further down the page in the comments section.
You can adjust a vertical scroll offset (in pixels) to "trigger" loading a certain distance above the comments section.
This will load comments once the page has finished loading. This is the default behavior.
This option allows you to set which HTML element or CSS selector must be scrolled into view in order to load comments.
Use a valid CSS selector using jQuery notation (.css-class,#css-id,form)
For example, if you set a selector to some Related Posts at the bottom of your content, the comments will load in when the posts are scrolled into view.
You can set the scroll offset so that the loading occurs a certain number of pixels above the offset.
Units are in pixels: Scroll offset is in pixels.
You can set the loading trigger to be scroll distance. This will load the comments when a user reaches a certain number of pixels from the top of the screen.
You can choose between an overlay or no overlay for lazy loading. An animation of the loading popover is below.
The Overlay can be configured in the Appearance settings.
