Friday, 17 January 2014

Maximum concurrent connections to the same domain for browsers

Do you surprise when I told you that there is a limit on how many parallel connections that a browser can make to the same domain?

Maximum concurrent connections to the same domain

Don't be too surprise if you never heard about it as I have seen many web developers missed this crucial point. If you want to have quick figure, this table is from the book PROFESSIONAL Website Performance: OPTIMIZING THE FRONT END AND THE BACK END by Peter Smith


The impact of this limit 

How this limit will affect your web page? The answer is a lot. Unless you let user load a static page without any images, css, javascript at all, other while, all these resources need to queue and compete for the connections available to be downloaded. If you take into account that some of the resources depend on other resource to be loaded first, then it is easy to realize that this limit can greatly affect page load time.

Let analyse further on how browser load a webpage. To illustrate, I used Chrome v34 to load one article of my blog (10 ideas to improve Eclipse IDE usability). I prefer Chrome over Firebug because its Developer Tool has the best visualization of page loading. Here is how it looks like



 I already crop the loading page but you should still see a lot of requests being made. Don't be scared by the complex picture, I just want to emphasize that even a simple webpage need many HTTP requests to load. For this case, I can count of 52 requests, including css, images, javascript, AJAX, html.

If you focus on the right side of the picture, you can notice that Chrome did a decent job of highlighting different kind of resources with different colours and also manage to capture the timeline of requests.

Let see what Chrome told us about this webpage. At first step, Chrome load the main page and spend a very short time parsing it. After reading the main page, Chrome send a total of 8 parallel requests almost at the same times to load images, css and javascript. For now, we know that Chrome v34 can send up to 8 concurrent request to a domain. Still, 8 requests are not enough to load the webpage and you can see that some more requests are being sent after having available connection.

If you still want to dig further, then we can see that there are two javascripts and one AJAX call (the 3 requests at the bottom) are only being sent after one of the javascript is loaded. It can be explained as the execution of javascript trigger some more requests. To simplify the situation, I create this simple flowchart


I tried my best to follow colour convention of Chrome (green for css, purple for images and light blue for AJAX and html). Here is the loading agenda

  • Load landing page html
  • Load resources for landing pages
  • Execute javascript, trigger 2 API calls to load comments and followers.
  • Each comment and follower loaded will trigger avatar loading.
  • ...
So, in minimum you have 4 phases of loading webpage and each phase depend on the result of earlier phase. However, due to the limit of 8 maximum parallel requests, one phase can be split into 2 or more smaller phases as some requests are waiting for available connection. Imagine what will happen if this webpage is loaded with IE6 (2 parallel connections, or minimum 26 rounds of loading for 52 requests)?


Why browsers have this limit?

You may ask if this limit can have such a great impact to performance, then why don't browser give us a higher limit so that user can enjoy better browsing experience. However, most of the well-known browsers choose not to grant your wish, so that the server will not be overloaded by small amount of browsers and end up classifying user as DDOS attacker.

In the past, the common limit is only 2 connections. This may be sufficient in the beginning day of web pages as most of the contents are delivered in a single page load. However, it soon become the bottleneck when css, javascript getting popular. Because of this, you can notice the trend to increase this limit for modern browsers. Some browsers even allow you to modify this value (Opera) but it is better not to set it too high unless you want to load test the server.

How to handle this limit?

This limit will not cause slowness in your website if you manage your resource well and not hitting the limit. When your page is first loaded, there is a first request which contain html content. When the browser process html content, it spawn more requests to load resource like css, images, js. It also execute javascript and send Ajax requests to server as you instruct it to do.

Fortunately, static resources can be cached and only be downloaded the first time. If it cause slowness, it happen only on first page load and is still tolerable. It is not rare that user will see a page frame loaded first and some pictures slowly appear later later. If you feel that your resources is too fragmented and consume too many requests, there are some tools available that compress and let browser load all resources in single request (UglifyJS, Rhino, YUI Compressor, ...)

Lack of control on Ajax requests cause more severe problem. I would like to share some sample of poor design that cause slowness on page loading.

1. Loading page content with many Ajax requests

This approach is quite popular because it let user feel the progress of page loading and can enjoy some important parts of contents while waiting for the rest of contents to be loaded. There is nothing wrong with this but thing is getting worse when you need more requests to load content that the browser can supply you with. Let say if you create 12 Ajax requests but your browser limit is 6, in best case scenario, you still need to load resources in two batches. It is still not too bad if these 12 requests are not nesting or consecutive executed. Then browser can make use of all available connections to serve the pending requests. Worse situation happen when one request is initiated in another request callback (nested Ajax requests). If this happen, your webpage is slowed down by your design rather than by browser limit.

Few years ago,  I took over one project, which is haunted with performance issue. There are many factors that causing the slowness but one concern is too many Ajax requests. I opened browser in debug mode and found more than 6 requests being sent to servers to load different parts of page. Moreover, it is getting worse as the project is delivered by teams from different continents, different time zone. Features are developed in parallel and the developer working on a feature conveniently add server endpoint and Ajax request to let work done. Worrying that the situation is going out of control, we decided to shift the direction of development. The original design is like this:



For most of Ajax requests, the response return JSON model of data. Then, the Knock-out framework will do the binding of html controls with models. We do not face the nested requests issue here but the loading time cannot be faster because of browser limit and many http threads is consumed to serve a single page load. One more problem is the lack of caching. The page contents are pretty static with minimal customization on some parts of webpages.

After consideration, we decided to do a reset to the number of requests by generating page contents in one page. However, if you do not do it properly, it may become like this:



This is even worse than original design. It is more or less equal to having the limit of 1 connection to server and all the requests are handled one by one.

The proper way to achieve similar performance use Aysnc Programming



Each promise can be executed in a separate thread (not http thread) and the response is returned when all the promises are completed. We also apply caching to all of the services to ensure the service to return quickly. With the new design, the page response is faster and server capacity is improved as well.

2. Fail to manage the request queue

When you make a Ajax request in javascript and browser do not have any available connection to serve your request, it will temporarily put the request to the request queue. Disaster happens when developers fail to manage the request queue properly. This often happens with rich client application. Rich client application functions more like an application than a web page. Clicking on button should not trigger loading new web address. Instead, the page content is uploaded with result of Ajax requests. The common mistake is to let new requests to be created when you have not managed to clean up the existing requests in queue.

I have worked on a web application that make more than 10 Ajax requests when user change value of a first level combo box. Imagine what happen if user change the value of the combo box 10 times consecutively without any break in between? There will be 100 Ajax requests go to request queue and your page seem hanging for a few minutes. This is an intermittent issue because it only happen if user manage to create Ajax requests faster than the browser can handle.

The solution is simple, you have two options here. For the first option, forget about rich client application, refreshing the whole page to load new contents. To persist the value of the combo box, store it as a hash attached to the current URL address. In this case, browser will clear up the queue. The second option is even simpler, block user from making change to combo box if the queue is not yet cleared. To avoid bad experience, you can show the loading bar while disabling the combo box.

3. Nesting of Ajax requests

I have never seen a business requirement for nesting Ajax request. Most of the time I saw nesting request, it was design mistake. For example, if you are a lazy developer and you need to load flags for every country in the world, sorting by continent. Disaster happen when you decide to write code this way:
  • Load the continent list
  • For each continent, loading countries
Assume the world have 5 continents, then you spawn 1 + 5 = 6 requests. This is not necessary as you can return a complex data structure that contain all of these information. Making requests is expensive, making nesting request is very expensive, using Facade pattern to get what you want in a single call is the way to go. 

