CSS Weekly #7: Performance Optimization Tips
CSS Weekly #7: Performance Optimization Tips ⚡
Hey sheinhardt@example.com,
Let's make your CSS blazing fast! Performance isn't just about file size—it's about render performance, paint optimization, and smart loading strategies.
1. Critical CSS Strategy
Inline critical styles, defer the rest:
<head>
<!-- Critical CSS inline -->
<style>
/* Only above-the-fold styles */
body { margin: 0; font-family: system-ui; }
.header { background: var(--primary); }
/* ... minimal styles ... */
</style>
<!-- Load full CSS async -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
2. Optimize Selectors
/* ❌ Slow: Right-to-left matching */
.sidebar ul li a {
color: blue;
}
/* ✅ Fast: Specific class */
.sidebar-link {
color: blue;
}
/* ❌ Slow: Universal selector */
* {
box-sizing: border-box;
}
/* ✅ Fast: Inheritance */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
3. Layout Thrashing Prevention
/* ❌ Causes reflow on every hover */
.card:hover {
height: auto;
padding: 2rem;
}
/* ✅ Use transform/opacity only */
.card {
transform: translateY(0);
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
🚀 Modern Performance Features
content-visibility
Hide rendering cost of off-screen content:
.section {
content-visibility: auto;
contain-intrinsic-size: 0 500px; /* Estimated height */
}
CSS Containment
.widget {
/* Isolate layout calculations */
contain: layout style paint;
}
/* Or use shorthand */
.widget {
contain: strict; /* All containment types */
}
will-change (Use Sparingly!)
.animated-element {
will-change: transform;
}
/* Remove when done */
.animated-element.animation-done {
will-change: auto;
}
4. Smart Loading Patterns
Font Loading Strategy
/* Fallback font stack */
body {
font-family: "Custom Font", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, sans-serif;
}
/* Optimize font loading */
@font-face {
font-family: "Custom Font";
src: url("font.woff2") format("woff2");
font-display: swap; /* Show fallback immediately */
unicode-range: U+000-5FF; /* Latin characters only */
}
Image Optimization
/* Responsive images with aspect ratio */
.image-container {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
/* Native lazy loading */
loading: lazy;
/* Smooth loading */
opacity: 0;
transition: opacity 0.3s;
}
.image-container img.loaded {
opacity: 1;
}
5. CSS Architecture for Performance
Use CSS Custom Properties Wisely
/* ❌ Bad: Inherited by all children */
:root {
--card-padding: 1rem;
}
/* ✅ Good: Scoped to usage */
.card {
--padding: 1rem;
padding: var(--padding);
}
Layer Your Styles
/* Define layers for better organization */
@layer reset, base, components, utilities;
/* Reset layer loads first */
@layer reset {
* {
margin: 0;
padding: 0;
}
}
/* Utilities can override */
@layer utilities {
.mt-0 { margin-top: 0 !important; }
}
📊 Measuring Performance
Use these CSS-specific metrics:
// First Contentful Paint
new PerformanceObserver((list) => {
console.log('FCP:', list.getEntries()[0].startTime);
}).observe({entryTypes: ['paint']});
// Layout shifts
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log('Layout shift:', entry.value);
}
}).observe({entryTypes: ['layout-shift']});
🎯 Bundle Size Optimization
PurgeCSS Config
// postcss.config.js
module.exports = {
plugins: [
require('@fullhuman/postcss-purgecss')({
content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ['dark-mode', /^hljs/]
})
]
}
Performance Checklist
- [ ] Critical CSS inlined
- [ ] Non-critical CSS loaded async
- [ ] Unused CSS removed
- [ ] Selectors optimized
- [ ] Layout thrashing avoided
- [ ] Fonts optimized with font-display
- [ ] Images lazy-loaded
- [ ] Animations use transform/opacity
- [ ] contain property used where appropriate
- [ ] CSS layers organized
Sponsored by Speedlify - Track your site's performance over time. CSS Weekly readers get 50% off first month!
Next week: Modern CSS Reset techniques!
— Sarah from CSS Weekly
P.S. Run Lighthouse on your site and share your scores! 🏃♀️
Add a comment: