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

This article mainly introduces "what are the methods of optimizing CSS and speeding up the speed of the website". In the daily operation, I believe that many people have doubts about the methods of optimizing CSS and speeding up the speed of the website. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the methods of optimizing CSS and speeding up the speed of the website?" Next, please follow the editor to study!

01. Use abbreviations

Using abbreviated statements, such as the margin declaration shown below, can fundamentally reduce the size of the CSS file. Search CSS Shorthand on google and you can find many other forms of shorthand.

P {margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;} p {margin: 1px 2px 3px 4px;}

02. Find and delete unused CSS

Removing unnecessary parts of CSS,j will obviously speed up the loading of web pages. Google's Chrome browser has this out-of-the-box feature. Just go to View > developer > developer tools, open the Sources tab in the most recent version, and then open the command menu. Then, select Show Coverage to highlight the unused code on the current page in the Coverage analysis window, which is an eye-opener.

Open the Google browser developer tool, select more Coverage next to Conlse, and you can see the unused CSS. Click on the corresponding item to highlight the unused code on the current page, which is an eye-opener:

03. Do this in a more convenient way

Navigation in line-by-line analysis is not necessarily convenient, using Google browser's Audits can quickly help us analyze, use, open developer tools, click in the Audits field, click Run audits and start analyzing the results.

04. Pay attention to these problems

Keep in mind that automatic analysis of CSS always leads to errors. After replacing the uncompressed CSS file with the compressed CSS file, test the entire site thoroughly-no one knows what error the optimizer will cause.

05. Inline key CSS

Loading external stylesheets takes time, which is due to delays-- so you can put the most critical code points in head. However, make sure you don't go too far, and remember that people who perform maintenance tasks must also read the code.

.blue {color:blue;} Hello, world!

06. Allow anti-parallel parsing

@ import makes it easy to add CSS styles to your code. Unfortunately, these benefits are not without cost: because @ import can be nested, they cannot be parsed in parallel. A more parallel approach is to use a series of tags that browsers can get immediately.

@ import url ("a.css"); @ import url ("b.css"); @ import url ("c.css")

07. Replace pictures with CSS

A few years ago, it was common for a set of translucent png to create translucent effects on websites. Now, CSS filters provide an alternative way to save resources. For example, the following code snippet ensures that the image in question is displayed as its own grayscale version.

Img {- webkit-filter: grayscale; / * old safari * / filter: grayscale;}

08. Use color shortcuts

Common sense tells us that six-digit color descriptors are the most effective way to express colors. This is not the case-in some cases, shorthand descriptions or color names can be shorter.

Target {background-color: # ffffff;} target {background: # fff;}

09. Delete unnecessary zero-sum units

CSS supports multiple unit and number formats. They are a thankful optimization goal-- trailing and following zeros can be removed, as shown in the following code snippet. Also, keep in mind that zero is always zero, and adding dimensions does not add value to the information contained.

Padding: 0.2em; margin: 20.0em; avalue: 0px; padding: .2em; margin: 20mm; avalue: 0

10. Eliminate too many semicolons

This optimization needs to be cautious because it affects changes to the code. The specification of CSS allows you to omit a semicolon at the end of an attribute group. Because the cost savings from this optimization approach are small, we will explain this mainly for programmers who are developing automatic optimization.

P {. . . Font-size: 1.33em}

11. Use texture atlas

Due to the protocol overhead, it is inefficient to load multiple small pictures. The CSS wizard combines a series of small images into a large PNG file, which is then decomposed by CSS rules. Programs such as TexturePacker greatly simplify the creation process.

.download {width:80px; height:31px; background-position:-160px-160px} .download: hover {width:80px; height:32px; background-position:-80px-160px}

twelve。 Omit px

An easy way to improve performance is to use a feature of the CSS standard. The default unit for a numeric value of 0 is px--. Deleting px saves two bytes for each number.

H3 {padding:0px; margin:0px;} h3 {padding:0; margin:0}

13. Avoid properties that require performance requirements

Analysis shows that some tags are more expensive than others. The following parsing can affect performance-try not to use them if they are not necessary.

Border-radius box-shadow transform filter: nth-child position: fixed

14. Delete whitespace

Spaces-- considering tabs, carriage returns, and spaces-- make the code easier to read, but from a parser's point of view, it's of little use. A better way to delete them before publishing is to delegate this task to a shell script or similar tool.

15. Delete comment

Comments also have no effect on the compiler. Create a custom parser to delete them before publishing. This not only saves bandwidth, but also ensures that threats and clones find it harder to understand the ideas behind the code at hand.

16. Use automatic compression

Yahoo's user experience team has created an application that handles many compression tasks. It is released as a JAR file, available here, and can be run using the JVM of your choice.

Java-jar yuicompressor-x.y.z.jar Usage: java-jar yuicompressor-x.y.z.jar [options] [input file] Global Options-h,-help Displays this information-- type Specifies the type of the input file

17. Run it on NPM

If you want to integrate the product into Node.JS, please visit npmjs.com/package/yuicompressor. A poorly maintained repository contains a set of wrapper files and JavaScript API.

Var compressor = require ('yuicompressor'); compressor.compress (' / path/to/ file or String of JS', {/ / Compressor Options: charset: 'utf8', type:' js'

18. Keep Sass checked

Although the performance of CSS selectors is not as important as it was a few years ago (see Resources), frameworks like Sass sometimes produce very complex generations, looking at the output file from time to time and considering ways to optimize the results.

19. Set up cach

There is an old saying that the fastest files are never sent over the Internet. Let the browser cache request do this effectively. Unfortunately, the cache header must be set on the server. Take advantage of the two Chrome tools described above, which provide a way to quickly analyze the results of changes.

20. Break the cache

Designers usually don't like caching because they worry that browsers will cache the last stylesheet. An easy way to solve this problem is to include a tag with a file name. Unfortunately, because some agents refuse to cache files with "dynamic" paths, the scenario outlined in the code accompanying this step does not apply everywhere.

21. Don't forget the basics

Optimizing CSS is only part of the game. If your server does not use HTTP/2 and gzip compression, you will lose a lot of time during data transfer. Fortunately, solving these two problems is usually simple. Our example shows some adjustments to common Apache servers. If you find yourself on a different system, just refer to the server documentation.

Pico / etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css at this point, about "what are the ways to optimize CSS and speed up the website" study is over, I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.