Combine External CSS (Deprecated)

How Combining External CSS Works

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.

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 Terms

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.



YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.