How Instagram.com Works

on YouTube ↗40m

" summary

Instagram.com renders almost all UI in JavaScript and the team packages code by modules not files, splitting work across 17 entry points and sharing common bundles so browsers only download what's needed. Build tooling switches from grunt to webpack with loaders for JSX, CSS and images; assets upload to S3 and a CDN. Photo page load drops from 250ms to 120ms — a 52% performance improvement — and visual regressions use Huxley screenshot testing.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 3:17Today is about Single Page Apps
3. 13:18Bundle modules for the browser
4. 14:05Optimize your bundles
5. 17:45They're part of the dependency graph

" related talks

• 45mDid We(b Development) Lose the Right Direction?Stefan Judis · GOTO Copenhagen 2021
• 37mThe Cost of JavaScriptAddy Osmani · #PerfMatters Conference 2019
• 53mThe Unbearable Weight of Massive JavaScriptRyan Townsend · performance.now() 2023
• 39mYou really don't need all that JavaScript, I promiseStuart Langridge · JSCamp Romania 2019
• 38mSecret Shortcuts of Loading Web PerformanceNikola Mitrovic · NDC Porto 2023
• 41mYou Really Don't Need All That JavaScript I PromiseStuart Langridge · Pixel Pioneers Bristol 2022
• 40mSupercharged Live Live Live!Monica Dinculescu · Polymer Summit 2017
• 41mBrowser Internals for JS DevsAlexander Blom · Web Unleashed 2016