What tech choices make “new” Reddit so unbearably slow?
I never visited Reddit much, but occasionally web searches take me there for tech support questions. Every time I visit in the past year or so I'm shocked at how slow the interface is, and don't even understand how its possible to make web sites so unresponsive to user input. It's as bad as visiting a local news site that is laden with ads and several auto-playing videos, but it doesn't seem to be running that much ad content.
How does one make such a bad web app, and what technology choices should I avoid to make sure I don't end up with a mess like this?
The user experience on mobile is hilariously bad.
1. Google search turns up a reddit result.
2. Click link to AMP page.
3. Scroll to read comments and click another link to open real reddit to view all comments.
4. Get to real reddit domain and watch a long loading screen.
5. Click away 2 notifications saying you should use mobile app.
6. To read a child comment, click again to read below. Page reloads above the parent comment causing you to search the page again to see child comment.
Absolutely ridiculous but still I do this because most Google results are SEO garbage. Google disabled conversation only search. Reddit is unfortunately still the best way to get a real person's view on a topic that most likely not an ad.
Just like with digg, we need a new reddit.
Here's roughly the latest architecture from QCon 2017 [1][2]. Overall it's because of a bloated React frontend even though there's little to no reactivity on most pages. It could all be replaced with some standard JS and CSS animations. Too many API calls pulling too much data for what's being shown and firing serially as components are loaded instead of getting it in batches for the entire page.
The site lacks basic optimizations like virtual scrolling to keep the browser from crashing after a few pages of content. There are also entire npm packages being pulled in instead of any tree-shaking, or browser-specific polyfills.
The backend is cached by cassandra even though content is highly static and DB servers are fast enough for their denormalized and partitioned schemas. It's basically just a few tables used as key/value for each entity type represented on the site.
1. https://www.youtube.com/watch?v=nUcO7n4hek4
2. https://www.infoq.com/presentations/reddit-architecture-evol...
It seems that the content isn't included in the HTML in the page. Instead, the HTML loads some JS in a second network request. That JS is compiled and run, and makes a third network request to fetch the content.
Using server-side rendering might help get the initial page loaded faster.
The endpoints themselves also seem to be very slow. I clocked a page taking 800ms to just return the bare html (vs. about 90 ms for hacker news).
New Reddit is horrific. If they ever get rid of old reddit it will cure me of my reddit addiction for good.
I'd bet this has less to do with developer incompetence or frameworks and more with the Peter principle(maybe even the Dilbert principle) inevitably causing orgs to be run by boobs who hand wave about features and redesigns under ridiculous timelines.
I can just picture the board meetings where some poor soul did a presentation of the "new reddit", and one of the bozos saying "That's great, but how will users know that we have a mobile app? Can you add a banner to annoy them into using the app that they don't need? There's a company that promises the greatest analytics in the world ever. You can add their tracking pixel, right? We were wondering about tracking the user's mouse movements. You can do that, right? We hear that JavaScript is the big thing right now. Are you sure we have enough of it?"
DEVELOPER: Sigh.
I just visited a SubReddit, turned off all my anti-tracking and adblock extensions and compared:
Old Reddit:
51 requests
3.87 MB / 1.14 MB transferred
Finish: 4.83 s
DOMContentLoaded: 1.96 s
load: 3.69 s
New Reddit:
185 requests
13.70 MB / 7.44 MB transferred
Finish: 12.99 s
DOMContentLoaded: 2.38 s
load: 7.80 s
Key Takeaways:
Use less Requests. Every request can fail, or have latency too it which can slow down pageload in general.
Use less JavaScript, while necessary for some stuff it can easily bloat your website.
Also, don't load shitloads of CSS, keep it simple.
Think about fonts, do you really need several of those from external servers or do system fonts and defaults do a good enough job?
Honestly reddit needs to fire their entire product, ui/ux, and front end teams. The recent decisions made by all of them have made me avoid reddit like the plague and fill me full or range when I even do attempt to use it.
More general tangential question: How come, just as when google is saying that every website is mobile-first now, the SPA frameworks have become so popular? The tons of JS and HTTP requests they require are clearly ill-suited for someone browsing in their phone in a subway. How did that happen?
On my MBP from 2014 the website is basically unusable, so the only time I actually use Reddit is via a third party iOS app that I can only recommend: https://apolloapp.io
It could have to do with all the tracking the new reddit does. Just open the network tab and see it firing off network requests as you move the mouse.
Design by committee that goes against the initial spirit of the site in hopes of increasing monetization in spite of user grievances. It's a race to the bottom and they simply want to get as much money out of the site as possible at the expense of user experience because someone, or some people, decided the cost (user experience) was worth the benefit (monetization).
I want a new internet.
I have a feeling they will completely remove old.reddit in 2020, citing fake security risks and there will be a medium sized digg like exodus
Even more tragic is seeing what has happened with the imgur-reddit situation. Tapping on an image in the reddit iOS app takes literally 4 or 5 seconds to display.
Above is profilers of the 2 apps.
There's a MASSIVE amount of JS that has to start and run. Note 1.2s of scripting for full load on old, with 4.6s of scripting on new. Rendering also triples in size because they're using a lot more CSS.
Note also that the "rich" sidebars in themselves have an extremely long load time and pop in.
They do this because they made bad technological decisions, and took an off the shelf low-content SPA-style framework to make what is mostly a static site. Its also quite likely that they haven't done much tuning. They probably were tasked with making widgets and new features over anything having to do with performance, and especially the ad delivery network.
It fails constantly in Firefox Android as well. Very common that a page just gets stuck on the loader and never renders any content. I find it fails less often in Chrome. Maybe they develop and test on chrome and ship it!
I think a lot of the issues stem from focusing on the mobile app, and not prioritizing performance of the web app (or possibly, deprioritizing the web app and expecting users to migrate to the mobile app).
I.E. I'd guess it's a business focus issue, not specifically the tech stack used.
I'm just grateful that old.reddit.com is still live! I also dread the day they decide to shut it.
Unless it's performing better for session length or something, my question is how did something with significantly worse load time get past beta?
Clearly the rewriting of the entire site, the old site loads so nicely.
I never really thought reddit would degrade in performance like this, I immediately went back to old.reddit.com and went on with my life. I still don't get why every rewrite of a website I've ever used almost always ends up being ridiculously bloated.
SPA and all those javascript libs
Add an extension or user-script that turns all "www.reddit.com/" links on your web pages to "old.reddit.com/". The old reddit is the one used by most nerds and those who initially joined reddit for its spirit.
If you don't want to add the extension, you can also visit the preferences section and there is also an option called "Make new reddit experience the default" which you need to untick. Try it and see for yourself!
I really don't see it - can you give an example? I just tried the homepage and first few links on reddit.com and old.reddit.com.
What do you see?
By the way, isn't there an open-source desktop-native client for reading (and searching through) Reddit?
How to use reddit in 2019: put "old." before every url... (e.g. https://old.reddit.com/r/all), you get the good old version that works fine IMO...
Maybe the same things that google mail used to "enhance" their site
The new website is so bad I just stopped going to reddit.com, or commenting
I haven't specifically looked into it, but 10+ years of optimization went into the old reddit, and a lot of that was at a time when LTE and HTTP2 didn't exist.
Roughly only 20% of the top comments (excluding mine) try to address the question OP asked. 80% is mostly venting about the new UI.
Reddit has always been a steam hot pile. At least they now managed to get their servers to be overloaded monthly rather than daily
They're using Python and webpack. Not sure what they were using before and unsure if Python is really dragging them down, but I like their design (although watching videos on mobile and going through posts on desktop is extremely gimmicky and buggy).