
Making Instagram.com faster: Part 3 – cache first - stablemap
https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669
======
kaycebasques
> 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
In 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
Monitoring 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.

------
williamscales
The 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
That 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.

~~~
ron0c
I was looking to make williamscales's very complaint as soon as I read this.
Instagram's latest beta for Android 10 does not include this hover button.

Maybe iOS only for now.

~~~
raiyu
I'm using iOS and started seeing it pop up like 2-3 weeks ago.

------
mfontani
> 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.

~~~
mrsharpoblunto
(Author here) To clarify, we don't actually replace it automatically - we show
a pill notification that new stories are available. You can either choose to
tap it and see the new feed, or ignore it and continue with what you were
doing

~~~
ceejayoz
I have definitely had the "the thing I was looking at right after the app
opened disappeared after a few seconds and I can't find it again" experience
/u/mfontani describes.

~~~
mrsharpoblunto
Might have been an earlier version we were testing before we built out the new
posts pill, this feature went through several iterations.

~~~
turdnagel
I just loaded Instagram and it did this. It’s probably not something you see
because you open the app multiple times a day. You definitely run into it when
you only open the app a few times a week.

~~~
mambodog
This article is about the instagram.com website, not the mobile app. Are you
talking about the website or the mobile app?

~~~
JeanSebTr
Why should it be different?

Great for the web team if they are doing a better job than the mobile team I
guess.

------
opencl
I 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.

~~~
mrsharpoblunto
You'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
Oh 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.

------
purple_ducks
Does 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
Can'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
Since 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
as a heavy desktop IG web user, this is a weird UX thing that bugs the crap
out of me

~~~
sincerely
I'm glad it's not just me!

------
throwaway_bad
This 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
CRDT: Conflict-free Replicated Data Type OT: Operational Transform

------
wolco
Instagram engineering,

Why can't search handle two keywords?

------
hwj
Beware, cache invalidation is one of the hard problems in computer science. ;)

------
pmlnr
> 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.

~~~
mrsharpoblunto
Well 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

