CSS optimization

✔️ Tag: CSS optimization

CSS optimization is the process of improving the performance and loading speed of web pages by reducing the size of CSS files and simplifying their structure. This is important for improving user experience and boosting search engine rankings.

How to Optimize CSS - Shortening CSS

Shortening CSS means removing all unnecessary characters from code, such as spaces, line breaks, and comments. This reduces the size of the CSS file and makes it load faster.

Combining CSS Files

Combining multiple CSS files into one can also speed up page loading. This is because the browser needs to make fewer requests to the server.

Using selectors by class and ID

Using class and ID selectors instead of tag selectors can speed up browser processing of CSS. Class and ID selectors are more specific and allow the browser to quickly find matching elements on the page.

Style Order Optimization

The order of styles in a CSS file can also affect rendering speed. Styles that are applied to elements at the top of the page should be placed at the top of the CSS file. This will allow the browser to render the page content faster.

CSS optimization is an important aspect of website development. It helps improve user experience and improve search engine rankings. There are many CSS optimization techniques such as shortening code, concatenating files, and using class and ID selectors.

CSS minification

CSS minification is the process of compressing CSS code by removing all unnecessary characters such as spaces, line breaks, and comments. This reduces the size of the CSS file and makes it load faster. There are various CSS minification tools such as CSS Minifier and CleanCSS.

Image optimization

Image optimization can also improve page performance. This means compressing images to the smallest possible size without losing quality. There are various image optimization tools such as TinyPNG and JPEGmini.

There are four main aspects of CSS optimization:

1. Download performance - mainly by reducing file size, reducing download blocking, and improving concurrency.

2. Selector performance.

3. Rendering performance.

4. Maintainability, reliability.

CSS Optimization - Load Performance

1. CSS Compression: Packaging and compressing the written CSS can greatly reduce its size;

2. Uniform CSS style: when bottom and left margins are required,

⟹ Many times select:margin: top 0 bottom 0;

⟹ But margin-bottom: bottom; margin-left: left; execution is more efficient;

3. Reduce the use of @import and use a link because the latter is loaded together when the page is loaded and the former has to wait for the page to load before loading;

4. Design your CSS layout wisely, pay attention to style reuse, and reduce rendering time. For class and id selection, use a less global matcher such as * and set base styles sensibly (such as setting a table{}) to improve reusability.

CSS Optimization - Selector Performance

1. CSS selectors are matched from right to left. When using child selectors, the browser looks at all child elements to determine if it is the specified element, and so on;

2. Avoid using wildcards. For example, *{} the number of calculations is amazing! Select only the items you need.

3. Choose as few tags as possible, but use a class. For example: #nav li{}, you can add class name nav_item to li, select .nav_item{} as follows.

4. Don't use tags to qualify identifiers or class selectors. For example: ul#nav should be simplified to #nav.

5. Use the child selector as little as possible and reduce the weight of the selector. Descendant selectors overhead is the highest, try to keep the depth of selectors to a minimum, the highest level is no more than three layers, and more use classes to bind each label element.

6. Think about inheritance. Know which properties can be inherited and avoid repeating the rules for those properties.

CSS optimization - rendering performance

1. Carefully use high performance attributes: floating, positioning;

2. Minimize page swapping and redrawing;

3. Rearrange in accordance with the order of writing css:

⟹ Position: position, top, left, z-index, float, display.

⟹ Size: width, height, margins, padding.

⟹ Text series: font, line height, color, letter spacing.

⟹ Background border: background, border.

⟹ Other: animation, transition.

4. Redraw: border, outline, background, box-shadow, if you can use background-color, try not to use background;

5. Remove empty rules: {};

6. When the attribute value is 0, no units are added;

7. The attribute value is a floating decimal number 0.**, and the 0 before the decimal point can be omitted;

8. Standardize different browser prefixes: those with browser prefixes come first. The standard attributes follow;

9. Do not use the @import prefix, this will affect the css loading speed;

10. Make full use of CSS inheritance properties to reduce the amount of code;

11. Abstractly extract public styles and reduce the amount of code;

12. The selector optimizes nesting and tries to avoid too deep levels;

13. css sprite image, a small icon of the same part of the same page, convenient to use and reduce the number of requests on the page, but the image itself will become larger, when using it, consider the advantages and disadvantages clearly, and then use it;

14. Place the css file at the top of the page.

Maintainability and reliability

1. Extract styles with the same attributes, integrate them, and use them on pages through classes to improve CSS maintainability;

2.Following the previous one, oocss is also one way to improve css performance. By defining reusable and semantically good base classes and then adding them to the html, this technique is also used by many UI frameworks such as :class=”btn btn-active btn-blue”;

3. Separation of style and content: css code is defined in external css;

4. Separation of container and style;

⟹ The following are materials covering this topic: