CSS optimization skills self-practice experience

1. Use css sprites.

The advantage is that the small images used in CSS can be merged into one large image, which reduces the requests to the server, reduces the server pressure, and speeds up page loading.

2. Merge multiple css files into a single css file.

Same benefits as css sprites

3. Use external CSS.

External CSS can be cached by browsers and is easy to maintain.

4. Put the css in the head.

You can refer to Yahoo's document http://developer.yahoo.com/performance/rules.html#css_top

5. Use link instead of import

Using import will slow down page loading. Moreover, the loading order in IE may be inconsistent with expectations, which will directly lead to display problems.

6. Use CSS abbreviations.

For example, use margin instead of margin-top.

7. Put similar styles together to avoid repetitive writing.

8. Reduce line breaks.

9. Delete the final semicolon.

10. Use single-line comments.

11. RGB color abbreviation.

12. Remove unnecessary units, such as px.

13. Delete unused styles.

It can reduce file size and shorten browser parsing and matching time.

14. Compress CSS files.

All of the above are very simple and there is no need to explain them in detail. Of course, some CSS compression tools have optimization functions.

<<: A guide to writing flexible, stable, high-quality HTML and CSS code standards

>>: WeChat applet implements search function and jumps to search results page

The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)

CSS optimization skills self-practice experience

The ultimate solution to the problem of Chinese garbled characters in tomcat static pages (html)

js realizes the magnifying glass effect of shopping website products

The problem and solution of using docker storage and causing Exit to cause files to fail to upload to the server

MySQL series: Basic concepts of MySQL relational database

Detailed explanation of the usage of common Linux commands (Part 2) ———— Text editor commands vi/vim

Website front-end performance optimization: JavaScript and CSS

Introduction to the process of extending the boot partition in Kylin 4.0.2 (Ubuntu)

About the problem of vertical centering of img and span in div

Tomcat class loader implementation method and example code

Example of Vue transition to achieve like animation effect

Recommend

How to apply TypeScript classes in Vue projects

Implementation of element multiple form validation

Detailed explanation of Nginx installation, SSL configuration and common commands under Centos7.x

Detailed steps for installing Tomcat, MySQL and Redis with Docker

Zookeeper stand-alone environment and cluster environment construction

Vue scaffolding learning project creation method

Solution to mysql prompt "got timeout reading communication packets"

How to insert a value containing single quotes or backslashes in MySQL statements

MYSQL master-slave replication knowledge points summary

CSS3 gradient background compatibility issues

A colorful cat under Linux

Ubuntu boot auto-start service settings

Tutorial on installing MySQL8 compressed package version on Win10

VMware's detailed tutorial on how to create a Linux virtual machine and set up a virtual machine network

Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker