I wasted a day on CSS selector performance to make a website load 2ms faster | Trys Mudford
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
Harry clearly outlines the performance problems of Base64 encoding images in stylesheets. He’s got a follow-up post with sample data.
Picture me holding Trys back and telling him, “Leave it alone, mate, it’s not worth it!”
I love print stylesheets but I was today years old when I found out that print-color-adjust
exists.
Over the past 10 years or so, we’ve slowly but very surely transitioned to a state where frameworks are the norm, and I think it’s a problem.
I concur.
Use the frameworks and libraries that make sense for you to deliver the best UX possible. But also learn the web platform from the ground up. Take time to understand how web browsers work and render webpages. Learn HTML, CSS, JavaScript. And keep an eye, if you can, on the new things.
Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded. Write CSS carefully, reason your methodology and stick to it, and feel empowered to skip frameworks. When it comes time to write JavaScript, write not too much, make sure you know what it all does, and above all, make sure the website works without it.
The whole article is great, and really charmingly written, with some golden nuggets embedded within, like:
- You’ll find that spending more time getting HTML right reveals or even anticipates and evades accessibility issues. It’s just easier to write accessible code if it’s got semantic foundations.
- In my experience, you will almost always spend more time overriding frameworks or compromising your design to fit the opinions of a framework.
- Always style from the absolute smallest screen your content will be rendered on first, and use
@media (min-width)
queries to break to layouts that allow for more real estate as it becomes available.- If your site doesn’t work without JavaScript, your site doesn’t work.
- Always progressively enhance your apps, especially when you’re fucking with something as browser-critical as page routing.
A collection of stylesheets that don’t use class selectors. Think of them as alternatives to default user-agent stylesheets.
Why do browsers that don’t implement stylesheet switching still download alternative stylesheets?
Are you writing instructions in CSS …or are you writing suggestions?
An interesting idea from the birth of CSS.
Adding another theme to my stylesheet switcher.
Embedding YouTube videos without sacrificing performance.