Combine External CSS (Deprecated)

Many websites contain multiple CSS files, which means when the page is requested, each CSS file must be fetched and processed separately. In the world of web page performance, these additional requests, which add additional time, and result in slower page load times. Combining CSS files is just as straightforward as it sounds. Just copy and paste all the external CSS into a single main file, or maximum two, and remove the calls to the external CSS. Additionally, PageSpeed recommends putting CSS files that are needed to render in one file, and in the other file, put the CSS that is required after the page loads. In this way, the browser only needs to make the request for the immediate CSS files, which helps with the perceived response time from the user’s perspective.

There is another method to import CSS files that we mentioned earlier called the @import method. This method, while beneficial for reasons like helping you to organize your CSS sheets, creates delays as browsers must download these requests one by one and cannot be downloaded in parallel, which does nothing to help decrease the page load time for the user.