In this article, I will list five CSS performance tools that will help you put on the CSS website architecture to achieve fast loading experience.
Why page speed so important?
Fast loading website is critical to the success of the site. There was found to support the following view: even if the user has to wait a few seconds to display Web content, they will soon become impatient.
When this happens on your site, their experience will be significantly decreased, resulting in reduction of your site traffic and conversions, and ultimately hurt your business.
There are many factors that can affect the performance of Web, such as number of HTTP requests, code swollen code, a large number of media files. How to write and how to load the CSS style sheet to the browser some of these factors will have a significant impact on the precious milliseconds, which makes visitors stay on your site and click to enter the competition differently.
Let us look at the following tools can help you fix CSS Web to get a first-class performance.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
TestMyCSS
TestMyCSS is a free online optimization tools with a large number of functions. It checks redundant , validation errors , CSS unused and best practices .
You can start using it immediately, simply type the url site CSS files, TestMyCSS will spit out all the necessary improvements. Not only that, you can also find useful tips in the following areas
- How to simplify the complex selector
- You need to get rid of duplicate CSS properties and selectors
!importantThe number of notices in the code exists- Unnecessary class-specific
- Unnecessary IE fix
- It does not require vendor prefixes prefix CSS properties
- Having the category ID rule or a tag name, e.g.
a.primary-link - Universal selector improper use.
Stylelint
Stylelint is an ambitious CSS gadgets, with PostCSS with use , PostCSS is an open source tool written in the latest CSS. linter is a program that traverse your code and capture any potential errors.
Stylelint can
- Tag error, such as misspellings, invalid hexadecimal color, repeating the selection and the like.
- Implement best practices
- Enforcement coding style conventions in each CSS rule, e.g. uniform spacing.
- Provide support for new cutting-edge CSS syntax
- Use stylefmt (a tool for formatting CSS rule) automatically fix some minor warning ......
... and more.
Stylelint very versatile, and can
- Stylelint CLI (Command Line Interface)
- For plug-build tool you choose, for example, webpack, gulp and so on.
- You can choose the plug-in text editor, such as Atom, Sublime Text and so on.
- Stylelint node API
- Stylelint PostCSS plug.
You can "Stylelint User's Guide" and " Developers Guide" to find more detailed information on how to get started.
CSS trigger
CSS trigger is an online resource, can tell you which CSS properties will lead to the layout in which the browser, drawing and composite operations. These processes are executed when the browser rendering the page.
especially:
- Layout : Browser generates geometry and position of each element
- Paint : The browser pixels each element broken down into layers
- Composite : Layer Browser drawn on the screen.
If you animate elements on the network, this information is particularly valuable. For the browser, combined operation of the cheapest. If your CSS code and layout of the property repeatedly triggered painting operation to animate, it is difficult to maintain the speed of 60fps (frames per second), which is essential for smooth digital animation for the Web.
csnano
When you consider the CSS page rendering process on the critical path , the use of lightweight and well-structured style sheet document becomes very important. In other words, by default, the browser will delay rendering the page until loaded, parsed and executed style sheet. So, if your CSS document big and messy, so visitors are more likely to need a few moments to use the content on your site.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
cssnano is a small plug-ins and CSS optimization PostCSS . especially,
cssnano CSS will use good form and run it through a number of targeted optimization, in order to ensure that the final results for the production environment as small as possible.
The tool has a number of features to look for all the things it can do for you, please visit cssnano website.
critical
The key is to use CSS to solve the problem of the critical path of another tool I mentioned in the previous section.
In PageSpeed Insights rules and recommendations, you will find the following tips:
For best performance, you may want to consider the key inline CSS directly into the HTML document. This eliminates the additional round trip in the critical path.
Google Developers blog Ilya Grigorik on.
The idea is to find the key to CSS rules, and these rules on the <head>part of the HTML document. About consider the key CSS , the usual consensus is for setting the basic layout and font styles as well as any rule-fold content of the website is a good choice.
The key for you to generate the critical path and embedded CSS, you can use it with Grunt and Gulp. Detailed tutorial on using CSS with the key in this tool, do not miss Asha Laxmi's " How and why should inline critical CSS" .
in conclusion
In this article, I stressed the importance of fast loading websites, and style sheets style swollen how to make your visitors may face unwelcome wait wait what appears on the screen. I Among the five tools listed here will make your style sheets more streamlined, less prone to error, so that the browser easier to load and parse.
What do you use CSS to control the swelling? Let me know in the comments below.
