Production Optimization

Minimizing CSS

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

🚧This page is still under construction and some content may not be complete.

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



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.
Production Optimization
Lazy Loading

Speed up initial page loads by lazy loading the runtime engine.

Production Optimization

Render pages early to improve user experience and SEO.

© Aoyue Design LLC.