Speed Matters: Client Side Performance Improvement Tips & Tricks
summary
A deliberately slow demo site with a 458 KB hero JPEG gives a mobile Lighthouse score of about 18; the page is rebuilt live using the Contentful CDN to serve progressive images, reduce hero quality to ~181 KB for a quick preview, and switch to WebP for much smaller files. Thumbnails become tiny and lazy-load, the hero is preloaded and given explicit width/height to eliminate CLS, Google fonts use preconnect + display=swap (and text= for selective glyphs), and third‑party scripts and GTM are offloaded to a web worker with PartyTown to cut total blocking time.
AI-written summary · about
chapters (15)
- 0:00Start
- 0:38Introduction
- 1:31Agenda
- 2:11Why Does Performance Really Matters
- 9:22Total Blocking Time Activity
- 15:18What Is the Hero Image
- 15:42Progressive Images
- 18:03Progressive Loading
- 20:45Why Are We Spending Time and Wasting Bandwidth on the Images
- 22:13Layout Shift
- 28:23Web Extensions
- 29:29Fetch Priority
- 29:59Fonts
- 32:53Ampersand Text
- 42:29Caching
related talks
29mSpeed Essentials: Key Techniques for Fast Websites
47mMake the Web Faster
26mFast and Beautiful Modern Image Delivery Techniques
30mFast and Beautiful: Modern Image Delivery Techniques
46mFast and Beautiful Modern Image Delivery Techniques
25mGet Fast and Stay Fast
01h 04mFrom Zero to Hero - Web Performance
46mThink Fast!