Arrange a Masterclass

CSS Wizardry Blog Archives

This is the full archive of everything I’ve published here: 244 articles on web performance, site-speed, Core Web Vitals, caching, browser behaviour, and the occasional older CSS piece.

If you’d rather start somewhere less chronological, try Improving Perceived Performance with Multiple Background Images () at random.

2026


  1. Front-End’s Missing Metric: The TBT Window

  2. Meet Your Users Where They Are with Obs.js

  3. Better Browser Caching with No-Vary-Search

  4. font-family Doesn’t Fall Back the Way You Think

  5. What Is CSS Containment and How Can I Use It?

  6. When All You Can Do Is All or Nothing, Do Nothing

2025


  1. Obs.js: Context-Aware Web Performance for Everyone

  2. Low- and Mid-Tier Mobile for the Real World (2025)

  3. The Fastest Site in the Tour de France

  4. Making Sense of the Performance Extensibility API

  5. Why Do We Have a Cache-Control Request Header?

  6. HTML Is Not a Programming Language…

  7. Build for the Web, Build on the Web, Build with the Web

2024


  1. Licensing Code on CSS Wizardry

  2. A Layered Approach to Speculation Rules

  3. Designing (and Evolving) a New Web Performance Score

  4. Core Web Vitals Colours

  5. The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid

  6. Optimising for High Latency Environments

  7. Cache Grab: How Much Are You Leaving on the Table?

  8. blocking=render: Why would you do that?!

2023


  1. Correctly Configure (Pre) Connections

  2. The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache

  3. What Is the Maximum max-age?

  4. How to Clear Cache and Cookies on a Customer’s Device

  5. The Ultimate Low-Quality Image Placeholder Technique

  6. Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?

  7. The HTTP/1-liness of HTTP/2

  8. In Defence of DOM­Content­Loaded

  9. Site-Speed Topography Remapped

  10. Why Not document.write()?

2022


  1. Speeding Up Async Snippets

  2. Critical CSS? Not So Fast!

  3. Measure What You Impact, Not What You Influence

  4. Optimising Largest Contentful Paint

2021


  1. Measuring Web Performance in Mobile Safari

2020


  1. Site-Speed Topography

  2. Speed Up Google Fonts

  3. Real-World Effectiveness of Brotli

  4. Performance Budgets, Pragmatically

2019


  1. Lazy Pre-Browsing with Prefetch

  2. Making Cloud.typography Fast(er)

  3. Time to First Byte: What It Is and How to Improve It

  4. Self-Host Your Static Assets

  5. Tips for Technical Interviews

  6. Cache-Control for Civilians

  7. Bandwidth or Latency: When to Optimise for Which

2018


  1. ITCSS × Skillshare

  2. What If?

  3. CSS and Network Performance

  4. The Three Types of Performance Testing

  5. Getting to Know a Legacy Codebase

  6. Image Inconsistencies: How and When Browsers Download Images

  7. Identifying, Auditing, and Discussing Third Parties

  8. My Digital Music Setup

  9. Measuring the Hard-to-Measure

  10. Finding Dead CSS

2017


  1. The Fallacies of Distributed Computing (Applied to Front-End Performance)

  2. Ten Years Old

  3. Relative Requirements

  4. Airplanes and Ashtrays

  5. Performance and Resilience: Stress-Testing Third Parties

  6. Refactoring Tunnels

  7. Little Things I Like to Do with Git

  8. Writing Tidy Code

  9. Configuring Git and Vim

  10. Base64 Encoding & Performance, Part 2: Gathering Data

  11. Base64 Encoding & Performance, Part 1: What’s Up with Base64?

  12. Code Smells in CSS Revisited

  13. Typography for Developers

  14. Moving CSS Wizardry onto HTTPS and HTTP/2

  15. Ack for CSS Developers

  16. A New Year, a New Focus

  17. Preparing Vim for Apple’s Touch Bar

  18. Choosing the Correct Average

2016


  1. CSS Shorthand Syntax Considered an Anti-Pattern

  2. CSS Wizardry Newsletter

  3. Nesting Your BEM?

  4. Improving Perceived Performance with Multiple Background Images

  5. Continue Normalising Your CSS

  6. Pure CSS Content Filter

  7. Pragmatic, Practical, and Progressive Theming with Custom Properties

  8. Refactoring CSS: The Three I’s

  9. Speaker’s Checklist: Before and After Your Talk

  10. Improving Your CSS with Parker

  11. The Importance of !important: Forcing Immutability in CSS

  12. Mixins Better for Performance

  13. Managing Typography on Large Apps

2015


  1. White October Events Workshop Partnership

  2. BEMIT: Taking the BEM Naming Convention a Step Further

  3. Travelling Like You Want to, When You Have To

  4. Contextual Styling: UI Components, Nesting, and Implementation Detail

  5. Subtleties with Self-Chained Classes

  6. Cyclomatic Complexity: Logic in CSS

  7. Immutable CSS

  8. Can CSS Be Too Modular?

  9. More Transparent UI Code with Namespaces

2014


  1. When to use @extend; when to use a mixin

  2. The Specificity Graph

  3. CSS Wizardry Ltd.: Year 1 in review

  4. CSS Guidelines 2.0.0

  5. Advice to budding front-end developers

  6. CSS Wizardry referral scheme

  7. Hacks for dealing with specificity

  8. Vim for People Who Think Things Like Vim Are Weird and Hard

  9. Grouping related classes in your markup

  10. My Trello workflow

  11. Naming UI components in OOCSS

  12. Use zero-width spaces to stop annoying Twitter users

  13. Extending silent classes in Sass

