Posted on February 18, 2010 by aninfidel
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.
- Browsers have trouble caching the file because it contains dynamic data that changes frequently.
- We cannot use Content Delivery Networks (CDN) to serve the file because it has to be re-generated on every request.
- We cannot minify our code since the actual process is too slow to run it every time a client makes a request.
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)
Example of our code loading asynchronously with other files from Tumblr, Google Analytics and Quantcast.
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).
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!
Update: Thanks for the reports about missing support for custom CSS. We have fixed the issue and will update shortly.
We welcome relevant, respectful comments. Please read our Community Guidelines before commenting.