Low- and Mid-Tier Mobile for the Real World (2026)
The 2026 update to my real-world device testing recommendations paints a clearer picture than ever…
CSS Wizardry
@css-wizardry
Publisher
245
Posts
Posts by CSS Wizardry
Front-End’s Missing Metric: The TBT Window
The TBT Window is the FCP-to-TTI interval used to calculate Total Blocking Time. If FCP or TTI moves, TBT can change even when long tasks do not.
WD
Meet Your Users Where They Are with Obs.js
Obs.js is a tiny inline script that helps you adapt your site to real-world network, battery, CPU, and memory conditions.
WD
Better Browser Caching with No-Vary-Search
No-Vary-Search lets HTTP caches ignore irrelevant query parameters such as UTM tags, while still keeping meaningful ones like product variants in the cache key.
WD
font-family Doesn’t Fall Back the Way You Think
A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume.
WD
What Is CSS Containment and How Can I Use It?
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
WD
When All You Can Do Is All or Nothing, Do Nothing
If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.
WD
Obs.js: Context-Aware Web Performance for Everyone
Obs.js is a tiny inline script that exposes network, battery, CPU, and memory signals to CSS and JavaScript so you can adapt to user context.
WD
Low- and Mid-Tier Mobile for the Real World (2025)
Discover the most representative low- and mid-tier mobile devices for web performance testing in 2025.
The Fastest Site in the Tour de France
How fast are pro cycling teams’ and manufacturers’ websites? A CrRRUX-powered deep dive into bike brand performance, visibility, and missed opportunities.
WD
Making Sense of the Performance Extensibility API
Making sense—and use!—of the new Performance Extensibility API in Chrome DevTools.
Why Do We Have a Cache-Control Request Header?
Learn how the Cache-Control request header works, how browsers handle refresh and hard refresh caching, and when developers should use it themselves.
HTML Is Not a Programming Language…
Is HTML a programming language? In this short post, I explore why HTML is powerful, fundamental, and essential—but not a programming language.
Build for the Web, Build on the Web, Build with the Web
What is the real, long-term cost of adopting a JavaScript framework?
Licensing Code on CSS Wizardry
I’ve recently decided to apply the permissive MIT License to all content on CSS Wizardry by default. How does this affect you?
A Layered Approach to Speculation Rules
The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered approach, we can add more progressive functionality.
Designing (and Evolving) a New Web Performance Score
Why design another new performance score?! Good question…
Core Web Vitals Colours
If, like me, you frequently require the Core Web Vitals colour palete, here it is!
The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid
If you want to start consulting, you’re gonna need some paperwork!
Optimising for High Latency Environments
We can’t do much to change latency, so how can we work around it?
Cache Grab: How Much Are You Leaving on the Table?
Quantifying the importance of caching just got a lot easier
blocking=render: Why would you do that?!
Why on earth would you make something render-blocking?!
Correctly Configure (Pre) Connections
We’re probably familiar with preconnect, but are we getting it right?
The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache
We know we should do it, but do we know how?
What Is the Maximum max-age?
How long?! RFC9111 lets max-age reach 68 years—far beyond the usual one that developers set. Here are the raw numbers, the spec, and when to use it.
How to Clear Cache and Cookies on a Customer’s Device
There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?
The Ultimate Low-Quality Image Placeholder Technique
Can Low-Quality Image Placeholders and LCP play nicely together?
Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?
There’s still a lot of misunderstanding about CWV for SEO. Let’s work it out together.
The HTTP/1-liness of HTTP/2
If HTTP/2 is so much better, why does it look so similar to HTTP/1?!
In Defence of DOMContentLoaded
Is there any reason to still measure the DOMContentLoaded event? Perhaps…
Site-Speed Topography Remapped
Revisiting and remapping my Site-Speed Topography technique for assessing web performance at large
Why Not document.write()?
We’re often told not to use document.write(), but… why?!
Speeding Up Async Snippets
Async snippets used to improve performance, but now they’re a legacy anti-pattern. How do we handle them now?
Critical CSS? Not So Fast!
Critical CSS promises faster loading, but is it worth the complexity? Learn when Critical CSS actually boosts performance or when it might slow you down.
Measure What You Impact, Not What You Influence
When implementing performance fixes, it’s imperative that you measure the right thing—but what is ‘right’?
Optimising Largest Contentful Paint
Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint
Measuring Web Performance in Mobile Safari
How often do you test your site in iOS Safari? Do you even know how?!
Speed Up Google Fonts
Google Fonts is fast. Now it’s faster. Much faster.
Real-World Effectiveness of Brotli
How effective is Brotli, really?
Performance Budgets, Pragmatically
If you’ve ever struggled to define performance budgets, this off-the-shelf trick is what you’re looking for.
Lazy Pre-Browsing with Prefetch
Using prefetch for fun and profit
Making Cloud.typography Fast(er)
What issues does Hoefler&Co’s Cloud.typography introduce, and how can we mitigate them?
Time to First Byte: What It Is and How to Improve It
Just how much does TTFB matter when it comes to front-end performance?
Self-Host Your Static Assets
Why is it so much better to self-host your static assets?
Tips for Technical Interviews
How can you prepare for and survive a technical interview?
Cache-Control for Civilians
What does Cache-Control really do? In basic terms? Let’s find out!
Bandwidth or Latency: When to Optimise for Which
How can you tell when bandwidth or latency are your bottlenecks?
ITCSS × Skillshare
The official introduction to ITCSS on Skillshare
What If?
How do we so often forget to ask the simple question: what if?
CSS and Network Performance
How can CSS impact network and resource-loading performance? Can things be that serious?
The Three Types of Performance Testing
How can we make it easier for businesses to understand when and what to measure?
Getting to Know a Legacy Codebase
What should you do when you first get launched into an old, sprawling CSS codebase?
Image Inconsistencies: How and When Browsers Download Images
How and when do browsers download certain types of image? What does that mean for performance?
Identifying, Auditing, and Discussing Third Parties
Gathering data about third-parties using free and open-source tooling
My Digital Music Setup
An overview of my hardware and software setup for listening to digital music
Measuring the Hard-to-Measure
How can we gather valuable data about previously hard-to-measure things?
The Fallacies of Distributed Computing (Applied to Front-End Performance)
What can front-end and performance engineers learn from the Fallacies of Distributed Computing?
Relative Requirements
Define the relative importance of project traits in order to make development smoother
Airplanes and Ashtrays
Sometimes you need to make it possible to do the wrong thing…
Performance and Resilience: Stress-Testing Third Parties
Assessing the fragility and resilience of third party resources
WD
Refactoring Tunnels
A metaphor for defining the scope of refactoring tasks
Little Things I Like to Do with Git
Handy Git tricks and aliases: leaderboards, praise, word-diff, branch history, daily recaps, changelog generation, and more in one quick guide.
Writing Tidy Code
Even the most inexperienced developers can write great looking code
Configuring Git and Vim
Both amazing tools in their own rights, how can we get both playing nicely together?
Base64 Encoding & Performance, Part 2: Gathering Data
Statistics, tests, and numbers looking at the performance costs of Base64
Base64 Encoding & Performance, Part 1: What’s Up with Base64?
A look at the many huge disadvantages of Base64 encoding assets into your CSS
Code Smells in CSS Revisited
An update to my 2012 article, Code Smells in CSS
Typography for Developers
A look at the simple differences that developers and engineers can make in order to improve the quality of their typography
Moving CSS Wizardry onto HTTPS and HTTP/2
Improving security and performance on CSS Wizardry
Ack for CSS Developers
Using the Ack tool to audit and profile your CSS
A New Year, a New Focus
In 2017, I want to begin shifting my focus more toward making things fast
Preparing Vim for Apple’s Touch Bar
Apple are replacing their function row with a Touch Bar; how will this affect Vim?
Choosing the Correct Average
A look at which average works best for representing certain types of data
CSS Shorthand Syntax Considered an Anti-Pattern
Avoid using CSS’ shorthand syntax
CSS Wizardry Newsletter
CSS Wizardry has just got itself a newsletter…
Nesting Your BEM?
A look at the possible benefits of nesting BEM, and mitigating the side effects
Improving Perceived Performance with Multiple Background Images
Using CSS gradients and multiple backgrounds to improve resilience and perceived performance
Continue Normalising Your CSS
Why we should still be using Normalize.css
Pure CSS Content Filter
Experiment: Making a content filter using CSS
Pragmatic, Practical, and Progressive Theming with Custom Properties
A low-cost approach for providing user customisation in UI projects
Refactoring CSS: The Three I’s
Three key steps to help you refactoring legacy code
Speaker’s Checklist: Before and After Your Talk
Giving talks is stressful. Follow these tips to make the logistics of it a little simpler.
Improving Your CSS with Parker
Using static analysis to learn where to improve your CSS
The Importance of !important: Forcing Immutability in CSS
Forcing immutability in our utility classes by using !important
Mixins Better for Performance
A look at the performance difference between Sass’ mixins and @extend
Managing Typography on Large Apps
A look at managing typography more practically on larger sites and apps
White October Events Workshop Partnership
An exciting new partnership to offer public workshops
BEMIT: Taking the BEM Naming Convention a Step Further
Adding further meaning and information to the BEM naming convention
Travelling Like You Want to, When You Have To
My own personal tips and tricks for surviving lots of air travel.
Contextual Styling: UI Components, Nesting, and Implementation Detail
How to style specific components when they’re in specific locations
Subtleties with Self-Chained Classes
A brief note on some of the subtleties and oddities when chaining classes with themselves.
Cyclomatic Complexity: Logic in CSS
A look at how CSS has always contained logic and conditions
Can CSS Be Too Modular?
Looking at the dangers of abstracting CSS too far
More Transparent UI Code with Namespaces
Employing a suite of namespaces to make your UI code more readable and transparent
When to use @extend; when to use a mixin
When is it suitable to use Sass @extend or mixin features, and why?
The Specificity Graph
The Specificity Graph as a model for visualising specificity issues in your code
CSS Wizardry Ltd.: Year 1 in review
A look back on my first year of self employment
CSS Guidelines 2.0.0
Announcing the next iteration and business model of my popular CSS Guidelines document
Advice to budding front-end developers
A collation of the advice I regularly give out to new and emerging web developers
CSS Wizardry referral scheme
A way to say thank you to the individuals responsible for their companies hiring me
Hacks for dealing with specificity
A couple of quick hacks and tricks for manipulating specificity
Vim for People Who Think Things Like Vim Are Weird and Hard
An introduction to the whats and the whys of using Vim as your text editor
Grouping related classes in your markup
An interesting way of visually and ‘physically’ grouping multiple class attributes
My Trello workflow
How I manage development projects using Trello
Naming UI components in OOCSS
A way of giving complex, OOCSS-built components more meaningful names
Use zero-width spaces to stop annoying Twitter users
A little trick to stop mentioning Twitter users when you write @import, etc.
Extending silent classes in Sass
A simple trick for controlling the reach of Sass’ `@extend`
Workshop: Event Handler, London, February 2014
My first workshop in association with the fine folk at Event Handler
My setup
A brief overview of my tools and software I use for work
The problems with ‘crafting’ code
Some thoughts on our use of the word ‘craft’ to describe our work
Taming data tables
Laying out data tables in a consistent way, finally!
Workshop: Smashing Workshops, Zürich, December 2013
Announcing my first workshop in association with Smashing Workshops
Code reviews as a service
A new service I’m offering: remote code reviews
Workshop: Make Do, Leeds, November 2013
Announcing my first workshop in association with Make Do
‘It’s because you’re polite.’
A personal post about helpfulness and politeness.
Let’s work together
I’m looking for amazing people to work with on great products.
Make it count
Everything you do, do it for a reason, and make that reason a good one.
Leeds hangout
I have a couple of days off in Leeds around two conferences; let’s meet…?
Writing DRYer vanilla CSS
DRYing out our CSS at its most basic level
Hashed classes in CSS
Spoofing the uniqueness of IDs by putting hashes in your classes
shame.css – full .net interview
The full version of the .net magazine shame.css interview
Introducing csswizardry-grids
A responsive, fluid, nestable, Sass-based grid system.
Responsive grid systems; a solution?
A look at building a practical, robust, flexible, usable responsive grid system.
You know your context – on critical thinking and thinking for yourself
About learning to look at things objectively and apply your own context
MindBEMding – getting your head ’round BEM syntax
A primer on the oft-confusing BEM notation for CSS
Your logo is still an image… and so is mine!
Balancing image semantics with performance ideals
Front-end performance for web designers and front-end developers
A comprehensive primer on front-end performance for designers and front-end developers
My Git workflow for inuit.css
A brief overview of how I use Git, specifically on inuit.css.
Code smells in CSS
The things I look out for when writing or reviewing CSS.
A classless class—on using more classes in your HTML
An analogy to explain why it <em>is</em> a good idea to use more classes.
Writing efficient CSS selectors
CSS selectors, and their combinations, can be fast or slow! And while hopefully imperceptible, it’s definitely worth knowing about.
Loading more…