8 ms·
Making Instagram.com faster: Part 3 – cache first
- williamscales 7y agoThe trick of properly applying operations to cached posts is cool. But the overall experience is bad. It's so frustrating to see an interesting post appear for a fraction of a second and then disappear. It would be far more usable to simply focus on getting fresh data as quickly as possible.
- raiyu 7y agoThat was a common complaint but the newest version doesn't do that anymore. Instead of immediately loading the new content, you instead get a little hover button at the top of the feed that says New Posts - that you now click to load the new content. Because the old system was indeed super annoying, seeing something cool and then having it disappear in a long feed was annoying beyond belief. It's a small change with the hover button, but one that is definitely a huge improvement. Sometimes the biggest UX changes are super minor - but their impact on a user's experience is massive.
- nullandvoid 7y agoThe same thing annoys me with youtube - notice something cool as you click something on the home page but then by the time you've clicked something and gone back its disappeared
- FakeComments 7y agoThis is made worse by the mobile experience of having every part of the page be some kind of button. 80% of my clicks are my palm grazing the edge as I hold it or trying to scroll and accidentally clicking on some block element link that doesn’t stand out as a button.
- kaycebasques 7y ago> However, as the product grew, a side effect was that our web performance began to slow. Over the last year we made a conscious effort to improve this. We’ve [1] been advocating strongly for using performance budgets [2] as a means of protecting hard-earned performance improvements. There’s some depressing stat around performance regressions... something like 25-50% of big sites regress in performance 6 months after a big push to optimize. Don’t quote me on the specific number, I believe it’s mentioned in [3]. [1]: Google Web DevRel [2]: https://web.dev/performance-budgets-101 https://web.dev/performance-budgets-101 [3]: https://youtu.be/YJGCZCaIZkQ https://youtu.be/YJGCZCaIZkQ
- arciini 7y agoIn my experience, this cycle of "add features and performance regresses" and "fix performance" is actually not a bad way to do it, because it allows for better overall budgeting. If you're constantly ensuring that performance doesn't regress, this makes certain features a lot harder to implement. In some cases, the better solution is not to "make this feature take a lot less of the budget", but to say, "are there other parts of the budget that are easier to cut than the current feature". Having regular performance optimization sprints allows for us to "cut where it's easiest" rather than forcing us to restrict non-performant features, when they might be very useful for the business.
- uluyol 7y agoMonitoring is key here. The point is that sacrificing performance should be a conscious decision not an accidental one. Small fixes can sometimes prevent big regressions from ever occurring.
- hinkley 7y agoAll problems can be solved by adding a layer of abstraction. Performance is improved by removing a layer of abstraction. Lather, rinse, repeat.
- mrsharpoblunto 7y agoYeah, without constant focus on perf, things regress extremely quickly. We're building tight integration with perf budgets into our infra & dev workflows across both Instagram and Facebook, so that any perf regressions will be intentional tradeoffs with product experience rather than unfortunate accidents :)
- mfontani 7y ago> we immediately present users with a cached copy of their previous feed and stories tray, and then replace it with fresh data once it’s available I vehemently HATE this pattern. I'm on a slow connection, and I open the app. Yay, I see some (cached) content. I start reading. After a random amount of time EVERYTHING CHANGES, and I can't get back to it. It's gone, for all intents and purposes, forever. I'd love to have a something which tells me there's fresh content to be had, and that I could - if and when I so wanted - CHOOSE to see it.
- jarjoura 7y agoI'm pretty sure if you touch the feed at all, or it detects you haven't seen the content before it'll put a button there that won't move you to the top of the feed until you tap on it for that very reason.
- code_duck 7y agoYou have to scroll past the first post.
- Andrex 7y agoThe Google Feed on Android phones does something similar but presents a "Refresh Feed" "pill" button when it detects that there's fresher content to pull. Surprised Instagram doesn't do this.
- deleted 7y ago[deleted]
- manigandham 7y agoSimilar to Twitter and other social apps. Agreed that it's a very annoying experience.
- zaroth 7y agoThe worst possible implementation of the “Loading” screen. It’s like Flash of Unstyled Content, but instead it’s Flash of Useless Content Killed. Or something with a similarly appropriate acronym.
- opencl 7y agoI wonder if they're ever going to bring the web version anywhere close to feature parity with the apps, or update the UWP app that's been abandoned for years.
- holler 7y agoI could see that being a problem for facebook.com as people would likely choose one vs the other.
- mrsharpoblunto 7y agoYou're probably talking about the desktop web version I assume. If you check out the mobile web version its actually pretty close features wise, theres direct messaging, stories, creation with webgl filters,etc. The desktop version of these is admittedly lagging behind though - but I'm optimistic that desktop will get some more love in future :)
- opencl 7y agoOh wow, changing the user agent to load the mobile website on desktop does indeed make it a whole lot better. I'm less optimistic about the desktop version since the uselessness of it seems very much intentional but oh well.
- driverdan 7y agoIt's 2019, there shouldn't be separate desktop and mobile websites.
- zelly 7y agoMaking web UIs is excruciating compared to mobile (where everything is designed to be as easy as possible for you) so I don't blame them. Their main userbase doesn't use laptop/desktop computers anyway. This is the trend now, where the website is just an ad to download the app.
- opencl 7y agoThe mobile web version and apps appear to use nearly the exact same react/react native codebase. I'm mostly just confused as to why the desktop web version is completely different (and much worse because they removed almost all the features) than the mobile web version.
- hwj 7y agoBeware, cache invalidation is one of the hard problems in computer science. ;)
- purple_ducks 7y agoDoes anybody from instagram actually use instagram.com? Because the comments side panel on pictures is probably the buggiest implementation of _anything_ i've ever seen.
- mrsharpoblunto 7y agoCan't reveal the exact numbers, but yeah - a lot of people use IG on web :) Mobile web was always the big focus for us though - most people assume its just a desktop only web version, but actually the mobile web version is much more fully featured than the desktop version.
- sincerely 7y agoSince you're here, can I ask - is it intentional, when using IG on the web, if I click on a photo on someone's profile page, the comment section is auto-scrolled to the bottom instead of showing the description?
- austinhutch 7y agoas a heavy desktop IG web user, this is a weird UX thing that bugs the crap out of me
- sincerely 7y agoI'm glad it's not just me!
- ISL 7y agoYep. So strange. Chromium 76.0.3809.100 on linux.
- purple_ducks 7y agoI'm specifically asking about instagram staff because desktop instagram.com is embarrassingly buggy when it comes to basic core functionality such as the initial display of comments, and loading more comments using the plus symbol.
- deleted 7y ago[deleted]
- throwaway_bad 7y agoThis looks like a pretty naive solution. The more elegant way to do optimistic UI would be to use CRDT or OT. Usually syncing is talked about in the context of syncing multiple clients. Here, we just want to sync the cached offline state with the server state. This allows you to make arbitrary changes to your offline state even if your server has conflicting changes incoming, it will all be eventually consistent in the end. I would love to see a blog post about that! (the only way I know how to implement it cleanly is using pouchdb)
- thijsvandien 7y agoCRDT: Conflict-free Replicated Data Type OT: Operational Transform
- pmlnr 7y ago> in part 2 we talked about improving performance by pushing data directly to the client rather than waiting for the client to request the data I firmly believe this should never, ever be done. This is the very reason I swapped to linux from windows xp many years ago: there was no way to tell the computer not to do anything unless I ask for it.
- PavlovsCat 7y agoBut when users get empowered they get ideas, and they lose the appetite for slop, and then the sky falls.
- mrsharpoblunto 7y agoWell you're loading the main feed page of instagram, you expect your feed photos to show right? We don't push random junk - its the content that the page needs to render something useful
- wolco 7y agoInstagram engineering, Why can't search handle two keywords?