How do I know if my js/CSS files is too huge? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts a开发者_运维问答nd citations by editing this post.

Closed 6 years ago.

Improve this question

What is the optimal filesize of a JavaScript and CSS files of a websites?

---

Zero bytes. It sounds facetious, but there's no such thing as an "optimal" file size. The bigger it is, the longer it will take your page to render. How fast is the connection to your web site for your visitors? If it's a video-oriented site, for example, it's probably relatively fast since people with 64 kbps modems aren't going to be trying to stream anything that large. If it's a simple text site displaying information to satellite users in Zimbabwe, it might be quite slow.

So let's imagine that the average speed is 1.5 Mbps. Realistically, halve that to 750 Kbps. That's about 94 KBps. So if your CSS file is 50 KB and your javascript file is 50 KB, it will take a little over one second to download them for your visitor. Is your site highly interactive, with users expected to click around quickly from one thing to another? If so, then that once second delay could be extremely irritating. If not, then it might be perfectly reasonable.

If you find your file size getting too large, you might want to consider looking at some "minifying" utilities; these are utilities that will take your code, replace variable names ("my_descriptive_variable") with shorter names ("a"), remove whitespace and comments, etc. Sometimes these utilities can reduce your code to 10% of what it was before.

Ultimately, though, "optimal" is completely subjective. Try designing minimal script/CSS files, add a bunch of KB of comments to them, and load your page on low-end connections until you consider it too slow. That will give you a pretty good idea of what your upper limit should be.

---

The smaller your external files the better.

But perhaps more important than having a smaller size is having fewer separate resources, meaning fewer HTTP requests. For example, a single 1MB file often loads faster than ten 100KB files. You're better off when you combine multiple CSS (or JavaScript, image, etc.) files into a single one.

---

The one thing you really want to take advantage of, though, is cacheing. So put all your shared utilities and styles into one file, minify that, and include it on every page. Most modern browsers will download it only once, and download it quickly (being minified). Then, minify the page-specific ones also and you're done.

---

The total size of a page while it is being viewed by the user should be approx ~100kb. This makes it easier for the user view and Search Engines to crawl your website.

The concept of "page size" is defined as the sum of the file sizes for all the elements that make up a page, including the defining HTML file as well as all embedded objects (e.g., image files with GIF and JPG pictures). It is possible to get away with page designs that have larger page sizes as long as the HTML file is small and is coded to reduce the browser's rendering time.

---

Typically your Javascript file should be less than 25kb and your CSS file should be less than 10kb, the smaller the better, these numbers will vary depending on resource and items. Sometimes this is not possible but you can minimize whitespace (spaces, returns and removing comments). Ideally each line should be one style definition in your CSS and your Javascript should be beautified (redundant code removed and code that is used over and over to be put in functions) and minimized to be on one line if possible.

Typically your CSS should be loaded in the head of the page and the JS right before the closing body tag. This is so the page can still load while waiting for the CSS or JS to load. Most browsers and servers will only load about 4 resources from one server at a time. If possible you can seperate your resources over multiple servers/subdomains to create asynchronous loading.

The asynchronous loading applies to all aspects of a webpage; images, CSS, JS, and html. All my knowledge has been collected and learned from working on sites for over 10 years.