Have Geek Brain

Performance, serve all CSS at once or as needed?

As far as I know, these days there are two main methods used to include CSS in a website.

A) Provide all the CSS used by the website in a single (compressed) file B) Provide the CSS for the required elements on the page that is currently only viewed

Positive values ​​for A: all CSS used on the site is cached on first visit through 1 HTTP request
Negative values ​​for A: if it is a large file, it takes a long time to load initially

Positive values ​​for B: faster initial load time
Negative values ​​for B: more HTTP requests, more files to cache

Is there anything (fundamental) I'm missing here?

+2


a source to share


4 answers


Profile. It depends on how your users are using your site.

If the web app and your users are likely to interact with it and see most of the layout you are planning, you probably want to use a single CSS that is loaded once and then stored in the browser cache. In this case, the first time overhead is negligible.



If the majority of your users have a cold cache and are just browsing two or three pages, separate CSS files are likely to improve their experience.

You can't tell without looking at what users are actually doing.

+3


a source


Even a large CSS file, gzipped, is tiny compared to a lot of other things (like images, movies, etc.) that are being loaded. The only real reason to split the CSS into separate files is to swap in special rules to make certain browsers behave (I'm looking at you IE).



+1


a source


There is no A or B, it is always a compromise between the two. For example: you want the front page to load as fast as possible, so you only ask for what is needed. On the following pages, you ask for the remaining CSS. Only 2 requests.

Basically, you are creating bundles / groups of related CSS. By dynamically combining and compressing these packages, you can create a maintainable file structure. It also allows you to experiment with the best combination of speed, performance, requests and bandwidth ...

This whole story also applies to JavaScript files, as the same trade-offs can be made.

+1


a source


What's better?

  • Writing a single css file
  • Writing additional css files

What's better?

  • Tracking, saving 1 updated css file
  • Tracking, updating more css files

Which esier?

  • Deciding what to insert into one css file
  • Deciding what to put in each of your css files

What is the cost of generating each individual css file versus creating one global css file.

0


a source






More articles:


All Articles