maksverver / astral-codex-eleven

A Chrome browser extension to speed up loading of posts on https://www.astralcodexten.com/ by replacing the comments widget.
MIT License
3 stars 2 forks source link

Astral Codex Eleven

Astral Codex Eleven is a browser extension for Chrome and Firefox that speeds up Scott Alexander's blog Astral Codex Ten (ACX) by reimplementing the comment section.

It also adds some quality-of-life improvements:

Installation

Chrome extension: https://chromewebstore.google.com/detail/astral-codex-eleven/lmdipmgaknhfbndeaibopjnlckgghemn

Firefox add-on: https://addons.mozilla.org/firefox/addon/astral-codex-eleven/

Background

ACX is hosted on blogging platform Substack. Substack blogs contain a lot of Javascript that makes loading pages relatively slow, but what really kills performance for ACX is the comment section under each post.

Unlike most Substack blogs, comments on ACX posts are loaded all at once, and since ACX is very popular (the most popular posts have over 2,000 comments), some pages can take several minutes (!) to load on some devices.

Example of a very slow post with over 2500 comments: Ivermectin: Much More Than You Wanted To Know.

Mode of operation

This extension speeds up page load by rewriting the comments section. It works as follows:

  1. Prevent the Substack scripts from loading the JSON comments (see: filter-rules.json and filter-rules.txt). Blocking access only to this file allows the other scripts to work normally, while preventing the comments to be populated in the normal way, which we know is slow.

  2. Hide the now-useless Substack comments widget, which would otherwise show no comments.

  3. Add a manually reimplemented comments widget. I didn't do anything too clever to make this especially fast; I just materialized the entire DOM tree from the comments JSON file. This seems fast enough even for posts with many comments.

Performance could be improved further by only populating part of the DOM tree and adding links to "load more comments" on demand, but I'm not sure it's worth the effort. This also has downsides, like requiring more user action to view all comments, and making it more difficult to search through all comments.

Limitations

Alternatives

Local development

Running tests

Tests require Node.js to be installed. Run them with:

make test

Manually testing the comments widget

Manual testing of the comments widget is facilitated by demo.html.

To use it, a set of comments in JSON format must be downloaded first. For example, to download the (large) set of comments from the post “Ivermectin: Much More Than You Wanted To Know”, run:

% curl -o demo/ivermectin-comments.json 'https://www.astralcodexten.com/api/v1/post/43667275/comments?token=&all_comments=true&sort=oldest_first&last_comment_at'

Or download a smaller set of comments for faster loading. You can find the post id by opening a blog post and evaluating _preloads.post.id, or by logging the network request made.

To view the comments, open demo.html in a browser and select the downloaded json file.

The demo page looks very ugly, but the functionality should be comparable to the live extension. Note that the demo only covers the comments widget (ext-comments.js), not the main extension code (astral-codex-eleven.js, main-script.js), so the demo is not a complete substitute for live testing.