Instagram reached 14 million users in just one year—with only 3 engineers on the team!

So how did they manage such explosive growth while keeping things stable?

They followed three key principles:

Tech Stack Overview

🖥 OS:
Ubuntu Linux 11.04 (“Natty Narwhal”) on Amazon EC2

🌐 Load Balancing:
Amazon’s Elastic Load Balancer, with 3 NGINX instances rotated based on health checks

🧠 Application Servers:

• Django (Python web framework)

• Gunicorn (WSGI server)

• Over 25 High-CPU Extra-Large EC2 instances

• Fabric used to deploy code across servers in parallel

🗄 Data Storage:

• PostgreSQL for user data and photo metadata

• Pgbouncer for connection pooling

• Amazon S3 to store photos

• CloudFront to serve them quickly

• Redis to map 300M photos to user IDs (under 5GB with clever hashing!)

• Memcached for general-purpose caching (6 instances)

🔔 Push Notifications & Async Tasks:

• pyapns for push notifications

• Gearman for background tasks like updating followers’ feeds

📈 Monitoring:

• Sentry for real-time Python error tracking

• Munin for application metrics

• Pingdom for external uptime monitoring

• PagerDuty for incident alerts

This wonder is made with help of
mask-image, transition and transform

.container:hover img:not(:hover) {
     filter: grayscale(1) blur(5px);
}

Power of :not, :has, :checked

Steps
1. Create text with desired font in figma.
2. Export and paste it as svg in code.
3. Animate the path

path {
    fill: transparent;
    stroke: white;
    stroke-width: 0.1;
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: text-animation 2s ease-in-out forwards;
}

- Pre-compression JavaScript Size
Instagram team found that post-compression size is more important that pre-compression. In parsing and execution in lowend devices and mobiles, the limiting factor is CPU rather than download speed. When they tested it, they found it to be true.

- Inline Requires
This means that rather than loading all the required modules up front, a module is only loaded the first time it's used.Instagram uses Metro bundler (used by React Native) to bundle frontend assets and enable inline requires. This reduces the amount of JavaScript that has to be executed initially, leading to better performance.
This method has caveats it can cause issues with modules that have side effects (e.g., logging during initialization). Instagram had to carefully blacklist certain files like runtime polyfills that needed immediate execution to prevent issues.
This change improved TTI(Time To Interactive) speed by 12% and display by 19%.

- Serving ES2017 Bundles to Modern Browsers
The use of ES2017+ syntax became more common as browser support improved. Instagram decided to serve two versions of their JavaScript​:
ES2017 - for modern browsers.
Legacy ES5 - for older browsers, transpiled back to ES5.

ES2017 version of code where 5.7% smaller and impoved page load speed by 3% in modern browser

To increase speed furthur more, the Instagram team implemented a cache-first rendering strategy.

This means when you open Instagram, it shows you a cached version of your feed immediately (even if it’s slightly old), and then updates it with fresh data when it arrives. This makes the app feel faster.

They use Redux for state management, and they store part of the Redux state in IndexedDB so they can reuse it on the next load.

But this can cause issues: if a user likes a post on the cached feed, that interaction might get lost when the fresh feed data replaces the cache.

To fix that, they built a "staging state" system:
When the page loads, it starts fetching new data.
Any user actions (likes, comments, etc.) are stored and applied to both the cached and incoming data.
Once the new data arrives, the system re-applies the user’s actions on top of it — kind of like a Git rebase.

They achived this with help two staging APIs .
- stagingAction() : acts like creating a local branch — it tracks actions that happen while waiting for new data.
- stagingCommit() : re-applies those actions on top of the fresh data — like a rebase!

1. 🔄 Early Flush with Chunked HTML
Using HTTP/1.1 chunked transfer encoding, they stream HTML to the browser as it rendered—no need to wait for the whole document to be ready.
This allow Instagram's servers to send the initial parts of the HTML, such as the <head> section immediatly → This allows the browser to start downloading linked resources right away

2. ⚡️ Streaming JSON
For single-page apps, the usual process is:
Send HTML + JS to browser, JS boots up
and makes XHR to fetch dataneede to bootstrap the page.
This creates unnecessary roundtrips and idle time.
Instead, Instagram generates the API response on the server immediately after HTML is flushed, then embeds the data into the HTML response as a <​script> tag that populates a JSON cache on the client.
💡 When the client script is ready, it checks this cache instead of issuing an XHR request.

The result?
📉 14% faster page display time on desktop 📉 23% faster on mobile (where latency hits harder)

For detailed read
https://instagram-engineering.com/making-instagram-com-faster-part-3-cache-first-6f3f130b9669

1. 🔄 Early Flush with Chunked HTML
Using HTTP/1.1 chunked transfer encoding, they stream HTML to the browser as it rendered—no need to wait for the whole document to be ready.
This allow Instagram's servers to send the initial parts of the HTML, such as the <head> section immediatly → This allows the browser to start downloading linked resources right away

2. ⚡️ Streaming JSON
For single-page apps, the usual process is:
Send HTML + JS to browser, JS boots up
and makes XHR to fetch dataneede to bootstrap the page.
This creates unnecessary roundtrips and idle time.
Instead, Instagram generates the API response on the server immediately after HTML is flushed, then embeds the data into the HTML response as a <​script> tag that populates a JSON cache on the client.
💡 When the client script is ready, it checks this cache instead of issuing an XHR request.

The result?
📉 14% faster page display time on desktop 📉 23% faster on mobile (where latency hits harder)

For detailed read
https://medium.com/instagram-engineering/making-instagram-com-faster-part-2-f350c8fba0d4

Just implemented a smooth scroll animation with text reveal using pure CSS!

.container {
       animation-timeline: view();
 }
 .heading {
       animation-range-start: cover 10vh;
       animation-range-end: cover 25vh;
 }
 .text {
       animation-range-start: cover 22vh;
       animation-range-end: cover 45vh;
 }

- create ::before and ::after pseudo-elements with same size of parent
- add conic-gradient background to both
- add blur effect and opactity 0.3 for one pseudo-element
- add rotation animation from 0deg to 360deg