0

I'm thinking of two options to load my css and wondering which one is the most efficient one?

  1. Using small bits of css files and import them into a single main styles.css and use this file in the head section.

  2. Using a common css file that contains code that applies to all pages and then create separate page-specific css files and include them in the page that need them. For example, the css for a contact page will only be used on the contact page so no need to load those css in other pages.

So which way would you go? Thanks

PapT
  • 603
  • 4
  • 14
  • 30
  • (1) is almost never the most efficient option, because it stops the browser from knowing which additional CSS to request until it’s already requested an extra resource (the stylesheet with the imports). You can work around that with preloading or by embedding it, but I think the better option to compare with is the equivalent `@import`s as ``s. – Ry- Jan 18 '20 at 05:53
  • Relevant, but already 3 years old: https://stackoverflow.com/questions/40928956/single-bundle-with-minification-vs-multiple-files-over-http-2 – Ry- Jan 18 '20 at 05:54
  • Relevant: https://stackoverflow.com/a/49397312/707111 (DD.’s answer only) – Ry- Jan 18 '20 at 05:56
  • Some variation on number 2. You should try and fit your "above the fold" assets into 14KB. Also recommend implementing a service worker so you can control caching and offline UX. Should you want to use more files and compose them for project management (number1) you need to implement a build process that compiles them into a static asset, in which case look at SASS or postCSS. – marblewraith Jan 18 '20 at 06:07

1 Answers1

1

The best way is using a single external "minified" CSS file for all pages. because the browser caches this file and then only the cached version will be loaded in the next load times. so your CSS load speed remains fast. but try to minify it .

Saeed Jamali
  • 1,195
  • 2
  • 7
  • 19