Delivering Responsibly
summary
Argues that perceived performance matters more than raw bytes and shows concrete fixes: extract and inline critical CSS from templates (14 KB HTML target), load the full stylesheet and JS asynchronously, set a cookie to avoid repeated inlining, use FontFaceObserver to show fallback type then swap fonts (iOS timeout can be ~30s), and test with webpagetest.org and PageSpeed. Example: a 9 MB article drops start-render from ~12.5s to ~4s on 3G after these changes.
AI-written summary · about
chapters (46)
- 0:00Intro
- 0:31Responsive Design
- 5:46Performance Problems
- 7:53The Edge Case
- 8:35The Web Doesnt Always Work
- 8:58Web Designers Were In A Unique Position
- 9:20Data Is Finite
- 10:22How Much Does My Website Cost
- 11:21Compress Everything Right
- 12:58Source Set
- 13:18Reduce Dependencies
- 13:58Optimization Helps
- 15:10Latency Issues
- 15:35Physical Distance Write
- 16:15Grace Hopper
- 19:22Tammy Everett
- 20:53Critical Path
- 21:37Standard References
- 22:02Render Blocking
- 22:55Optimize Assets
- 23:28Webpage Test Org
- 23:53Summary Page
- 24:56Timeline View
- 25:30Awareness
- 26:07Prioritize
- 26:58Fold
- 27:52Bookmarklet
- 29:15grunt critical CSS
- 29:55unique templates
- 30:31pagespeed insights
- 31:01inline code
- 31:47script element
- 32:14progressive enhancement
- 33:04loading CSS
- 33:50load script
- 34:19inline styles
- 34:44browser cache
- 35:10fonts
- 35:39Safari
- 36:24Font Events
- 37:09Key Frames
- 37:36Wired Case Study
- 40:13HTTP Version 2
- 40:27Server Push
- 41:37Preparation and Foresight
- 42:04Conclusion
related talks
42mDelivering Responsibly
23mDelivering the goods
01h 03mBetter performance === greater accessibility
23mOptimizing page load speed on front end side
58mNew Adventures in Responsive Web Design
29mSpeed Essentials: Key Techniques for Fast Websites
01h 03mNew Adventures in Responsive Web Design
19mPerceived Performance, And Why It Matters