Using Discourse as commenting system via JavaScript: Delay load or load on scroll

Product Support

AI-generated summary

Using Discourse as commenting system via JavaScript: Delay load or load on scroll

The discussion revolves around optimizing the load time of the Discourse commenting system, which is impacting page load time due to image uploads by users. Jane_Jojo is looking for a way to load the commenting system only on scroll, rather than on page load.

Janes_Jojo provides the code used to embed the commenting system and wonders if attaching the script to the onscroll event is the right approach. rootsh3ll suggests using a “lazy load” plugin, but Jane_Jojo explains that this won’t affect the commenting system, which is in an IFRAME, and also mentions that lazy loading had previously negatively impacted her blog’s SEO.

Jesus2099 points to a Discourse lazy load feature, but Jane_Jojo is skeptical due to past experiences with Google’s crawling behavior. rootsh3ll concludes that a lazy loading option within the Discourse comments plugin itself is needed to address the issue.

1

As mentioned above, I use discourse as the commenting system and here’s an example

Quite a few users upload images to the comments and the JS itself is impacting the load time.

Is there a way I can load the commenting system only on scroll? Which if you think about it makes sense – you need to load it only on user intent – when to read comments.

Edit

This is the code I use

<div id="comments" class="ct-post-end-section">
	<div id='discourse-comments'></div>
	<script type="text/javascript">
	  DiscourseEmbed = { discourseUrl: 'https://comments.alittlebitofspice.com/',
                     discourseEmbedUrl: '<?php echo get_permalink(); ?>' };
	  (function() {
	    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
	    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
	    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
	  })();
	</script>
</div><!-- #comments -->

Wonder if it’s the right approach to attach the script to onscroll? Although I understand complexities between repeated scroll events firing.

2

Look for a plugin named “lazy load” on your blog. that’ll only load images when it actually enters the viewport of the reader.

3

I don’t do lady load on the blog posts due to SEO reasons. Hit me hard some time back. Nevertheless, a lazy load plugin is not going to do anything to the commenting system (which is in an IFRAME).

4

Right. an iframe won’t be affected by lazy load. my bad. maybe developers can help you out.

But I don’t get this. How lazy load affected SEO?

Crawlers look for HTML code and tags. images load only after entering the viewport, but the code is always available after first load.

5

That Discourse lazy load might be more relevant:
https://meta.discourse.org/t/lazyload-images/90472?u=jesus2099

6

In theory what you are saying is right. But Google works in mysterious ways.

7

I don’t think that’d help on the blog as well.

There needs to be a lazy loading option within the discourse comments plugin itself, if that’s what she is asking for