Webpage acceleration series (4): CSS-assisted weight loss for webpage Acceleration

(4) CSS-assisted weight loss for webpage Acceleration

The key indicator of web site availability is speed. More specifically, the speed at which a page can appear in a visitor's browser window. There are many factors that affect the speed, including the speed of the web server, the Internet Connection of visitors, and the size of files that must be downloaded by the browser. Although you cannot control the server and connection speed, you can control the file size on the web page of the website.

 
To make websites faster, Web builders compress and optimize each image file on the website as usual, this often compromises the image quality to reduce the file size by several percentage points. Since CSS style sheets are plain text files and are relatively small compared with images, Web builders seldom consider taking measures to reduce the size of their CSS style sheet files. However, you can greatly reduce the size of a style sheet by using CSS abbreviations and other simple techniques. In an informal special test on my own style sheet, I reduced the file size by about 25-50%.

Use the abbreviation of CSS
The shorthand property of CSS is a special property name used to replace multiple sets of related properties. For example, the padding property is the top gap (padding-top), The right gap (padding-right), the bottom gap (padding-bottom), and the left gap (padding-left).

Using the write-down property allows you to compress Multiple property/attribute pair attributes into a row in the CSS style sheet.Code. For example, think about the following code:

. Sample1 {
Margin-top: 15px;
Margin-Right: 20px;
Margin-bottom: 12px;
Margin-left: 24px;
Padding-top: 5px;
Padding-Right: 10px;
Padding-bottom: 4px;
Padding-left: 8px;
Border-top-width: thin;
Border-top-style: solid;
Border-top-color: #000000;
}

Instead of using some abbreviations, you can reduce the code to the following. The actual effects of the two are exactly the same:

. Sample1 {
Margin: 15px 20px 12px 24px;
Padding: 5px 10px 4px 8px;
Border-top: Thin Solid #000000;
}

Note that there are multiple attributes in the abbreviation type. Each attribute corresponds to a common attribute that is combined into the abbreviation type. Properties are separated by spaces.

When attributes are similar values, such as linear measurements for the margin property, the order of attributes following the abbreviations is very important. The order of attributes starts from the top (the border on the top is blank) and continues clockwise around the box.

If all attributes of the abbreviation are the same, you can simply list a single attribute and copy it four times before. Therefore, the following two properties are equal:

Margin: 5px 5px 5px 5px;

Margin: 5px;

Similarly, you can use the two attributes after the border is blank or after the interval to represent the top/bottom and right/left attribute pairs.

Margin: 5px 10px 5px 10px;

Margin: 5px 10px;

The order of attributes is not important when they are not similar values. Therefore, attributes such as border color, border style, and Border width can be connected to the outline property in any order. Ignoring an attribute is equivalent to ignoring a regular attribute from a style rule.

List of CSS abbreviations

 
The following is a list of CSS abbreviations and their general properties.

Background: Background attachment, background color, background image, background position, and repeated background
Border: border color, border style, Border Width
Border-bottom (bottom border): bottom border color, bottom border style, Bottom Border Width
Border-left (left border): border color on the left, border style on the left, Border width on the left
Border-Right (border on the right): border color on the right, border style on the right, Border width on the right
Border-top (top border): Top border color, top border style, top Border Width
Cue (voice prompt): Prompt before and after
Font: font, font size, Font Style, font width, font variant, line height, font size adjustment, font stretch
List-style: List style image, list style position, list style type
Margin (blank): white space on the top, white space on the right, white space on the bottom, and white space on the left
Outline (outline): Outline color, outline style, outline width
Padding: top gap, right gap, bottom gap, left gap
Pause: pause and pause
Reduce white space

Another way to reduce the size of a CSS style sheet is to delete most useless spaces from the document. In other words, each rule is broken and put into a line of code, that is, it is inserted into the code to split each property/attribute into line breaks and indentions of different lines.

For example, the following sample code has the same content, but the second one is much more refined:

H1 {
Font-size: X-LARGE;
Font-weight: bold;
Color: # ff0000;
}

H1 {font-size: X-LARGE; font-weight: bold; color: # ff0000}

Delete comments

Removing comments from your CSS code is another way to reduce the file size. Although annotations are useful for code reading, they do not help browsers generate your web pages. Many Web builders are used to adding comments to each line of code, or at least to each rule declaration. Such generous comments are rarely needed in the CSS style sheet, because most CSS attributes and attributes are easy to read and understand. If you use meaningful names for classes, IDs, and other selectors, you can save most comments and maintain code readability and maintainability.

H1 {/* Heading 1 style */
Font-size: X-LARGE;/* X-LARGE size */
Font-weight: bold;/* Bold */
Color: # ff0000;/* red */
}

Using the write speed, deleting useless blank spaces, and omitting comments can greatly reduce the size of your CSS style sheet file. In turn, this will make a small but obvious contribution to the overall goal of accelerating your Web website.