Hello. I am Anton Kovalyov, I work as a software engineer here at Disqus and this blog post is about one project I was working on. It extracts all the static parts out of our embeddable code which makes our widget much faster than it is now. We are still testing this update but you already can try it out. For more details on the project and how to enable it for your website, continue reading.

It has been a little more than two years since Disqus was launched and today we have hundreds of thousands websites and millions of commenters using the service. During this time, we were constantly upgrading our infrastructure to handle this growth. But eventually we arrived at the point in which we had to revisit our initial approach to serving our client-side JavaScript code.

First, let me tell you about how Disqus is loaded today. When you visit a page with Disqus embedded, the browser makes a request to one of our servers. We respond by generating and sending one big JavaScript file that is then used to render and display a comment thread. Although this approach has served us, it has many serious disadvantages:

  1. Browsers have trouble caching the file because it contains dynamic data that changes frequently.
  2. We cannot use Content Delivery Networks (CDN) to serve the file because it has to be re-generated on every request.
  3. We cannot minify our code since the actual process is too slow to run it every time a client makes a request.

Fortunately, our JavaScript code can be split into two parts: dynamic and static. The dynamic part depends on the environment (e.g. current comment thread, website, user), while the static part is completely independent of the environment. My project was to extract as much static code as possible and refactor that so we can move a minified version to our CDN. And today I am happy to announce that we are starting to roll out this update to our users.

While working on this project, I split the static part into lighter chunks and re-wrote our code loader so that it now loads most of our files asynchronously. That means that your browser will be able to load multiple files at the same time and Disqus will no longer block other files used on a page from loading.

This is especially important if you have others widgets on your page. Nothing will be waiting on Disqus to load, even if Disqus is slow to respond, and the web page will load quicker.

(A side note about asynchronous loading: you can go even further and add the HTML5 "async" attribute to our script tag as described here) 

After the files are loaded (collectively, the static pieces of the embedded code), the browser will cache most of them and retrieve them from your browser cache the next time you visit any page with Disqus Comments. This change alone makes Disqus more than twice as fast as our current version!

All of our static files are now served from CDN which means that we have a bunch of copies across the web and users will access a copy nearest to them, geographically, instead of always hitting our central servers (this makes Disqus faster for you and easier on us).

Now let me describe how the new and improved loading works. When a browser sends a request in order to download Disqus code, Disqus responds by sending a small JavaScript: initial loader. This loader determines necessary parameters and checks if website owner requested for any customizations using special JavaScript variables. It also loads a small CSS file with website-specific styling rules (loading this file before commenting thread is rendered will save a lot of processing time later).

When it finishes making initial preparations, it retrieves our main thread loader. This loader contains all the website-, thread- and user-specific information, translations strings (if the set language is not the default English) and so on. It also checks which files this particular thread will need and tells the browser to asynchronously load them. Then, since we already have everything we need to proceed, it generates HTML and displays the comment thread.

This is a very big update to the most critical part of Disqus and we certainly don't want this to cause you any problems. For that reason, this has only been live on a few selected sites. We expect to switch everybody sometime next week (websites owners won't need to do anything, the update will happen automagically).

Are you an early adopter? If you want to try this update immediately, you can go to your website's Disqus settings and enable early adopter features (the button will be in the Advanced section, see screenshot below). In the future, we will be releasing new features to early adopters before everybody else gets access to them. 

Although this is a pretty big update, it is just the first step in making Disqus even faster and more responsive for all our users. Stay tuned!

-Anton

Update: Thanks for the reports about missing support for custom CSS. We have fixed the issue and will update shortly.