2013


  1. Workshop: Event Handler, London, February 2014

  2. I wrote (part of) a book!

  3. My setup

  4. The problems with ‘crafting’ code

  5. Taming data tables

  6. Workshop: Smashing Workshops, Zürich, December 2013

  7. Code reviews as a service

  8. Workshop: Make Do, Leeds, November 2013

  9. ‘It’s because you’re polite.’

  10. Let’s work together

  11. Make it count

  12. Speak The Web discount code

  13. Leeds hangout

  14. Writing DRYer vanilla CSS

  15. Hashed classes in CSS

  16. ‘Scope’ in CSS

  17. The flag object

  18. shame.css – full .net interview

  19. shame.css

  20. .net award nominee

  21. Introducing csswizardry-grids

  22. Responsive grid systems; a solution?

  23. You know your context – on critical thinking and thinking for yourself

  24. MindBEMding – getting your head ’round BEM syntax

  25. Your logo is still an image… and so is mine!

  26. Front-end performance for web designers and front-end developers

  27. Discussion via Branch

2012


  1. A new CSS Wizardry

  2. My Git workflow for inuit.css

  3. Code smells in CSS

  4. A classless class—on using more classes in your HTML

  5. Announcing pr.ofile.me

  6. inuit.css v4.0.0—OOCSS, Sass and more

  7. Canvas Conf, 2012

  8. Tags in CSS files

  9. Shoot to kill; CSS selector intent

  10. Quasi-qualified CSS selectors

  11. The open/closed principle applied to CSS

  12. Single-direction margin declarations

  13. Keep your CSS selectors short

  14. Front-Trends 2012

  15. The single responsibility principle applied to CSS

  16. My HTML/CSS coding style

  17. Comments on CSS Wizardry

  18. Hacker News rebuttal

  19. Pragmatic, practical font sizing in CSS

  20. Breaking Good Habits—The Digital Barn

2011


  1. On HTML and CSS best practices

  2. Measuring and sizing UIs, 2011-style (and beyond)

  3. Create a notched current-state nav

  4. Build-along #1, reflection and reasoning

  5. CSS Wizardry build-along #1

  6. Sam Penrose Design—process and write-up

  7. Fully fluid, responsive CSS carousel

  8. The CSS Wizardry build-along is go!

  9. Build-along (testing the water)

  10. Reset restarted

  11. The ‘island’ object

  12. The ‘nav’ abstraction

  13. Ordered and numbered lists; the differences

  14. Writing efficient CSS selectors

  15. Do designers need to code?

  16. When using IDs can be a pain in the class...

  17. Two titillating table tips

  18. Building better grid systems

  19. Good developers are illusionists

  20. Updated CV

  21. More logo markup tips

  22. Borders on responsive images

  23. .net magazine awards nominee

  24. Responsive images right now

  25. Fluid grid calculator

  26. Namespacing fragment identifiers

  27. What is inuit.css?

  28. Styling alt text on images

  29. Introducing igloos—inuit.css gets plugins

  30. DIBI 2011

  31. Annotated <figure>s in HTML5 and CSS

  32. Font sizing with rem could be avoided

  33. jQuery placeholder plugin/polyfill

  34. On negative hovers

  35. Introducing inuit.css

  36. Ideas of March

  37. Coding up a semantic, lean timeline

  38. Link: Technical Web Typography: Guidelines and Techniques

  39. Problems with the sans-serif hack

  40. Mobile business card

  41. Creating a pure CSS dropdown menu

  42. Pure CSS(3) accordion

  43. CSS powered ribbons the clean way

  44. Create a centred horizontal navigation

  45. Link: Recreating the Luke's Beard social icons with CSS3

  46. Using the <body> element as a wrapper

  47. HTML(5) and text-level semantics

  48. Client respect

  49. Maximising hit-area for usability

  50. HTML elements, tags and attributes

  51. A new year, a new CSS Wizardry II

  52. Scrolling overflowed content in iOS

  53. The real HTML5 boilerplate

  54. A new year, a new CSS Wizardry

2010


  1. Mo’ robust paragraph indenting

  2. Media queries, handier than you think

  3. The implementation ∝ appreciation rule

  4. CSS: CamelCase Seriously Sucks!

  5. Improving CSS tooltips

  6. Design and education

  7. Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)

  8. I hate that I love Writer

  9. Unsung heroes

  10. Things are changing at CSS Wizardry

  11. Your logo is an image, not an <h1>

  12. Good developers vs. good salespeople

  13. Designing in the browser leads to better quality builds

  14. In response to ‘Invisible captcha to prevent form spam’

  15. Keeping code clean with content

  16. A quick counter to 'The Digital Agencies of the Future!'

  17. Set then unset (or reset...?)

  18. Zebra-striping rows and columns

  19. Semantics and sensibility

  20. Building sites without using IDs or classes

  21. 30 days without an iPhone

  22. Moving forward is holding us back

  23. A quick note on border radius

  24. Type tips—quick tips on all things web typography

  25. Multiple column lists using one <ul>

  26. Upside down domains—registering an international domain name

  27. CSS bar charts—styling data with CSS3 and progressive enhancement

  28. iPhone CSS—tips for building iPhone websites

  29. The three types of dash

  30. The importance of proper punctuation

  31. A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)

  32. A suitable alternative—on proper use of alt attributes

2009


  1. Typographic work planner

Book a Free Call

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

Connect

Projects

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.

Start a Conversation