All geek questions in one place

Combine Javascript / CSS in one file or two for better optimization

I am currently working on a C # application that minimizes and combines javascript / css asynchronously in the background to load onto a completed page. After creating a merged file with the minimum values, they are saved on disk, and all subsequent requests to the page will load this file.

The reason for this is the performance help on the page. I worry though, if the combined file is large, for example 200 kb. Would it be better to merge into 2 files, if that were the case, and have 2 separate HTTP requests? The file will be copied and cached.

+4
source share
3 answers

Well, there are two main schools of thought.

Firstly, it reduces the number of HTTP requests as much as possible. This will say to reduce ALL CSS files to one monster. It’s better to download 400kb once than several 50kb files. (and the same for JS).

Another is to combine where necessary, but no further. If you have 100 KB of CSS that is needed in only one section of the site, there is no reason to slow down the rest of the site for your users. This is especially true for JS, since there are many sites on every page that include jQuery (for example), because 10% of this site uses it.

I take on this combination of the two. If I use the code for about 50% of the site or more, I include it in the "main" file. If the code is small (less than 5 kb or 10 kb), I include it in the main file. Otherwise, I split it into separate files.

All this reason is to improve user experience. You can make gigantic brute force and load all css and JS in 2 corresponding files for each page load (of course, this will be cached). But if the landing page does not require 50% of this code, you slow down the page with the greatest impact without extra effort.

And therefore, I believe that the best solution to this problem is to analyze the situation in a person. They can look for duplicates and abstractions. They can look at the needs of the page / site and determine the best scenario. If you do not want your program to do this (which would be difficult), this will not give the best result (but again, there is a difference between good and good enough) ...

What is my $ 0.02 anyway ...

+8
source

It is best to reduce the number of files, this is due to the fact that you can only have __ queries for each domain name, while doing a simultaneous download. Therefore, if you divide it into two queries, you use more of this allocation than you need.

In general, you really want to reduce the total number of queries.

+2
source

Google 's page speed documentation recommends the following:

Combine external javascript

Recommendations

Partition files are optimal. Here are some rules of thumb for combining your JavaScript files during production:

  • Divide JavaScript into 2 files: one JS containing the minimum code you need to make a page at startup; and one JS file containing the code is not required until the page has finished loading.
  • Serve as several JavaScript files from the <head> as possible document, and keep the size of these files to a minimum.
  • Serve JavaScript of a rarely visited component in its own file.
  • File only when this component is requested by the user. For small snippets of JavaScript code that should not be cached, consider the attachment that the JavaScript in the HTML page itself.

Combine external CSS

Recommendations

  • Divide the CSS into 2 files each: one CSS file containing the minimum code needed to render the page at startup; and one CSS file containing code that is not needed until the page has finished loading.
  • Serve CSS of a rarely visited component in its own file. Serve the file only when the user requests this component.
  • For CSS that should not be cached, consider embedding them.
  • Do not use CSS @import from a CSS file.
+2
source

Source: https://habr.com/ru/post/1336839/

More articles:


All Articles