Optimizing CSS Performance
-
Activate HTTP/2 and GZIP compression on your server
-
Use a content delivery network (CDN) to increase the number of simultaneous HTTP connections and replicate files to other locations around the world
- Remove unused files.
Better connection
Replace Images with CSS Effects
Remove Unnecessary Fonts
Avoid @import
/* main.css */
@import url("base.css");
@import url("layout.css");
@import url("carousel.css");<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="carousel.css">Minify
Use Modern Layout Techniques
Avoid using !important
Simplify Selectors
body > main.main > section.first h2:nth-of-type(odd) + p::first-line > a[href$=".pdf"]
Be Wary of Expensive Properties
- border-radius
- box-shadow
- opacity
- transform
- filter
- position: fixed
Adopt CSS Animations
Avoid Animating Expensive Properties
- opacity and/or
-
transform
Indicate Which Elements Will Animate
.myelement {
will-change: transform;
}Adopt SVG Images
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
<circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" />
<svg>Style SVGs with CSS
<body>
<svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600">
<circle cx="400" cy="300" r="50" />
<svg>
</body>circle {
stroke-width: 1em;
}
.mysvg {
stroke-width: 5px;
stroke: #f00;
fill: #ff0;
}Inpect
Optimizing CSS Performance
By netha
