Small question regarding speed of the page
Hi, just a small question,
if I write css and I don't specify a class, so the css doesn't do anything,
does it make my site heavier?
Like if I write a ton of css but I won't use it, does that make a difference?
2 Replies
the file size will get bigger so it would make a difference when loading the page
To expand on Mannix's reply:
Yes, file size matters. Even if the rule in your CSS file isn't used the code is still shipped to the browser and thus needs to be downloaded and parsed before execution.
Another thing to be cognizant of is the
14kb rule: the first HTTP packet will carry up to 14kb of info. The second packet will carry 28kb of info (double the first). After that the packet size is determined by network speed, bandwidth, latency, etc. So for the first two packets you can expect 42kb to be transferred.
Source: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#tcp_slow_start_14kb_rule
The bigger the file, the more round trips it takes to get the full page. This is why large CSS (and JS!) frameworks are bad for performance and those with poor connections/lower-end devices: it takes noticeably longer to download and parse all that information.
One thing that makes it a bit easier is what's called "tree shaking": it's a practice during pre-processing that removes un-used CSS/JS code before shipping to production.
This is also why minifiers are popular! Removing all that unneeded (for a computer) whitespace and transforming long, human-readable names into shorter variable names makes the file size a lot smaller.