Disclaimer: we do not work for any of these companies (as of the date publishing this post), so the findings here are based purely on reverse engineering.
The Mixpanel Way
Integrating with Mixpanel
To integrate with Mixpanel the very first step you have to do is include the following snippet in your HTML's
After this you can use the full power of the library - but what happens behind the curtains? This tiny include snippet only does the following:
- when inserted into the page it automatically starts downloading the full mixpanel library
mixpanel.initputs placeholder methods on the global mixpanel object - this will store any commands until the full is not loaded
- when the full library is downloaded then it overwrites the methods on the global
mixpanelobject and processes any commands that may be in the queue
Size, cache policy
The full mixpanel library is only 16.2K - so far so good. Check.
Regarding the distribution: Mixpanel uses Akamai as their CDN provider. Check.
Mixpanel sets the
Cache-Control:public, max-age=3600 header on their library. This tells the browser to keep the current version for 3600 seconds (1 hour) then download it again. This, combined with the 16K in size can have a huge impact on both their Akamai bills and the users bandwidth usage (no, not in a good way).
Things to improve at MixPanel
- To improve the cache policy and enable infinite caching of the main library Mixpanel should split the main file into two separate files, like outlined in the previous article's Distributing section.
The Disqus Way
Disqus is a great tool for connecting the audience of a website or blog and start a discussion on each content. Unlike Mixpanel, Disqus has to take care of a user interface as well.
Integrating Disqus is pretty straightforward:
Let's take a closer look!
The mechanisms behind Disqus
embed.js file is what the small include snippet will require - this is relatively small, and has a very short cache lifetime set: 300 seconds. This file contains some basic configuration, like the version of Disqus you are using. This information is then used to fetch more resources the application needs. This setup works really great, as only the
embed.js has to have a small cache period set, other resources can be cached for a really long period of time.
For configuration management they are using a
config.js file which is cached for a very short amount of time to enable rapid changes in the configuration. This file contains settings on how Disqus will appear - but not just that: it contains feature flips, and service discovery information as well.
Disqus not only loads static resources with
embed.js, but modules as well, staring with
lounge.load.js. For this, they are using AMD, which stands for Asynchronous Module Definition. The library that helps them is RequireJS. These modules are referenced with a unique version/commit tag, so they can be cached for eternity - if they want to roll out a new version only some configuration has to be updated, which will mean a new URI for the resource.
CSS and images files are handled in the very same way: they are versioned, and cached for a month. To send images to the client Disqus uses sprites to minimize the number of requests the client has to make.
A summarized overview of what is happening:
Things to improve
The Disqus team made an incredible job developing their product, hats off! The only thing I could come up with is that they include snippet leaks the
disqus_shortname variable into the global scope. A possible way to solve this:
UPDATE 1: Disqus uses their own "smart" file versioner, which can be found here: https://github.com/disqus/grunt-smartrev. Thanks!
Need help in developing your application?