{"id":691,"date":"2015-12-01T12:42:00","date_gmt":"2015-12-01T12:42:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=691"},"modified":"2025-02-25T14:15:08","modified_gmt":"2025-02-25T14:15:08","slug":"leveraging-http-2-with-asp-net","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/leveraging-http-2-with-asp-net","title":{"rendered":"Leveraging HTTP\/2 with ASP.NET 4.6 and IIS10"},"content":{"rendered":"\n<p>In the last decade, the Web has taken multiple long strides. From basic HTML, web pages have developed a richer look and feel and are getting more intuitive, user-friendly, and glossier every day.<\/p>\n\n\n\n<p>The key contributors to these changes are new and revamped technologies supported by the latest hardware and better internet connectivity. However, performance has been a concern with web applications since the beginning.<\/p>\n\n\n\n<p>In the last few years, the eruption of JavaScript libraries, CSS libraries, and plugins made it possible for each page to access many JavaScript, CSS, images, and other resource files. There are many scenarios where a page initiates over 50 HTTP requests to the server. Each request creates a new TCP connection to the server, retrieves the file, and closes the connection. This means more than 50 TCP connections are made to the server. Creating and disposing of each connection is a heavy process, and apart from that, many browsers also limit the number of concurrent connections, usually from four to eight.<\/p>\n\n\n\n<p>HTTP protocol hasn\u2019t changed much in the last 15 years, either. HTTP1.1, which is used nowadays, was defined in 1997, and since then, the Web has changed a lot. The IETF (Internet Engineering Task Force) understood the new challenges and has worked on this for a while with POCs. Now, they have come up with another new version of the HTTP protocol, called HTTP\/2, which is currently in the standardization process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"what-is-http-2\">What Is HTTP\/2?<\/h2>\n\n\n\n<p>HTTP\/2 is the second major version of the HTTP protocol, which mainly focuses on decreasing latency to improve page load speed. It is based on <i>Google\u2019s SPDY protocol<\/i> and covers the following key items:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Loading multiple requests in single TCP connections in parallel<\/li>\n\n\n\n<li>Enabling compression in HTTP headers<\/li>\n\n\n\n<li>Allowing the server to push content to the client<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"how-does-it-differ-from-earlier-versions\">How Does It Differ From Earlier Versions?<\/h2>\n\n\n\n<p>The initial version of the HTTP design used a new TCP Connection for each request, which involved setting up the connection and other packets, which was very time-consuming. Many changes were done in HTTP 1.1 where pipelining was introduced, which theoretically allows you to send multiple requests in a single connection. Still, the request and response were processed synchronously. HTTP\/2 is based on the SPDY protocol, which opens one TCP connection and uses multiplexing, which allows many requests to be sent simultaneously without waiting for a response. Let\u2019s see it pictorially:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/brijmishra\/3386.Brij_5F00_pic_5F00_1.png\" alt=\" HTTP\/2 is based on the SPDY protocol which opens one TCP connection and uses multiplexing, which allows many requests to be sent in parallel without waiting for the response.\" title=\"HTTP\/2 is based on the SPDY protocol which opens one TCP connection and uses multiplexing, which allows many requests to be sent in parallel without waiting for the response.\"\/><\/figure>\n\n\n\n<p>Apart from that, it also compresses the HTTP Headers and enables the server push as mentioned earlier. We will see how that affects page load in our example below.<i><\/i> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"http-2-in-action-using-asp-net-4-6\">HTTP\/2 In Action Using ASP.NET 4.6<\/h2>\n\n\n\n<p>A typical web page references many different resources like JavaScript files, CSS files, images etc. In the example below, I have created a sample ASP.NET 4.6 empty web forms application using Visual Studio 2015 and added different resources in the solution that reference the same in our web page. I then added a Web form to the application and multiple resources as well \u2013 see below:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head runat=\"server\">\n    &lt;title>HTTP2 Demo using ASP.NET Web forms 4.6&lt;\/title>\n    &lt;!-- CSS resources -->\n    &lt;link href=\"Content\/bootstrap.css\" rel=\"stylesheet\" \/>\n    &lt;link href=\"Content\/bootstrap.min.css\" rel=\"stylesheet\" \/>\n    &lt;link href=\"Content\/Site.css\" rel=\"stylesheet\" \/>\n&lt;\/head>\n&lt;body>\n    &lt;form id=\"form1\" runat=\"server\">\n    &lt;div>\n        &lt;!-- Image resources-->\n        &lt;img src=\"Content\/images\/img1.jpg\" \/>\n        &lt;img src=\"Content\/images\/img2.jpg\" \/>\n         &lt;!-- For demo, there are eight images added, but removed here for brevity-->\n \n    &lt;\/div>\n     &lt;!-- JavaScript file resources -->\n    &lt;script src=\"Scripts\/jquery-1.10.2.js\">&lt;\/script>\n    &lt;script src=\"Scripts\/jquery-1.10.2.min.js\">&lt;\/script>\n   &lt;!-- For demo, total six file added, but removed here for brevity-->\n &lt;\/form>\n&lt;\/body>\n&lt;\/html><\/pre>\n\n\n\n<p>The above page references 19 different resources (3 CSS, 8 Images, 8 JS files) to mock a real time page. After that, I deployed the application on IIS10 on Win Server 2016 (Windows 10 can be used as well). Now it\u2019s time to test the application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"test-results\">Test Results<\/h2>\n\n\n\n<p><span style=\"background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat;\">First I will run this application using HTTP 1.1 and analyze the load time for it. Then we will move to HTTP2 to see the differences. Let&#8217;s run the application and see the network tab of the Developer Toolbar (Most modern browsers provide a Developer Toolbar which can be opened by pressing F12). This will show the number of requests fired for the web page, its wait time, start time, load time and other relevant details.<\/span><b><\/b><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/brijmishra\/4353.Brij_5F00_pic_5F00_2.png\" alt=\" Let's run the application and see the network tab of the Developer Toolbar (Most modern browsers provide a Developer Toolbar which can be opened by pressing F12). \" title=\"Let's run the application and see the network tab of the Developer Toolbar (Most modern browsers provide a Developer Toolbar which can be opened by pressing F12). \"\/><\/figure>\n\n\n\n<p><span style=\"background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat;\">By<span class=\"apple-converted-space\">&nbsp;<\/span>closely<span class=\"apple-converted-space\">&nbsp;<\/span>looking the details in above image, we see that <\/span>it is using the HTTP1.1 protocol<span style=\"background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat;\">, referenced in <\/span>the third column (Protocol). Also<span style=\"background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat;\"> it loaded all the JavaScript, CSS and image files as expected but their start times vary. It is quite obvious that several requests were able to start once previous requests were completed. The last request had to wait around 4.5 seconds due to the limitation on the number of parallel connections from browser. The t<\/span>otal load time for this page is around 9.59 seconds.<\/p>\n\n\n\n<p>Now let\u2019s open the same page by switching the protocol to HTTP2 and see the differences. To do so, we need to change the URL in address bar from <i>HTTP<\/i> to <i>HTTPS<\/i> and reload the page and see the network tab in the Developer Toolbar again:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/brijmishra\/6064.Brij_5F00_pic_5F00_3.png\" alt=\" let\u2019s open the same page by switching the protocol to HTTP2 and see the differences\" title=\"let\u2019s open the same page by switching the protocol to HTTP2 and see the differences\"\/><\/figure>\n\n\n\n<p>Here, the timeline looks completely different, and the requests all started simultaneously. Also, the page&#8217;s load time was reduced by 80%, which is now around 2 seconds. It clearly shows that all the requests were sent at server parallel, which was synchronous in http1.1. The last request has a wait time of only 70ms.<\/p>\n\n\n\n<p>Recently, we used several techniques like bundling and minification, which improve performance, but that has several limitations as well (for example, it is applicable only to JavaScript and CSS files). Each file type must be added in different bundles; even including the duplicate files in one bundle is not recommended. Multiple bundles should be created based on their usage in various application pages. HTTP2 relieves the developer from having to use these features. It resolves these problems, as it makes only one TCP connection and starts downloading all the different resources simultaneously, saving lots of time and removing the developer&#8217;s burden.<\/p>\n\n\n\n<p><i>Note \u2013 Currently, HTTP2 works only on SSL. So I opened the same page first using HTTP which used HTTP1.1 and then used https: which used HTTP2 protocol (which is shown here as h2)<\/i> <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>In this post, we discussed the current web development practices and performance issues that we face. We continued our discussion on HTTP2 and saw that it can be used with IIS10 (Windows 10 and Windows Server 2016) and ASP.NET 4.6 using Visual Studio 2015. We then created a sample page that included multiple resources, including JS, CSS, and images. We saw that using HTTP2 saved us more than 75% load time \u2013 which ultimately shows us that the performance issues we\u2019re currently used to will soon be a thing of the past!<\/p>\n\n\n\n<p><span style=\"line-height: 12pt;\"><em>Try our jQuery HTML5 controls for your web apps and take immediate advantage of their powerful capabilities. <\/em><a href=\"\/products\/ignite-ui\/download\"><em>Download Free Trial now<\/em><\/a><em>!<\/em><\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"\/products\/ignite-ui\"><img decoding=\"async\" src=\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/brijmishra\/5228.june_5F00_ignite_5F00_728x90.jpg\" alt=\" \"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the last decade, the Web has taken multiple long strides. From basic HTML, web pages developed a richer look and feel, and are getting more intuitive, user friendly and glossier every day. <\/p>\n","protected":false},"author":21,"featured_media":2370,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=691"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/691\/revisions"}],"predecessor-version":[{"id":2011,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/691\/revisions\/2011"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2370"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}