186 comments:

  1. I just needed to record a speedy word to express profound gratitude to you for those magnificent tips and clues you are appearing on this site.
    safety course in chennai
    nebosh course in chennai

    ReplyDelete
  2. Thanks for sharing such a wonderful blog on Machine learning.This blog contains so much data about Machine learning ,like if anyone who is searching for the Machine learning data will easily grab the knowledge of Machine learning from this .Requested you to please keep sharing these type of useful content so that other can get benefit from your shared content.
    Thanks and Regards,
    Top institutes for machine learning in chennai
    best machine learning institute in chennai
    artificial intelligence and machine learning course in chennai

    ReplyDelete
  3. Thank you for excellent article.You made an article that is interesting.
    Tavera car for rent in coimbatore|Indica car for rent in coimbatore|innova car for rent in coimbatore|mini bus for rent in coimbatore|tempo traveller for rent in coimbatore|kodaikanal tour package from chennai

    Keep on the good work and write more article like this...

    Great work !!!!Congratulations for this blog

    ReplyDelete
  4. Thanks for sharing this information and keep updating us.it will really helpful for Career Growth. Really it was an awesome article.best fashion photographer in jalandhar

    ReplyDelete
  5. Hey, very nice site. I came across this on Google, and I am stoked that I did. I will definitely be coming back here more often. Wish I could add to the conversation and bring a bit more to the table, but am just taking in as much info as I can at the moment. Thanks .

    DedicatedHosting4u.com


    ReplyDelete
  6. phd projects in chennaicenters provide for bulk best final year Cse, ece based IEEE me, mtech, be, BTech, MSC, mca, ms, MBA, BSC, BCA, mini, Ph.D., PHP, diploma project in Chennai for Engineering students in java, dot net, android, VLSI, Matlab, robotics, raspberry pi, python, embedded system, Iot, and Arduino . We are one of the leading IEEE project Center in Chennai.

    ReplyDelete
  7. Thanks for sharing this post!
    That was highly informative

    Melbourne Web Developer

    ReplyDelete
  8. Thank you for sharing your article and please updating.

    AngularJS interview questions and answers/angularjs 4 interview questions/jquery angularjs interview questions/angularjs 6 interview questions and answers/<a href="http://www.techtutorial.in/>angularjs interview questions</a/>

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Very useful tutorials and very easy to understand.
    hadoop interview questions
    Hadoop interview questions for experienced
    Hadoop interview questions for freshers
    top 100 hadoop interview questions
    frequently asked hadoop interview questions
    hadoop interview questions and answers for freshers
    hadoop interview questions and answers pdf
    hadoop interview questions and answers
    hadoop interview questions and answers for experienced
    hadoop interview questions and answers for testers
    hadoop interview questions and answers pdf download

    ReplyDelete
  11. Wow it is really wonderful and awesome thus it is very much useful for me to understand many concepts and helped me a lot. it is really explainable very well and i got more information from your blog.
    Kindly visit us @
    Top HIV Hospital in India | Best AIDS Hospital in India
    HIV AIDS Treatment in Bangalore | HIV Specialist in Bangalore
    Best HIV Doctor in India
    Cure best blood cancer treatment in Tamilnadu

    ReplyDelete
  12. If you're searching for distributors of wholesale clothing in India, madhusudan is a famous textile wholesale and online shopping on the surat wholesale market.Buy Wholesale Kurti Suit Saree in surat

    ReplyDelete
  13. Excellent Blog. I really want to admire the quality of this post. I like the way of your presentation of ideas, views and valuable content. No doubt you are doing great work. I’ll be waiting for your next post. Thanks .Keep it up!
    Kindly visit us @
    Luxury Boxes
    Premium Packaging
    Luxury Candles Box
    Earphone Packaging Box
    Wireless Headphone Box
    Innovative Packaging Boxes
    Wedding gift box
    Leather Bag Packaging Box
    Cosmetics Packaging Box
    Luxury Chocolate Boxes

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This is a nice Site to watch out for and we provided information on
    vidmate make sure you can check it out and keep on visiting our Site.

    ReplyDelete

  16. This is a nice Site to watch out for and we provided information on
    vidmate make sure you can check it out and keep on visiting our Site

    ReplyDelete
  17. This is a nice Site to watch out for and we provided information on
    vidmate make sure you can check it out and keep on visiting our Site.

    ReplyDelete
  18. Vidmate is one of the best known applications currently available for downloading videos and songs from online services like Vimeo, Dailymotion, YouTube, Instagram, FunnyorDie, Tumblr, Soundcloud, Metacafe, and tons of other multimedia portals. With this highly recommended app, you’ll get to download from practically any video site.A free application for Windows users that allows you to download online

    videos
    An entertaining application
    Vidmate latest update in pie
    Amazing features of Vidmate
    How to download movies from internet,
    Watching movie is good for time pass ,
    Watch movies at home,
    How to download movies through "Vidmate".

    ReplyDelete
  19. It is a very popular application which provides you to download videos, songs, mashups, remixes, trailers in your mobile , and off course in any quality. It contains many videos and of many types .
    like funny videos, motivational videos, songs lyrics, trailer and many more.
    Want to watch movie in slow connection,
    Vidmate app,
    Vidmate app to watch videos,
    vidmate,
    Vidmate Features,
    Vidmate Download,
    Multi sSource Downloader,
    cm security antivirus,
    leaked Movie Online,
    Why do people prefer Vidmate App.

    ReplyDelete
  20. This is a nice Site to watch out for and we provided information on
    vidmate make sure you can check it out and keep on visiting our Site.

    ReplyDelete
  21. Download and install Vidmate App which is the best HD video downloader software available for Android. Get free latest HD movies, songs, and your favorite TV shows.

    ReplyDelete
  22. Download and install Vidmate App which is the best HD video downloader software available for Android. Get free latest HD movies, songs, and your favorite TV shows.

    ReplyDelete
  23. Download and install Vidmate App which is the best HD video downloader software available for Android. Get free latest HD movies, songs, and your favorite TV shows.

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Дээд чанар бол зүгээр л( đá ruby thiên nhiên ) санаатай биш юм. Энэ нь өндөр( đá ruby nam phi ) түвшний төвлөрөл, тусгай хүчин( Đá Sapphire ) чармайлт, ухаалаг ( đá sapphire hợp mệnh gì )чиг баримжаа, чадварлаг туршлага, ( đá ruby đỏ )саад тотгорыг даван туулах( bán đá sapphire thô ) боломжийг хардаг.

    ReplyDelete
  26. Thanks for Sharing this Great information worth reading this article. Leverage SharePoint Features from veelead solutions

    ReplyDelete
  27. Nếu bạn đang là một tín đồ của những kiểu balo xinh xắn dành cho phái nữ. Đặc biệt với hơn 5.000+ mẫu mã balo nu nhỏ xinh, bạn có thể lựa cho mình một balo đi học, đi làm văn phòng và đi chơi đều được

    ReplyDelete
  28. https://hoto.vn/danh-muc/balo/balo-nu/

    ReplyDelete
  29. <a href="https://vidmate.vin/

    ReplyDelete
  30. Looking for best English to Tamil Translation tool online, make use of our site to enjoy Tamil typing and directly share on your social media handle. Tamil Novels Free Download

    ReplyDelete
  31. Thanks for sharing this information!!!!!!!!
    Summer camps and extra-curricular activities gives kids’ exposure, build self-confidence and esteem, a safe environment and a place to build social skills and make new friends. Kids are challenged and encouraged to grow every day in such camps. In a way, they get to reinvent themselves at camp. So if you are looking for summer camp in Edison NJ, then Stem Academy is the best option for you.

    ReplyDelete
  32. Software Development Company We specialize in Blockchain development, Artificial Intelligence, DevOps, Mobile App development, Web App development and all your customised online solutions. Get best impression at online by our services, we are familiar for cost effectiveness, quality, delivery and support.

    ReplyDelete
  33. Good Post. I like your blog. Thanks for Sharing
    Ping Speed Test

    ReplyDelete
  34. Thanks for provide great informatic and looking beautiful blog, really nice required information & the things i never imagined and i would request, wright more blog and blog post like that for us. Thanks you once agianMarriage certificate in delhi
    Marriage certificate in ghaziabad
    Marriage registration in gurgaon
    Marriage registration in noida
    special marriage act
    Marriage certificate online
    Marriage certificate in mumbai
    Marriage certificate in faridabad
    Marriage certificate in bangalore
    Marriage certificate in hyderabad thanks once again to all.

    ReplyDelete
  35. Dear Blogger

    Awesome Post|| Viaggio Rajasthan offers great deals on all Delhi Agra Jaipur Tour Packages. Book 5 nights 6 Days Golden Triangle India Tour for cultural exploration in three cities with the best packages for Golden Triangle Tour by car. Traverse through the three cities with the planned 6 days’ itinerary for Golden Triangle in India.
    Rajasthan Tourism holiday packages
    South India Tour Packages

    Thanks and best regards
    http://www.viaggiorajasthan.it
    ☎+91-9875804575

    ReplyDelete
  36. Дээд чанар бол зүгээр л( tourmaline xanh ) санаатай биш юм. Энэ нь өндөр( Nhẫn đá tourmaline ) түвшний төвлөрөл, тусгай хүчин( Đá Sapphire ) чармайлт, ухаалаг ( đá sapphire hợp mệnh gì )чиг баримжаа, чадварлаг туршлага, ( vòng đá sapphire )саад тотгорыг даван туулах( đá tourmaline đen ) боломжийг хардаг.

    ReplyDelete
  37. I am happy after reading your post that you have posted in this blog. Thanks for this wonderful post and hoping to post more of this. I am looking for your next update.
    Home Tutors in Delhi | Home Tuition Services

    ReplyDelete
  38. Hey buddy, Thanks for sharing your programming knowledge. To know recent trends Visit Cognex Technology

    ReplyDelete
  39. Thank you for providing this information. I am sure it would be helpful for many seekers. Home tutors are provided by TheTuitionTeacher in Delhi and Lucknow.
    Tuition Service Lucknow | Home Tuition Service

    ReplyDelete
  40. Soma pill is very effective as a painkiller that helps us to get effective relief from pain. This cannot cure pain. Yet when it is taken with proper rest, it can offer you effective relief from pain.
    This painkiller can offer you relief from any kind of pain. But Soma 350 mg is best in treating acute pain. Acute pain is a type of short-term pain which is sharp in nature. Buy Soma 350 mg online to get relief from your acute pain.

    https://globalonlinepills.com/product/soma-350-mg/


    Buy Soma 350 mg
    Soma Pill
    Buy Soma 350 mg online



    Buy Soma 350 mg online
    Soma Pill
    Buy Soma 350 mg

    ReplyDelete
  41. Software Development Company We specialize in Blockchain development, Artificial Intelligence, DevOps, Mobile App development, Web App development and all your customised online solutions. Get best impression at online by our services, we are familiar for cost effectiveness, quality, delivery and support.
    Blockchain Development Company Are you looking for a blockchain developer to meet your organization? Then it makes good sense to hire our expertized blockchain developer. Blockchain has become the most decentralized topic in different organizations.This technology creates a new doorway for payment which is exceedingly secure. It is a magnificent form of Database storage system useful to record information or data. This information can be automatically stored with the help of the cryptography mechanism furnishing more secure data. We will help you to develop and attach to a private blockchain where features that will be track and verify transaction and communication between different departments and stakeholders. The blockchain technology that supports Digital currencies and cryptocurrencies.

    ReplyDelete
  42. Nice blog, it's so knowledgeable, informative, and good looking site. I appreciate your hard work. Good job. Thank you for this wonderful sharing with us. Keep Sharing.
    home tutor in Indore | Home Tutor near me

    ReplyDelete
  43. You first need too discover a market, after which develop your web site to some
    Situs judi slots

    ReplyDelete
  44. Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossip and internet stuff and this is really irritating. A good site with interesting content, that’s what I need. agen togel online

    ReplyDelete
  45. thanks for your information.it's really nice and useful.thanks for it i got good knowledge.keep updating.web design company in velacheryweb design company in chennai

    ReplyDelete
  46. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to development very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    reactjs online training

    ReplyDelete
  47. Daftar situs judi online terpercaya dan terbaik di indonesia gabung sekarang....
    luxury138
    luxury138
    qq188
    qq188
    qq288
    qq288
    Pokerace99
    poker88
    Slot online
    betfortuna

    ReplyDelete
  48. Grow sale india classified ads website Buy&sell find just about anything

    post free classified ads in india

    ReplyDelete
  49. Way cool! Some extremely valid points! I appreciate you penning this post plus the rest of the site is very good.

    selenium training in Bangalore

    Selenium Courses in Bangalore

    best selenium training institute in Bangalore

    ReplyDelete
  50. Nice article.. Thank u for your sharing..

    http://178.128.96.243

    ReplyDelete
  51. Nice Sharing

    https://178.128.96.243

    ReplyDelete
  52. How to leverage browser cache for fast page loading? also read this blog

    ReplyDelete
  53. Aran’s traditional milk is pure A2 milk, Nattu Kozhi Muttai Chennai, Organic Milk Chennai, A2 Milk Chennai, Cow Milk Chennai, Naatu Maatu Paal Chennai Chennai hand-milked in a traditional way from healthy native Indian breeds and reaches your doorstep.

    Milking Process
    The milking is done from indigenous cows by using hands. No machines are used in order to ensure no harm is done to the cows

    Packing Methods
    As soon as milking is done, the milk is filtered and packed in the FSSAI certified place with hairnets and gloves on this packing is done into the 50 microns wrappers which are not reactive to the food items. Again, no machines are used for packing to contribute to the environment, as they consume more water and power.

    Milk Delivery
    As soon as packing and quality check are done, the milk packets are collected and brought for delivery.

    ReplyDelete
  54. I have read this article it is really helpful for getting amazing tips on related topic. You have described everything in a professional way.Web Designing Company in Bangalore | Web Development Company In Bangalore | Website Development Company in Bangalore | Web Design Company In Bangalore.

    ReplyDelete
  55. Pakarbet Merupakan Situs Judi Online Terpercaya dengan 1 userid bisa bermain semua games seperti sportsbook, live casino, slot online, poker online
    pokerace99
    afapoker
    afapoker
    jayabola
    qq338
    qq338
    qq39bet
    qq39bet
    idnplay

    ReplyDelete