Shulou(Shulou.com)06/01 Report--

This article is to share with you about how to improve the speed of opening CSS websites. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. TestMyCSS

TestMyCSS is a free online optimization tool with many features. It can be used to check code redundancy, verify errors, unused CSS, and seek best practices. Programmers only need to type the URL into the CSS file of the website and start using it immediately, and TestMyCSS can find all the projects that need to be improved. Not only that, programmers can also see some useful tips:

1. How to simplify complex selectors

2. Duplicate CSS attributes and selectors to be removed

3. The number of important declarations that exist in the code

4. Unnecessary class specificity

5. Unnecessary IE repair

6. CSS attributes that do not require vendor prefixes

7. A class or ID rule with a signature, such as a.primary-link

8. Improper use of universal selector

II. Stylelint

StyleLint is a fairly powerful CSS linter that works with PostCSS (a development tool) to write state-of-the-art CSS,linter, a program that catches potential errors through code.

StyleLint can be used to:

1. Check for spelling errors, such as typos, invalid hexadecimal colors, repeat selectors, etc.

2. Seek to achieve best practices

3. Uniform coding style, such as uniform spacing in each CSS rule, etc.

4. Support the new top-level CSS syntax

5. Use stylefmt to automatically fix some warnings, a tool for formatting CSS rules

StyleLint is so powerful that programmers can use what it has:

(2) StyleLint CLI (Command Line Interface)

1. Build plug-ins for tools, such as webpack,gulp, etc.

2. Plugins for text editors, such as Atom,Sublime Text.

3 、 StyleLint Node API

4. StyleLint PostCSS plug-in

III. CSS Triggers

CSS Triggers provides an online reference for page parsing, which allows programmers to learn which CSS properties trigger redrawing and compositing, but not layout, which is what browsers do when rendering a web page.

1. Layout: the browser generates the geometry and position of each element

2. Paint: the browser parses the pixels of each element into layers

3. Composite: the browser draws layers on the screen.

Compositing is the cheapest operation performed by browsers, and if your CSS animation code repeatedly triggers the properties of compositing and redrawing operations, it is difficult to use 60fps (frames per second) as the key number for smoothing web animations.

IV. Cssnano

When using CSS to render the critical path of a page, it becomes important to use a compact, well-structured stylesheet document. In other words, the default browser web page rendering process does not stop until the stylesheet is loaded, parsed, and executed. Therefore, if the CSS document is large and cluttered, the site will take a long time to load.

Cssnano is the CSS optimization and decomposition plug-in for PostCSS. Cssnano uses a well-formed CSS and goes through many optimizations to ensure that the final production environment is as small as possible.

5. Critical

Critical is another tool for dealing with the CSS critical path problem mentioned in the previous section. For best performance, programmers may need to consider inserting critical CSS directly into HTML documents, as this eliminates extra round trips to critical paths.

The concrete practice of this idea is to find key CSS rules and place them in the section of the HTML document. Critical generates and inlines the critical path CSS, and programmers can use both Grunt and Gulp.

Thank you for reading! This is the end of the article on "how to improve the opening speed of the CSS website". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.