In my spare time I work on a product called JustComments which offers a commenting system. As a user, you need to create an account and copy-paste two HTML tags to your website to have a fully working comment system available to the visitors of your site.

Here is how an integration code looks:

<div class="just-comments" data-apikey="..."></div>
<script async src="https://just-comments.com/w.js"></script>

At first, I had the entire comment system in that w.js file. Soon I noticed that I pay a lot for serving this file via a CDN and that the number of downloads of w.js is much higher than the actual number of users of the system. It matters because JustComments is a pay-as-you-go system which charges users for the number of requests made to fetch comments. The system’s code was already optimized to skip these costly requests if the user never scrolls to the comment box. But the entire comment system was getting loaded anyway.

If you look closer into where the comment boxes usually are on a page, you see that it’s after the main content in 99.9% of the cases. Sometimes it’s even hidden behind an extra button which a user needs to press to see comments.

So I decided to adjust the architecture of the system to reflect the actual usage pattern better and to bring the following benefits:

1. The client browsers download much less data if the user never opens comments saving the bandwidth (especially crucial for mobile clients).
2. The cost of running the service drops. Only users who would interact with the comment widget download the complete source code.

So I achieve that with the following architecture:

1. The browser loads w.js.
2. w.js finds the container for JustComments and figures out which language the system should use.
3. If the container is already visible to the user, w.js loads core.[lang].js. Which, in turn, renders the widget and loads the comments.
4. if the container is not visible to the user, w.js schedules the loading of core.[lang].js as soon as it becomes visible.

Additionally, w.js checks if the page loads as a result of an authentication redirect or if the page URL contains a link to a specific comment in the page. In the latter case, w.js will scroll to the comment box automatically to make the comments visible. Once the comments appear, the targeted comment will be highlighted.

This way of loading the system gives an additional advantage. The w.js script which is a simple loader now can be cached more efficiently because it does not change as often as the core of the system.

So the results. When you open a page with JustComments, you load extra 2.7 KB compared to a website without JustComments. If you scroll down till the comment section, the system will fetch additional 19 KB of JS. In total, it makes only 21.7 KB of data.

Perhaps this is not as low as you would expect. Well ¯\_(ツ)_/¯. My goal is to try to reduce this amount by writing more modern JS, leveraging the platform and optimizing the code.

By the way, the source code of the frontend for JustComments is now open source https://github.com/JustComments/widget. Feel free to contribute! Also, if you have comments, use the comment box below. It’s powered by JustComments ;-)