Geek Answers Handbook

I need your opinion on CSS optimization

I've been reading a lot of CSS optimizations lately, and I notice that almost every article recommends putting ALL of your styles in one file.

I understand what is behind it, but is it practical? I mean, Im works in a rather large project, and now I have a huge amount of styles. I think it will be very difficult to maintain everything in one file.

My question is: is the performance increase so large as to justify the complexity of having everything in ONE file?

Thanks!

Edgar.

UPDATE

To clarify , I'm sure CSS optimization is necessary. In fact, I have a process that minimizes and compresses CSS files, and I do everything I can to not repeat it myself.

I doubt the practice of using one large file and several files.

Let's look at the following example:

My application has several modules, for example: contacts, projects, accounting, HHRR, etc.

I have one CSS file for each module, plus several other common CSS files, such as: reset, layout, forms, etc.

When I use the CONTACTS module, I upload the shared files and the contact.CSS file. I skip the rest of the CSS because they are not needed.

Now, to math, let's say that each CSS file is about 10 KB,

My current way:

  • About 50kb in shared files About 5
  • uploads request in public folders
  • About 10k in One client file
  • download request.

This is only about 60 kilobytes and 6 download requests.

Single File Method:

  • About 120kb (all files together, including styles that are not currently in use) in one file
  • One download request.

So, in your opinion, the profitable profit from using one large file and only one download request justifies all the extra work on implementing the method of combining all files and all these problems?

+4
source share
5 answers

Keep them separate for development. CSS can quickly become a nightmare. For production, you must build a process to combine, minimize and compress all your files into one.

+3
source

Do both. Develop in multiple files, and then just follow a process that combines, compresses and reduces (removes comments, spaces, etc.) into a single file during deployment.

+1
source

It’s a great idea to compress your CSS as it saves bytes and speeds up page loading.

When you develop your site, of course, do not reduce the code. This is pointless since your local web server is running as fast as it can be. But when you deploy your site, reduce the code. This saves your bandwidth and makes your site more responsive to the end user.

Here is an example CSS fragment that I would use:

/* 33 characters */ body { background-color: red; }

When compressed, it is slightly smaller ( 81% original size):

 /* 27 characters */ body{background-color:red;}

You can make a script to compress CSS, since you should not do it manually. Google has "css minifiers" and I'm sure you will find a ton.

+1
source

In fact, this is not as strong as the bandwidth gain. Each file that the browser should receive contains about 200 additional bytes. You may have a program that combines several CSS files into one for deployment, but most CSS minifiers will do this for you.

0
source

I am surprised that no one mentions one very obvious reason for this.

On a large site you will have many elements to download, especially visual elements - images. Think about how many files are uploaded by your site. You can download a limited number of files from one domain at a time. And CSS brings some background images and sprites. It makes no sense to upload 2, 3 or more CSS files.

Mineralization, as Blender suggests, is a bonus to your bandwidth. 2K notes more for a single user, but multiplied by 1,000 or 10,000 - that's a lot. And if you minimize CSS, what about HTML? I haven’t seen so many miniature HTML pages!

0
source

More articles:


All Articles