CSS Wizardry

Critical CSS? Not So Fast!

CSS Wizardry

I have long held very strong opinions about the Critical CSS pattern. In theory, in a perfect world, with all things being equal, it’s demonstrably a Good Idea™.

Media 262

Speeding Up Async Snippets

CSS Wizardry

If you’ve been a web developer for any reasonable amount of time, you’ve more likely than not come across an async snippet before. At its simplest, it looks a little like this: var script = document. createElement ( ' script ' ); script. src = ' [link] ' ; document. appendChild ( script ); Here, we….

Speed 232
Insiders

Sign Up for our Newsletter

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Optimising Largest Contentful Paint

CSS Wizardry

[link] [link] [link] [link] [link] [link] [link] [link]. link] [link] --> Largest Contentful Paint (LCP) is my favourite Core Web Vital. It’s the easiest to optimise, and it’s the only one of the three that works the exact same in the lab as it does in the field (don’t even get me started on this…).

Measure What You Impact, Not What You Influence

CSS Wizardry

A thing I see developers do time and time again is make performance-facing changes to their sites and apps, but mistakes in how they measure them often lead to incorrect conclusions about the effectiveness of that work. This can go either way: under- or overestimating the efficacy of those changes.

The Fastest Google Fonts

CSS Wizardry

* The Wiz: [link] 200518_2J_70c5f6c1c92a1cd436e525ac2b895f51 200518_AY_290d20f93c0e4b469e0bbe60a63f678e 200518_8F_49cb76e22485f51fad729e085a8bd08e 200518_4W_7d70995268b4aa4f495304063d449ae3&thumbSize=150&ival=100&end=all * harry.is: [link] --> For the most part, web fonts nowadays are faster than ever.

Google 285

Site-Speed Topography

CSS Wizardry

A couple of years ago, my first few days on a new web performance project were always slow going. So many false starts, tedious workflows, and a complete lack of efficiency really made it difficult for me to find momentum.

Speed 212

Measuring Network Performance in Mobile Safari

CSS Wizardry

So far this year, all but one of my clients have been concerned about Google’s upcoming Web Vitals update. The client who’s bucking the trend is great, not least because it’s given me something a little different to focus on—they’re more interested in how their site fares on iOS.

Time to First Byte: What It Is and Why It Matters

CSS Wizardry

I’m working on a client project at the moment and, as they’re an ecommerce site, there are a lot of facets of performance I’m keen to look into for them: load times are a good start, start render is key for customers who want to see information quickly (hint: that’s all of them), and client-specific metrics like how quickly did the key product image load? can all provide valuable insights. However, one metric I feel that front-end developers overlook all too quickly is Time to First Byte (TTFB).

Self-Host Your Static Assets

CSS Wizardry

One of the quickest wins—and one of the first things I recommend my clients do—to make websites faster can at first seem counter-intuitive: you should self-host all of your static assets, forgoing others’ CDNs/infrastructure. In this short and hopefully very straightforward post, I want to outline the disadvantages of hosting your static assets ‘off-site’, and the overwhelming benefits of hosting them on your own origin. What Am I Talking About?

Cache 215

CSS and Network Performance

CSS Wizardry

Despite having been called CSS Wizardry for over a decade now, there hasn’t been a great deal of CSS-related content on this site for a while. Let me address that by combining my two favourite topics: CSS and performance. CSS is critical to rendering a page—a browser will not begin rendering until all CSS has been found, downloaded, and parsed—so it is imperative that we get it onto a user’s device as fast as we possibly can.

Performance Budgets, Pragmatically

CSS Wizardry

One of the key tools that performance engineers have at their disposal is the Performance Budget: it helps us—or, more importantly, our clients—ensure that any performance-focused work is monitored and maintained after we’ve gone.

Making Cloud.typography Fast(er)

CSS Wizardry

Disclaimers: I was not approached or hired by Hoefler&Co or Cloud.typography to look into any of the following issues. I disclosed all of the below to Cloud.typography and gave them ample opportunity to work together to solve the issues at the root of the problem. There was no appetite from them to do so, so I decided to make it all available for free anyway—a faster web benefits everyone. All of the people I have dealt with seem like really, really nice folk.

