1

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"?
2
  • The production build of jquery 2 is only about 84kb without gzip Apr 29, 2016 at 5:13
  • @marvinhagemeister I didn't know about that. But still we usually have to add a lot of other frameworks and font files like, animate.css, fontawesome.css etc.
    – user31782
    Apr 29, 2016 at 5:19

3 Answers 3

5

Let's answer each one of your questions:

Does using frameworks make the website heavy and increase load on server?

frameworks usage often makes site heavier (than custom, vanilla code), not heavy... the main issue with the frameworks is the overbloat.... having a lot of code which you won't use in your site... hopefully, most frameworks have customizers to just add the features you need. Frameworks usage is a personal choice, and, as every 3rd party tool, often came along with trade-offs, for example, you take a framework which will add some Kb to the site, but project delivery will be earlier, or with better responsive features, etc.

Is their any way with which the user agent would download only those portions of the framework which have been used by the frameworks? 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?

Quick answer, no... user agent doesn't analyze what's going to be used or not, and that applies for both CSS and JS... the closest options is to use customizer for the framework (so you get the features for your site). At the JS area, if you just need small features, you could use another library like Zepto, which can fulfill your needs with a smaller size. Another good practice is to use CDN for 3rd party libraries.. that way there would be a good chance user agent has the library cached.

Are svg files lighter than jpg or png files?

Not always, but in most cases, yes... in web dev it is very important to have the proper image format for each case... SVG images has also the advantage of being fully resizable, looking crispy on a mobile phone or a computer... I'd recommend not only for the logo, but every vector-nature image.

Finally do clients really care about this?

Most clients worry for due date over byte size of final project... Most would be delight that you built it "the best way possible", if you shown a cheaper and expensive option, most clients will prefer the cheapest, with current internet speed, some Kb here won't make them lose sleep.

If you want to take a look to some framework customizers:

2
  • Recently I've been looking at some lighter frameworks. I found Skelton for css very interesting. Because I only need the Grid layout for responsive design. Rest of the css doesn't take too much time. I also found Backbone for javascript. I think we should should lighter frameworks instead of pure custom programming, if the client asks for lighter website.
    – user31782
    Apr 29, 2016 at 5:41
  • Of course, that's another option instead of customizing a framework, looking for smaller options.... there are several out there with lightweight premise on mind... give a look to thisisdallas.github.io/Simple-Grid - arnaudleray.github.io/pocketgrid - mincss.com - imperavi.com/kube too
    – Jesus Lugo
    Apr 29, 2016 at 5:50
0
  1. You can use CDN's.

  2. Svg's are lighter and recommended for logo's.

  3. Doesn't make any difference to the customer until you fulfill the requirements.

4
  • But using CDN will release load only from the server; the website will still be heavy for the visitors.
    – user31782
    Apr 29, 2016 at 5:17
  • No.You can go through this link for more info-sitepoint.com/7-reasons-to-use-a-cdn
    – Abhay Naik
    Apr 29, 2016 at 5:20
  • I know about CDN. The website will remain heavy to visitors if we use frameworks. The <link> files are all downloaded in user agent's memory when we open a website. You can check this by saving a webpage.
    – user31782
    Apr 29, 2016 at 5:24
  • Yes. But using frameworks will save time. Otherwise, if you don't have time restriction, writing your own css is better.
    – Abhay Naik
    Apr 29, 2016 at 5:29
0

A customer will always concerned about the speed of your website, it is an inevitable thing. Google also concerned about the loading time of your website, if you are slow you will be penalized in the search.

It is best to move the images PNG to SVG, there is a big difference. SVG has a huge quality and occupies the entire space, its charging time is very fast. Also you can compress JS, CSS and HTML files. You can also compress image files

You will also limit the charging time if your JS files go before the end tag </ body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.