{"id":17136,"date":"2020-12-08T15:00:18","date_gmt":"2020-12-08T14:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=17136"},"modified":"2020-12-08T23:40:41","modified_gmt":"2020-12-08T22:40:41","slug":"how-to-lazy-load-wordpress-comments","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-lazy-load-wordpress-comments\/","title":{"rendered":"How to Lazy Load Your WordPress Comments"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Have you noticed how work on a website really never stops? Just when you thought you\u2019ve solved one problem, another one pops up. When you\u2019re done taking care of that one, if a pressing issue doesn\u2019t come up, it\u2019s time for a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-maintenance\/\">WordPress maintenance<\/a> task. And while you\u2019re doing all of that, something astonishing happens: all the many <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-get-more-comments-on-blog\/\">ways to get more comments<\/a> you used start bearing fruit.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And that\u2019s great, right? You\u2019re seeing all the engagement you wanted from your <a href=\"https:\/\/qodeinteractive.com\/theme-category\/online-store-wordpress-themes\">online store\u2019s<\/a> blog section, and that\u2019s awesome. But you have to begin taking <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-moderate-wordpress-comments\/\">comment moderation<\/a> more seriously. Then you start to notice some loading speed issues. And just when you\u2019ve realized you\u2019ve become a victim of your success and that you might need to <a href=\"https:\/\/qodeinteractive.com\/magazine\/disable-comments-wordpress\/\">disable comments on your website<\/a> while you figure out how to deal with them, you hear something about lazy loading WordPress comments.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A search later, and you\u2019re here. A place that will show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-lazy-loading\">What Is Lazy Loading<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lazy-load-wordpress-native-comments\">How to Lazy Load WordPress Native Comments<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lazy-load-facebook-comments\">How to Lazy Load Facebook Comments<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#lazy-load-disqus-comments\">How to Lazy Load Disqus Comments<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-lazy-loading\"><\/a>What Is Lazy Loading and Why Would You Enable It?<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"401\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-is-Lazy-Loading.jpg\" class=\"attachment-full size-full\" alt=\"What is Lazy Loading\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-is-Lazy-Loading.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-is-Lazy-Loading-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/What-is-Lazy-Loading-620x355.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The digital world is obsessed with speed. It\u2019s not the biggest of its obsessions but it\u2019s probably in the top five, maybe ten. People don\u2019t want to wait for too long for things to happen online. <strong>When we use a search engine, we want to see the results as close to instantly as possible.<\/strong> We don\u2019t want to sift through loads of results to find what we need. And when we find what we were looking for, we want it to load in seconds.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>However, some of the things on your website can take a lot of time to load.<\/strong> You can remove some of them, but not all \u2013 there are useful elements and features that will slow down your website. <strong>Elements such as images, and features such as vibrant comment sections.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For those troublesome elements and features, you have to find a method to lessen their impact on your website\u2019s loading speed.<strong> Ideally, that method shouldn\u2019t also lessen the benefits of having those features.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>That\u2019s exactly what lazy loading is.<\/strong> With it enabled, all these elements and features don\u2019t load when a visitor comes to your website. <strong>They load only when they scroll to them, usually, reducing that initial loading time.<\/strong> For WordPress comments, you\u2019ll want to use a plugin to enable lazy loading no matter which of the commenting systems \u2013 <a href=\"https:\/\/qodeinteractive.com\/magazine\/disqus-vs-facebook-comments\/\">native, Facebook, or Disqus<\/a> \u2013 you use.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lazy-load-wordpress-native-comments\"><\/a>How to Lazy Load WordPress Native Comments<\/h2>\n<p>[\/vc_column_text][vc_column_text]If native is your favorite flavor for WordPress comments, <strong>you\u2019ll find that lazy loading is a common feature in plugins you\u2019d use to tune and speed up your website.<\/strong> However, if you don\u2019t want to do that, and all you want is just to have the option to set lazy loading for your comments, <a href=\"https:\/\/wordpress.org\/plugins\/lazy-load-for-comments\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load for Comments<\/a> is just the plugin you need.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-for-Comments.jpg\" class=\"attachment-full size-full\" alt=\"Lazy Load for Comments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-for-Comments.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-for-Comments-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-for-Comments-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Install it using your preferred way to install plugins. Once you\u2019ve installed and activated it, find your way to <em><strong>Settings &gt; Discussion<\/strong><\/em>. Scroll down until you find the newly added Lazy Load Comments options. <strong>Select between \u201cOn Scroll\u201d, \u201cOn Click\u201d, and \u201cNo Lazy Load\u201d.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-Comments-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Lazy Load Comments Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-Comments-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-Comments-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Load-Comments-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>That\u2019s all you get from the plugin.<\/strong> A no-frills dropdown menu with three options. But then again, it\u2019s all you need to enable lazy loading with native WordPress comments.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lazy-load-facebook-comments\"><\/a>How to Lazy Load Facebook Comments<\/h2>\n<p>[\/vc_column_text][vc_column_text]Why use two plugins when you can find one that does two things? <strong>You\u2019ll need a plugin to add Facebook comments to your website<\/strong>, so why not use one that already comes with lazy loading, such as <a href=\"https:\/\/wordpress.org\/plugins\/lazy-facebook-comments\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Social Comments<\/a>?[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Social-Comments.jpg\" class=\"attachment-full size-full\" alt=\"Lazy Social Comments\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Social-Comments.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Social-Comments-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Social-Comments-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019ve installed and activated the plugin, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/adding-facebook-comments-to-wordpress\/\">added Facebook comments to your WordPress website<\/a>, you should navigate to<em><strong> Settings &gt; Lazy FB Comments<\/strong><\/em>. Scroll down until you find the Load Comments option \u2013 <strong>it will let you choose between on scroll and on click.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Comments-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Lazy Comments Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Comments-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Comments-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Lazy-Comments-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]There are a few other things you can set up here, too, such as how the comments are sorted and how many of them are shown by default. [\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"lazy-load-disqus-comments\"><\/a>How to Lazy Load Disqus Comments<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you\u2019re using Disqus as your <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-disqus-to-wordpress\/\">WordPress website\u2019s commenting system<\/a> and you haven\u2019t taken care of lazy loading during the installation, you\u2019ve made a big mistake. <strong>This service, for all the good it does, is known for slowing down your website.<\/strong> That\u2019s why it\u2019s recommended that you install the <a href=\"https:\/\/wordpress.org\/plugins\/disqus-conditional-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Disqus Conditional Load<\/a>, a type of Disqus that comes with lazy loading.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load.jpg\" class=\"attachment-full size-full\" alt=\"Disqus Conditional Load\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can handle the installation like any regular plugin, using it to connect Disqus and your website. Either way, you need to connect your website to Disqus to be able to mess around the plugin. You\u2019ll find its options under <em><strong>Discuss &gt; DCL Settings<\/strong><\/em>, and the \u201cHow to Load Disqus\u201d option will be the topmost on the page. <strong>You can choose between on scroll, on slick, regular, and the on scroll start option if you have a paid version of the plugin.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Disqus Conditional Load Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Disqus-Conditional-Load-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The plugin will give you access to myriad other options. <strong>You can set a custom loading message, for example, and custom button text for the on-click lazy load option.<\/strong> If you decide to use the paid version of the plugin, you\u2019ll get access to a Disqus comments widget, and many other cosmetic and functional options.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]Comments might be a nuisance, a little troublesome, or a spam-infested nightmare festering with the worst things that can ooze out of humanity. It\u2019s up to you and your moderating style to choose what you want to make of them.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But if comments do little for you apart from slowing down your website, don\u2019t worry. With WordPress, you\u2019re often only a plugin away from a solution to most problems, and this is not an exception. Lazy loading WordPress comments is a great way to reduce their impact on your website\u2019s loading speeds, regardless of the commenting system you\u2019re using.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Need to lazy load comments on a WordPress website? It&#8217;s a piece of cake, as long as you know what plugins to use. We&#8217;ll show you the top picks.<\/p>\n","protected":false},"author":9295,"featured_media":17319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-17136","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=17136"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/17136\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/17319"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=17136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=17136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=17136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}