Lesson 40-CSS Performance Optimization

CSS performance optimization is a crucial step when building high-performance web pages. It not only affects the page loading speed, but also affects the user experience and SEO. Below we will explore various aspects of CSS performance optimization in depth:

Minimize HTTP requests

• Merge CSS files: Merge multiple CSS files into one to reduce the number of HTTP requests and speed up page loading.
• Inline CSS: For small amounts of CSS, you can directly inline it in HTML to reduce HTTP requests.
• Use data URI: For background images or icons, you can use base64 encoding to inline them into CSS.

Compress and minify CSS

• CSS compression: Use tools (such as CSSNano, Clean-CSS, etc.) to remove spaces, comments, and unnecessary characters.
• CSS Sprites: Merge multiple small images into one large image to reduce image requests.
• Remove unused CSS: Use tools (such as PurifyCSS, UnCSS, etc.) to find and remove CSS that is not used in the page.

Optimize selectors

• Avoid wildcard selectors: *Wildcard selectors have poor performance, so try to minimize their use.
• Use class selectors first: Class selectors are faster than ID selectors and tag selectors because the browser’s CSS parser optimizes the processing of class selectors.
• Avoid descendant selectors: Descendant selectors (such as .parent .child) have lower performance than direct child selectors (.parent > .child) and adjacent sibling selectors (div + div).

Avoid using !important

• !important forces the style to be overwritten, making CSS cascading difficult, so it should be avoided as much as possible.

Use CSS preprocessors properly

• Using preprocessors such as Sass and Less can write more modular code and improve maintainability, but pay attention to the size of the compiled CSS.

Avoid CSS expressions

• CSS expressions can cause browser performance degradation in some cases, especially those involving dynamic calculations.

Use CSS Flexbox and Grid layout

• Compared with traditional layout methods (such as floating and positioning), Flexbox and Grid provide more efficient and simpler layout solutions.

Optimize animations and transitions

• Use hardware acceleration (transform: translateZ(0), will-change property) to improve animation performance.
• Avoid using animations on a large number of elements, as this will consume a lot of CPU resources.
• Use CSS animations instead of JavaScript animations unless JavaScript can provide better control.

Avoid using @import

• @import will block page rendering, and should be replaced by linking external style sheets.

Optimize media queries

• Put CSS for different screen sizes in the corresponding media queries to reduce unnecessary loading.

Use CSS Modules and Scoped CSS

• In modular development, using CSS Modules or Scoped CSS of frameworks such as Vue and React can avoid global style conflicts and improve code maintainability.

Optimize font loading

• Use the font-display property to control font loading behavior to avoid blank pages when loading fonts.
• Use the async property of web font services (such as Google Fonts) to load fonts asynchronously, or use local fonts as alternatives.

Use CSS Variables and Custom Properties

• CSS Variables can reduce duplicate code and improve code reusability, but they should be used with caution to avoid performance degradation due to overuse.

Use BEM nomenclature

• BEM (Block Element Modifier) ​​nomenclature helps improve the maintainability and reusability of CSS, but overuse may increase the size of CSS.

Monitoring and testing

• Use tools such as Lighthouse and WebPageTest to regularly test and monitor CSS performance to identify and fix problems in a timely manner.

Use CSS Grid Auto-Fit and Auto-Fill

• The auto-fit and auto-fill properties of CSS Grid can dynamically adjust the grid layout, automatically create rows or columns based on the available space, avoid hard-coded sizes, and improve the flexibility of responsive design.

Avoid using CSS3 filters

• Although CSS3 filters can achieve some cool visual effects, they may consume a lot of GPU resources in some browsers and affect performance. Use lighter alternatives whenever possible.

Reduce selector complexity

• Complex selectors (such as grandparent selectors or long chain selectors) will affect parsing speed. Try to keep selectors simple to improve performance.

Use CSS preloading

• For critical non-first-screen CSS, you can use <link rel="preload"> to preload to ensure that the style has been loaded when the user scrolls to the relevant area.

Avoid using JavaScript to manipulate CSS

• Use CSS to implement style changes as much as possible instead of JavaScript. JavaScript manipulation of CSS may cause redrawing and reflow, affecting performance.

Optimize image backgrounds

• Use CSS sprites or CSS background image cropping (background-size and background-position) to reduce HTTP requests.

Use CSS Scroll Snap Points

• By setting scroll-snap-type and scroll-snap-align, you can optimize scrolling performance, especially when designing scrolling interactions.

Understand CSS priority

• Understanding CSS cascading rules (Cascading) and inheritance (Inheritance) can help avoid unnecessary selector weight competition and improve code efficiency.

Use CSS Shapes

• CSS Shapes can affect fluid layouts around elements, but use them with caution as they may affect layout performance.

Optimize CSS Flexbox and Grid performance

• In Flexbox and Grid layouts, avoid using overly complex calculations such as percentages and negative values, which may cause browser performance to degrade.

Use CSS animation libraries properly

• Although libraries such as Animate.css and Hover.css provide convenient animation effects, they may contain unnecessary CSS and affect performance. Consider custom animations to reduce CSS size.

Use CSS Grid Auto-Placement

• Take advantage of CSS Grid’s automatic placement feature to let the browser automatically determine the position of elements, reduce manual layout work, and improve code efficiency.

Avoid using from/to in @keyframes animations

• Using the to or from keywords may cause the browser to perform additional calculations, and using percentage values ​​instead may be more efficient.

Use CSS Paint API

• CSS Paint API allows custom drawing of CSS properties, but it may consume performance, so use it with caution.

Keep learning and updating your knowledge

• CSS is a constantly developing and evolving language. Keeping up with new features, such as CSS Houdini, CSS Grid Level 3, etc., can help you optimize performance using the latest technologies.