Everything I Have Done to Make CSS Wizardry Fast

Everything I Have Done to Make CSS Wizardry Fast

English | MP4 | AVC 2520×1576 | AAC 44KHz 2ch | 22 Lessons (2h 52m) | 7.39 GB

As a performance engineer, it’s my job to help clients build and maintain fast websites. It’s also pretty important that my own site leads by example! In this series of screencasts, I’ll walk you through every single performance-facing feature, decision, and commit that has gone into making CSS Wizardry fast.

While it might not be the biggest or most complex site in the world, it’s a great place for me to practice what I preach, and also makes it the perfect stage for examples, case studies, and demos. We’ll look at everything from CDNs to fonts, images to rendering, and everything in between! We’ll look at plenty of implementation-specific details that you don’t usually get in conference talks and blog posts, as well as dozens of gotchas, pro-tips, and factoids.

With no rigid structure or itinerary, you can view at your own pace, and in any order you wish. Want to skip to your favourite topic? Go right ahead!

Table of Contents

Start Here
Start Here
Who made you the boss of web performance?

CDN
CDN Features

CSS
Content Visibility
Network Performance
Paint Containment

Enhancements
Service Worker
instant.page

Fonts
Fonts

Images
Basic Optimisation
CLS and LQIP
Hero Imagery
Lazy Loading

Monitoring
Google Analytics
SpeedCurve
Treo

Orchestration
15 Head Tags

Resource Hints
16 Preconnect
17 Preload
18 Prerender

Technological Decisions
Technological Decisions

Finish Here
Outro

Homepage