What is the optimal filesize of a JavaScript and CSS files of a websites?
URLs contain CSS files of size over 15 KB. The figure of 15 KB is relatively arbitrary – there is no hard and fast rule as to what constitutes a CSS file that is 'too large'.
This is what this post is about. You'll never stop writing CSS. On the other hand, the functional CSS approach means you will write all the CSS you need, and then you will stop. If you are clever about it, it won't be much larger than 15kb. Ideally you are the designer and it matches your design/pattern library.
To minify CSS, try CSSNano and csso. To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
It depends on what is your website supposed to do. If it is a small blog and you need, say, 3000 lines of CSS, that is probably too much. If it is an online store with multiple sections and a complicated layout, it might not be enough. It depends on your needs.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With