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

Made with Slides.com