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.
Combine External CSS (Deprecated)
How Combining External CSS Works
Additional Methods to Combine External CSS
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.
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.