Not sure if you noticed but half the #ThreadVerse is memes. They're not my thing but I enjoyed putting together the best meme consumption experience I could.
For a very small instance with only a couple of concurrent users a CDN might not make much difference. But if you take a look at your web server logs you’ll quickly notice that every post / like / vote triggers a storm of requests from other instances to yours, looking up lots of different things. It’s easy to imagine how quickly this would overwhelm an instance once it gets even a little busy.
One of the first web performance tools people reach for is to use a CDN, like Cloudflare. But how much difference will it make? In this video I show you my web server logs before and after and compare them.
The short answer is – before CDN: 720 requests. After CDN: 100 requests.
Usually just turning on a CDN with default settings will not help very much, you’ll need to configure some caching rules or settings. By watching your server logs for a while you’ll get a sense for what needs to be cached but check out mine for a starting point:
Beware of caching by URI Path because often fediverse software will return different data depending on the Accept header that the requester sets. For example, on PieFed and Lemmy instances a request by a web browser to /post/123 will return HTML to show the post to someone. But when that same URL is requested with the Accept: application/ld+json header set, the response will be an ActivityPub representation of the post! You don’t want people getting activitypub data in their browser and you don’t want to be serving HTML to other instances. Once you spot a URL you want to cache, use a tool like Postman to set the Accept header and make a fake ActivityPub request to your instance and see if you get back HTML or JSON.
Another problem that can happen is that often a response will vary depending on whether the viewer is logged in, or who is logged in. If you can figure out how to configure the CDN to pay attention to cookies or whatever headers are used for Authentication by your platform then you might be able to cache things like /post/*… I couldn’t.
The things I’ve chosen to cache by URI Path above are ones that I know don’t vary by HTTP header or by authentication.
Although we can’t use URI Path a lot of the time, we can cache ActivityPub requests by detecting the Accept: allocation/ld+json header:
https://join.piefed.social/wp-content/uploads/2024/02/caching_activity2-1024x811.pngThis will cache all ActivityPub requests, regardless of URL. People browsing the same URLs as those used by ActivityPub will be unaffected as their requests won’t have the special HTTP header. I used a short TTL to avoid serving stale data when someone quickly edits a post straight after creating it.
There seems to be a deep vein of optimization here which I’ve only just started to dig into. These changes have made a huge difference already and for now my instance is under very little load so I’ll leave it there for now…
Us sitting here with our fiber internet and recent model phones have it pretty good. But the “i” in iPhone stands for “inequality”. Most people in the world still have pretty bad internet and old/slow phones. For a platform to be widely adopted and to serve the needs of those who often miss out, it needs to be frugal in network and cpu usage.
Lemmy
Kbin
PieFed
Home page
4.5 MB
1.65 MB
700 KB – 930 KB
Viewing a post
360 KB
826 KB (varies)
29 KB
Home pages
Due to Lemmy’s javascript-heavy software architecture, visiting a Lemmy home page involves downloading . And this only gets you 20 posts! Also community thumbnails, even if displayed as a 22px by 22px icon are served directly from their home instances, unresized, which can often be multiple megabytes in size. The home page of lemmy.nz is currently weighing over 9 MB.
Kbin’s home page comes in at a respectable 1.65 MB due to relying less on JavaScript. However it is let down by not using loading=”lazy” on images so they all need to be loaded immediately and by generating post thumbnails that are twice as big as they need to be.
When viewing a post, we can assume various assets (CSS, JS and some images) are cached due to loading the home page first.
The picture looks similar when viewing a post, which is a bit surprising. One of the usual benefits of the JS-heavy SPA architecture used by Lemmy is that once all the ‘app’ is loaded into the browser, subsequent pages only involve a small API call. However, going to a page in Lemmy involves two API calls (one for the page and one for the comments) both of which return quite a bit of data. If you look at the ‘get the comments on this post’ JSON response you can see the developers have fallen into the classic SPA pitfall of “over-fetching“. They’re retrieving a whole haystack from the backend and then using JavaScript to find the needle they want, which involves transferring the haystack over the internet. Ideally the backend would find the needle and just send that to the frontend.
Kbin sends more data than it needs to when viewing a post, again because of not using loading=”lazy” which causes every profile picture of the commenters to be loaded at once. Making this simple fix would bring the weight down, from ~800 KB to around 50 KB.
PieFed only sends 10 KB – 30 KB to show a post, but it varies depending on the number and length of comments. This could be reduced even more by minifying the HTML response but with PieFed under active development I prefer the source to be as readable as possible to aid in debugging.
This is no accident. It is the result of choices made very early on in the development process, well before any code was written. These choices were made based on certain priorities and values which will continue to shape PieFed in the future as it grows. In a world where digital access remains unequal, prioritizing accessible and fast-loading websites isn’t just about technology; it’s a step towards a more inclusive and equitable society.
As of today, PieFed includes a ‘theme engine’ which makes it easier for people with low or no Python skills to change how PieFed looks and behaves.
Let’s start with the app/templates/themes directory in the PieFed codebase. In this directory there will be a sub-directory for each theme that is available. As of this writing there is only one, called ‘high_contrast’. If you want to make a new theme, copy the high_contrast directory and rename the copy to something 20 characters or less. Let’s pretend your theme is called ‘my_theme’.
Inside ‘high_contrast’ is high_contrast.json. This file contains a bit of information about the theme, to improve the user experience of choosing which theme to enable. Currently the only information in there is a user-friendly name for our theme but I might add more in future. In our new theme we to rename high_contrast.json to be the same as the directory containing it, or ‘my_theme.json’ in this case. Also change the user friendly name in the JSON to something like “My Theme”. Take care not to change the double quotes.
Also in the theme directory are two files: styles.css and scripts.js. You can remove the high_contrast CSS and put your own. high_contrast’s scripts.js is empty and is just a placeholder to encourage you to add your own JavaScript.
In PieFed on the main menu, go to Account -> Settings and check if your new theme is shown as an option in the Theme field. If not then you messed up the naming of the theme directory or theme.json file. The theme setting here will change the theme you use while browsing PieFed – to change it for everyone go to Admin -> Misc Settings and set the ‘Default theme’ option.
Editing styles.css and scripts.js will probably be enough for most people. But in addition to that you can copy any .html file from app/templates into your theme and that copy will be used instead of the default one. For example, the home page template is app/templates/index.html so if you copied it to app/templates/themes/my_theme/index.html then any edits you make to the copy will be used to render the home page in a different way than the stock PieFed theme would!
If you want to theme a template in a sub-directory, like app/templates/post/post.html then the correct place for your copy will be app/templates/themes/my_theme/post/post.html.
The .html templates are a mixture of HTML and a language similar to Python called Jinja2.
I very much look forward to seeing what people come up with!
Licensing
PieFed is licensed under the open source AGPL license and themes are considered derivative works. As a result, themes need to be licensed under the AGPL as well.
This means that anyone who distributes or shares their PieFed themes must do so under the terms of the AGPL, ensuring that the source code of the theme remains open and accessible to others. If you do not distribute or share the theme with others then you do not need to share the source code with the public.
Using the theme to serve a publicly-accessible PieFed instance is “distribution” so you need to be able to make the theme source code available to everyone, either as a downloadable file or a git repository. If you choose to send PieFed a PR of your theme it will be gratefully accepted.
Very often when encountering an open source codebase you are left on your own to figure it out. Documentation is often limited to installation / compilation instructions.
With the following video I am trying to ease the onboarding process for new developers. I assume you already know Python, HTML and CSS. I start with a brief introduction to Flask and then move on to how forms work, routes, database interaction, frontend, background tasks and more.
This video will compliment the written documentation (still to come – very soon!).
Wow the effects or the #reddit mess are definitely making themselves clear! #lemmy and #kbin (they call that section of the #fediverse#Threadverse right?) are represented inside the "Other projects" category and it occupied just a tiny percentage of the graph before, but look at it now! And the API changes didn't even got applied yet