1. Try to use abbreviations
Use abbreviations statements, such as statements margin shown below, can reduce the size of the CSS file from the root. On the google search CSS Shorthand shorthand can be found in many other forms.
p { margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px; }
p { margin: 1px 2px 3px 4px; }2. Find and remove unused CSS
Delete unnecessary portions of CSS, j will obviously speed up the loading speed of the page. Google's Chrome browser has this functionality out of the box. Just F12 and then open the Sources tab, and then open a command menu (Ctrl + shift + P). Then, select Show Coverage, the highlighted window Coverage analysis unused codes on the current page.
Open the Google browser development tools are, more options Coverage beside Conlse, you can see the unused CSS, click on the corresponding item, highlight the code is not used on the current page.
3. Analysis Tool
Google browser Audits can quickly help us analyze, use, open the Developer Tools, click Audits fields, click Run audits after the beginning of the analysis results.
Automatic analysis of CSS will always result in an error. After the CSS file CSS file compressed replace uncompressed, thorough testing of the entire site - no one knows what the optimizer will lead to error.
4. inline critical CSS
It takes time to load an external style sheet, which is due to the delay caused by - so, you can put the key in the code bits in the head. However, make sure not to overdo it, remember that personnel performing maintenance tasks must also read the code.
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<p class="blue">
Hello, world!
</p>
...5. Allow anti-parallel parse
@import CSS styles easily add code. Unfortunately, these benefits are not without cost: Since @import can be nested, so they can not be resolved in parallel. More parallel method is to use a series of marks, the browser can obtain these markers immediately.
@import url("a.css");
@import url("b.css");
@import url("c.css");
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="b.css">
<link rel="stylesheet" href="c.css">6. Replace image with CSS
A few years ago, a semi-transparent png create a translucent effect on the site are commonplace. Now, CSS filter provides a resource-saving alternative. For example, the following code fragment to ensure that the image displayed in question for its own grayscale version.
img {
-webkit-filter: grayscale(100%);
/* old safari */
filter: grayscale(100%);
}7. Use color shortcut
Common sense tells us that six-figure color descriptor is the most effective way to express color. Not so - in some cases, shorthand description or color names can be shorter.
target { background-color: #ffffff; }
target { background: #fff; }8. Remove unnecessary zero and unit
CSS supports a variety of units and digital formats. They are a worthy goal thanks to optimization - can remove tailgating and piggybacking zero, as shown in the following code fragment. Also, remember, zero is always zero, add value to the information that came with dimensions not included. The default value is 0. px-- deleting unit px saves two bytes for each number.
padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;9. sprite
Due to protocol overhead, the efficiency is very low loading of multiple small picture. CSS Sprites a series of small pictures combined into one large PNG file, and then break it down by CSS rules. TexturePacker other procedures greatly simplifies the creation process.
.download {
width:80px;
height:31px;
background-position: -160px -160px
}
.download:hover {
width:80px;
height:32px;
background-position: -80px -160px
}10. The need to avoid the performance properties required
Analysis showed that some labels are more expensive than other labels. The following analytical affect the performance of these - if not necessary, try not to use them.
border-radius
box-shadow
transform
filter
:nth-child
position: fixed;11. Remove the space
Space - Consider tabs, carriage returns, and spaces - make the code easier to read, but from the perspective of the parser, it is not useful. Remove them before publishing, a better approach is to delegate this task to a shell script or a similar tool.
12. Remove Comment
Notes to the compiler does not have any effect. Create a custom parser, in order to remove them before publishing. This not only saves bandwidth, but also ensures that the attacker and cloning more difficult to understand the thinking behind the code at hand.
13. Use automatic compression
Yahoo's user experience team created an application that handles many compression tasks. It is released in the form of a JAR file, and can be selected using the JVM run.
http://yui.github.io/yuicompressor