Archived topic
Unable to lazy-render comments section
1 reply · Started by Deepak on May 24, 2021
Hello Team,
I am testing content-visibility CSS to lazy render below the fold HTML contests such as footers, comments etc. Now this CSS is properly able to lazy render multiple HTML elements but somehow it doesn't work for comments section.
Is there anything you guys can help here with? Is this anyway theme related because I know you use WordPress Comments? But any idea what could be the root cause?
For example to lazy render footer I use (working):
.site-footer {content-visibility: auto; contain-intrinsic-size: 1px 1000px;}
But when I do the same for comments section, it doesn't work:
.comments-area {content-visibility: auto; contain-intrinsic-size: 1px 1000px;}
Any help is much appreciated.
Regards
Hi Deepak,
I believe there's a better way to deal with this than having set contain-intrinsic-size: 1px 1000px;.
The issue with this property is, you basically have to guess what the higher value is.
This is quite difficult to determine per post because the number of comments will vary and increase in time.
Good read about this - https://css-tricks.com/more-on-content-visibility/
That said, it may be better to take on a new approach which is ajax requested/loaded comments.
I recommend using a plugin for this.
Try this one - https://wordpress.org/plugins/lazy-load-for-comments/
