Recently I made a sample website[1] from scratch. The website's main page consists of merely 168KB out of which the image is 138KB. So the programming stuff includes 168 - 138 = 30KB
only. This 30KB is divided as:
index.html -- 14KB
style.css -- 16KB
--------------------
Total -- 30KB
Now Suppose instead of making the website from scratch -- I make it with frameworks then apart from the 138 KB image the programming stuff would include:
bootstrap.min.css -- 119 KB
jquery-2.2.2.js -- 253 KB
index.html -- 14 KB
styke.css -- 16 KB
-----------------------------
Total -- 402 KB
Lets call the website made from scratch WB-1 and the other on WB-2. Suppose a user from a developing country using 2G network or bradband having a speed of 32KB/s tries to access WB-1. The website would take nearly 5 seconds to open. Another user from the same country with same speed tries to access WB-2. It will take him nearly 17 seconds to open the full page. So basically WB-2 is 3 times slower than WB-1. Not only this. Suppose WB-1 is hosted by server S-1 and WB-2 is hosted by server S-2. Also suppose every month 10,000 visitors visit WB-1 and 10,000 visit WB-2. Then S-1 will have to transmit 168 * 10000 = 1.68 GB
data and S-2 will have to transmit 568 * 10000 = 5.68 GB
data. So now S-2 has to have 5 times larger bandwidth than that of S-1.
Question:
- Does using frameworks make the website heavy and increase load on server?
- Is their any way with which the user agent would download only those portions of the framework which have been used within the html code? That is suppose I use only 100 class from bootstrap then instead of downloading the whole boorstrap.min.css the user agent would just parse the html and download those classes which have been used in the html code? Similarly for jquery.js the user agent would download only those functions which have been used instead of downloading the whole jquery framework?
- Are svg files lighter than jpg or png files? That is, is it worth to convert company's logo from usual raster image to vector image?
- Finally do clients really care about this? That is would clients say, "ok I'll pay you higher if you make my website lighter with your custom programming"?
animate.css
,fontawesome.css
etc.