Lazy load / async load Disqus libraries for better performance

Created on 29 March 2012, about 12 years ago
Updated 1 April 2023, about 1 year ago

Is there any possibly way to get Disqus to be lazy loaded in Drupal? Similar to this: http://www.myatus.com/2011/03/20/lazy-loading-disqus-in-wordpress/

I noticed that sites such as engadget are now lazyloading Disqus. Would be a great feature to have.

Proposed solution

* Allow admin to choose if Disqus should be lazy-loaded
* There can be 2 types of lazy-loading: on scroll and on click
* Lazy loading on scroll implies that Disqus is loaded when the user scrolls the disqus thread into view
** Preferably use IntersectionObserver API for better performance
** All JS from Disqus is not very performance-optimized, so at least we do our part
* Lazy loading on click implies that there will be a button showing the number of comments available โ€“ when clicked, the Disqus widget will be displayed

โœจ Feature request
Status

RTBC

Version

2.0

Component

Code

Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States BogenDorpher

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany IT-Cru Munich

    Patch #46 worked so far for me, but I see some possible improvements we could maybe also integrate.

    Split disqus.js and disqus.settings.js in to different libraries definitions, because disqus.settings.js seems to be only required for Drupal's Disqus settings form.
    Switch from var to let/const syntax in all JS files.
    Try to remove jQuery once and if possible also jQuery dependency from disqus.js to avoid extra loading of jQuery.
    Simplify all if (settings.disqus.language || false) { to if (settings.disqus.language) {.
    For better readability add extra lines between each libraries definition in disqus.libraries.yml file.
    It seems var disqus_lazy_load = 0; is never used.

    @ckng: what do you think about possible improvements?

    I've also linked related issue where already in the past some work was done to remove jQuery from disqus.js.

  • ๐Ÿ‡จ๐Ÿ‡ฆCanada jigarius Montrรฉal

    @ IT-Cru IMHO if we have some improvement which is ready to be merged, we should include that as it is for now. I say so because this issue has been open for a long time now. Every time there is a working patch, some other thing changes in the module which makes the patch become stale. So, if we have it working this time, we should merge what we have so that we at least remove of the jQuery dependency. Later, we can create another PR to separate the admin JS from the user-facing JS.

    What do you think?

  • ๐Ÿ‡ฉ๐Ÿ‡ชGermany IT-Cru Munich

    @jigarius: Complete fine for me. This is why I'm not switched it back to needs work and only mentioned possible additional improvements I see for near future fixing issues. It also make it easier when it is merged and rebase existing MRs like added linked issue which already remove usage of jQuery.

    Better to split other improvements into small tasks which could be easier tested :)

Production build 0.69.0 2024