Image Inconsistencies: How and When Browsers Download Images

CSS Wizardry

This year, I’ve been working closely with the wonderful Coingaming team out in beautiful Tallinn. We’ve been working pretty hard on making their suite of online products much faster , and I’ve been the technical consultant leading the project. It’s been an incredibly fun and rewarding engagement, and we’ve made some real business- and customer-facing improvements. One of the key reasons I’ve found the project so fun is that it’s given me a real chance to get very forensic.

Tips for Technical Interviews

CSS Wizardry

Yesterday, I spoke at ITKonket in Kragujevac, Serbia. During the Q&A after my talk, one great and non-technical question I got was for general advice on interviewing at tech companies. I decided to write down (and expand on) my answer in the hope that it might help someone else, too. Disclaimer. I don’t claim to be an authority on interviewing. I don’t think this article is definitive or gospel.

Code 150

The Three Types of Performance Testing

CSS Wizardry

A lot of companies—even if they are aware that performance is key to their business—are often unsure of how, when, or where performance testing sits within their development lifecycle. To make things worse, they’re also usually unsure whose responsibility performance measuring and monitoring is. The short answers are, of course ‘all the time’ and ‘everyone’, but this mutual disownership is a common reason why performance often gets overlooked.

Lazy Pre-Browsing with Prefetch

CSS Wizardry

I’m working with a client at the moment who, unfortunately, has a blocking third party stylesheet that’s needed to successfully render one of their site’s key pages. Until we can design a more long-term solution (and that’s assuming we can at all) that can asynchronously load the file, I wanted to work out a way to minimise its impact. This is a regular that is, necessarily, defined in the.

Cache 122

Bandwidth or Latency: When to Optimise for Which

CSS Wizardry

When it comes to network performance, there are two main limiting factors that will slow you down: bandwidth and latency. Bandwidth is defined as…. the maximum rate of data transfer across a given path. Generally speaking, increased bandwidth is only particularly useful when you’re transferring or downloading large files. If you’re streaming video, the difference between a 2Mb 1 connection and a 20Mb connection will surely be appreciated.

Getting to Know a Legacy Codebase

CSS Wizardry

The other day, Brad dropped me a message asking me about the topic of getting to know a brand new (specifically CSS) codebase. The kind of codebase that no one person truly understands any more; the kind of codebase that’s had a dozen different contributors over just as many years; the kind of codebase that’s never had a full-scale refactor or overhaul, but that’s grown organically over time and changed with new techniques, styles, and trends. (Un)fortunately,

What If?

CSS Wizardry

I was recently conducting some exploratory work for a potential client when I hit upon a pretty severe flaw in a design decision they’d made: They’d built a responsive image lazyloader in JavaScript which, by design, worked by: immediately applying display: none; to the ; waiting until the very last of the page’s images had arrived; once they’d arrived, removing the display: none; and gradually fading the page into visibility.

Cache-Control for Civilians

CSS Wizardry

The best request is the one that never happens: in the fight for fast websites, avoiding the network is far better than hitting the network at all. To this end, having a solid caching strategy can make all the difference for your visitors. ?? How is your knowledge of caching and Cache-Control headers? — Harry Roberts (@csswizardry) 3 March, 2019.

Cache 209

ITCSS × Skillshare

CSS Wizardry

Back in February 2018, Scott Sullivan, Partnerships Team Lead at Skillshare , sent me an email asking if I’d be interested in collaborating on an official ITCSS video course in conjunction with them. Sign up and learn ITCSS today! The email was extremely well timed.

My Digital Music Setup

CSS Wizardry

I want to begin this post with a disclaimer: I’m not an audiophile, and I don’t claim to be particularly knowledgable when it comes to music technology. If I sound like I don’t have a clue what I’m talking about, that’s probably because I don’t. That said, perhaps this article might provide some use to people looking to get a better handle on their digital setup: I know I would have certainly appreciated a post like this when I was setting out. Background. I listen to a lot of music.

Identifying, Auditing, and Discussing Third Parties

CSS Wizardry

A large part of my performance consultancy work is auditing and subsequently governing third-party scripts, dependencies, and their providers.

Google 106