Test: Is It Better to Have Many Small CSS Files or One Large One?
Best practices in the era of HTTP/2 advise us to divide CSS into smaller files according to components and pages. But won't the cost of many requests be too high?
Why Does This Matter?
When optimizing a website according to Core Web Vitals metrics, we strive to load the largest element on the page (LCP element) as quickly as possible. This means that everything that is fetched before this element should also be loaded and processed as swiftly as possible, especially style and JavaScript files.
We decided to answer this question during an optimization project for one of our largest clients, Livesport.
On the Livesport website, specifically the Fortuna Liga page, there were 55 small CSS files totaling 789 kB at the time of testing. Using Gzip compression during transfer, 156 kB were transferred to the browser.
In this scenario, the LCP element loaded in 3,700 ms. (Tested on a Fast 3G connection.)
I then combined all files into one and minified it. The resulting file was linked in the <head> of the page, and other CSS file links were removed.
This is how the CSS files being downloaded on Livesport look.
Minification reduced the data volume to 655 kB, and with Gzip compression, we reached 96 kB of transferred data. We saved 54 requests for downloading CSS files and roughly ⅓ of the data volume being transferred.
After CSS optimization, the LCP loaded in 3,500 ms.
The LCP (Largest Contentful Paint) loaded 200 ms earlier on a 3G connection after replacing 55 small files with one large CSS file.
In percentage terms, this was only a 5% speedup in rendering the LCP element.
| Number of Files | Data Volume kB | LCP in ms | |
|---|---|---|---|
| Before Change | 55 | 789 | 3,700 |
| After Change | 1 | 655 | 3,500 |
This relatively small speedup in LCP loading is partly due to the large number of other files being transferred, such as JavaScript. Their demanding processing, especially on the client's browser, also influences the final time.
Is It Worth Merging CSS into One File?
This test showed that merging into one file doesn't save much in terms of speed. One large CSS file isn't significantly faster for LCP than many small ones.
Moreover, there are other factors at play. This only considers the user experience with an empty browser cache. In real-world operation, caching plays a significant role, and many small files will be more advantageous. That is, if you, as developers, can invalidate them individually, not all at once.
Final General Tips for CSS. What to Watch Out For?
- Ensure all CSS outputs are as small as possible. Always minify thoroughly.
- Prevent code duplication: various icons, colors, or entire components. We often see this with clients.
- Clean up – if CSS files are large, consider refactoring, splitting into components, and removing unused (dead) components.
- Ensure proper file caching using the
max-agedirective. - Make sure Gzip or Brotli compression is enabled on the server.
- Avoid styles on the page that aren't used in HTML; the homepage doesn't need styles for the checkout process.
- Styles outside the first viewport can be loaded lazily, e.g., via JS.
More on CSS optimization has been written by Martin Michálek at Vzhůru dolů or Harry Roberts.
Tagy:MetrikyCore Web VitalsCSS
PředchozíStudie: Chaty a rychlostDalšíSynth vs. CrUX vs. RUM