Minimizing CSS

Reduce on-page CSS output and complexity using Master CSS APIs.

Bloated CSS keyframes

Defining animation keyframes the traditional way causes bloated CSS files.

@keyframes animation1 { … }
@keyframes animation2 { … }
…
.animation1 {
    animation: animation1 .5s
}

This works fine, but even if you only used one animation1 of the keyframes, the other unused ones would still be included in the final output and runtime style sheet.

Using animations API

Master CSS animations work by parsing the animation and animation-name component values and generating the corresponding CSS keyframe into the stylesheet.

Customize your keyframes using the Master CSS animations API.

export default {
    animations: {
        animation1: { … },
        animation2: { … },
        …
    }
}

For example, apply the custom animation1 using the animation syntax:

<div class="@animation1|.5s"></div>

It only generates CSS according to the syntax @animation1|.5s you apply:

@keyframes animation1 { … }
 
.\@animation1\|\.5s {
    animation: animation1 .5s
}

Even though there are thousands of predefined keyframes, animation1, animation2, …, they are not included in the final stylesheet like traditional CSS.

Bloated CSS variables

Using variables API

...

Benefits

By minifying CSS, the browser enhances performance and improves related metrics:

1. Faster Loading Time: Less CSS means smaller file sizes, resulting in faster page loading times. This is crucial for improving user experience and SEO rankings, as search engines like Google typically prefer pages that load quickly.
2. Reduced Network Bandwidth Usage: Less CSS code reduces the network bandwidth consumption from the server to the browser. This is particularly beneficial for users on mobile devices and slow-speed networks.
3. Improved Performance: Reducing CSS code can lower the rendering and parsing costs for browsers. This helps enhance the page's performance, especially on low-end devices and older browser versions.