How to merge multiple CSS during website construction to speed up website opening?

Some website development requires loading a lot of css. While increasing the special effects and aesthetics of the website, most websites will introduce 3-5 css files. Some more complex websites will introduce more than 5 css files. This will cause an increase in the number of HTTP requests on the website, which will affect the opening speed of the website. You can merge multiple css files into one file to reduce the number of http requests and speed up the website opening speed!

There is a special instruction import in css that refers to other css styles. It can be used as follows:

@import url(css file address);

If your website has multiple css files, you can build a new one named hb.css.

for example

A certain website calls four css files: font-awesome.min.css, awesome.min.css, bootstrap.min.css, swiper.min.css, and style.css. These five files are stored in the css folder. At this time, we can build an import.css file in the css folder with the content:

@charset "utf-8";

@import url(font-awesome.min.css);

@import url(awesome.min.css);

@import url(bootstrap.min.css);

@import url(swiper.min.css);

@import url(style.css);

After building, delete the 5 css links in the webpage and add the following introductions to the header:

<link rel="stylesheet" href="css/hb.css" >

The above steps have completed the operation of quickly merging css, but some websites also use external css files. This method still applies. If your website feels that the opening speed is slow, this operation is a good idea.