Must Know Tips to Improve CSS performance

1. Avoid @import CSS

@import url("style.css")

What is CSS @import ? CSS @import is the process of importing one or multiple different CSS file into existing CSS file

CSS @import load CSS files sequentially instead of in parallel, your browser need to process every single CSS file before it can start rendering content on your page and causing performance slowness

2. Remove redundant rules & minify your CSS file

Remove unnecessary & redundant rules without affecting web page design, the fewer rules there are for the browser to process, the less time it takes to load the web page.

Minify CSS file

CSS minify is a compression process of removing unnecessary space and formatting within your CSS and reduce the size of your files.

before minify (Code Block A):

.mystyle{
   color: blue;
   font-size: 12px;
}

after minify (Code Block B):

.mystyle{color:blue;font-size:12px;}

These two code blocks are working exactly the same way. But there are two major differences between these code blocks:

• Code block A is more readable and well formatting compared to the code block B which is without formatting
• Code block A has bigger file size compared to Code block B

3. Optimize Font Usage

3.1 Only load the necessary fonts: 

When you add up an additional font family to style in your web page, whenever users accessing your website, browser must download the extra font file in order to render the web page.

Remove fonts you’re not using / outdated.

3.2 Subset Font Resources:

Specify the Unicode range from @font-face, you can use the Unicode-range descriptor to specify the character range, for example:

1. Single codepoint (e.g. U+416)
   • a Unicode codepoint, represented as one to six hexadecimal digits
2. Interval range (e.g. U+400-4ff)
   • represented as two hyphen-separated Unicode codepoints indicating the inclusive start and end codepoints of a range
3. Wildcard range (e.g. U+4??)
   • defined by the set of codepoints implied when trailing ‘?’ characters signify any hexadecimal digit

for example, to specify the range to Vietnamese only:

@font-face {
  font-family: 'Montserrat';
  font-weight: 100;
  font-display: swap;
  src: url(/fonts/montserrat.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

4. Make used of CSS containment

Defining contains CSS allows browser to isolate a targeted subtree from the rest of the page.

For example:

.container {
  contain: layout;
}

When a content change is triggered inside .container, browser will only re-render on the targeted .container area and does not affect the rest of the page.

For more details, refer to complete guide : Tutorial for CSS Containment

5. Minimizing Animation which causing layout reflows & repaints

Repaints

Layout repaint occurs when triggers a change to the element that affect appearance but not layout.

Sample properties:
opacity, background-color, visibility, and outline

Reflows

Layout reflows have a bigger impact compared to repaints. Reflow will trigger a re-calculation of position & dimension for all elements within the page. Hence, changing a single element can be affecting all children, siblings, and ancestors.

Sample properties:
width, height

6. Simplify your selector

Minimizing complicated hierarchy

Keep CSS hierarchy simple and clean, and reduce specificity while possible. This will also reduce the dependency on another selector and increase reusability

avoid this:

body > main_container .sub_container + div > .myclass {
    /* Code here */
}

use this instead:

.myclass {
    /* Code here */
}

.animated_item{
  will-change: opacity;
}