Peeling an orange: progressive website loading
summary
Argues for “peeling” a page by loading hero content and a call-to-action from the server first, then progressively enriching with navigation, brand and add-ons; implements server-side rendering and replaces heavy JS layout with CSS Grid, uses progressive bootstrapping and lazy-loading via intersection observer or the new native lazy spec, defers add-ons with requestIdleCallback, sizes bundles around 50 KB and reports roughly 50% perceived load improvement when the hero is ready without JS.
AI-written summary · about
chapters (32)
- 0:00Introduction
- 1:50Performance and mobile
- 3:00Performance perspective
- 4:00How does the user feel
- 5:05Focal points
- 6:32Are you online
- 7:56Can my need be quickly fulfilled
- 8:41Promises
- 10:29Uncertainty
- 10:48Use for you
- 11:14Pretend
- 11:26Optimistic UI
- 12:30Optimism UI
- 13:07Dollarscom
- 13:42Unfolding
- 14:52Lazy loading
- 15:47Intersection observers
- 16:15Unfolding is useful
- 16:49Peeling
- 17:18User focal points
- 19:34Answer first
- 20:05Hero content
- 22:11Accessibility
- 27:05Additional content
- 27:37Addons
- 28:58Request IdleCallback
- 29:52Takeaways
- 30:52Beware of code reuse
- 32:08Anchor links
- 33:35Peeling feels smooth
- 34:00Summarize
- 35:23Questions
related talks
54mPushing Pixels
31mFaster content websites via SSR and progressive hydration of Web Components
20mDesigning Great Progressive Web Apps
01h 04mFrom Zero to Hero - Web Performance
25mThe first two seconds: Faster page loads with React
01h 03mBetter performance === greater accessibility
38mSecret Shortcuts of Loading Web Performance
42mDelivering Responsibly