Why Chrome uses Http / 1.1 instead of H2 for some resources

I cannot explain why HTTP / 1.1 has been in use for a while but not others, based on the limited information you have provided in your screenshots, as it shouldn't.

Are you 100% sure they are both the same? Is it possible that resources will be served from cache and have they been cached in HTTP / 1.1?

At another point, why are you requesting the same source twice in the same page load, as it seems to be wrong? Fair enough for data that changes (like JSON requests) but don't understand why you'll be loading jquery-UI multiple times, or even the same css file that you seem to be doing? It seems like a very strange use case and at least you have to cache it in order to use it again.

To your second question, according to HTTP / 2, the same connection is reused for the same origin (and this includes the same effects in certain use cases if you have a separate vhost on the same IP -address with the same https certificate). This means it does not result in row blocking as the HTTP / 2 protocol is specifically designed for this scenario and uses multiplexing to communicate requests.

However, this changes the profile of how requests appear in dev tools, depending on the client, server and bandwidth. For example, let's say you have a request for two resources, each taking 5 seconds to load. In the HTTP / 1.1 section, you will see:

Example

Request 1: start 0 seconds, end 5 seconds.
Request 2: start 5 seconds, end 10 seconds.
Total time to download could be calculated as: 5s + 5s = 10s
Overall Page load time would be 10 seconds

      

        
        
        
      

    

In the HTTP / 2 section, you can see this (assuming the first request was prioritized to be sent in full in the first place):

Example 2a

Request 1: start 0 seconds, end 5 seconds.
Request 2: start 0 seconds, end 10 seconds.
Total time **looks** be 5s + 10s = 15s
Overall Page load time would still be 10 seconds

      

        
        
        
      

    

Or alternatively, it might look like this if you have enough bandwidth to handle both requests in flight at the same time, and if the server responds with a second request a second later than the first:

Example 2b

Request 1: start 0 seconds, end 5 seconds.
Request 2: start 0 seconds, end 6 seconds.
Total time **looks** be 5s + 6s = 11s
Overall Page load time would be 6 seconds

      

        
        
        
      

    

The "slower" dot looks like HTTP / 2 if you are trying to summarize the details, although the total time for example 2a is the same, but is actually 4 seconds faster for example 2b. You cannot compare individual requests on similar bases in developer tools between HTTP / 1.1 and HTTP / 2.

Just like comparing multiple HTTP / 1.1 requests (browsers usually open 4-8 connections per host, not just one), except there is no overhead for opening and managing multiple HTTP / 2 connections as it is baked into the protocol. And there is no 4-8 limit over HTTP / 2, across browsers and servers often implement one default Apache 100, for example ).

Having said all that, I still think there are still many optimizations on the client and server to make the most of HTTP / 2. The internet is also heavily optimized for HTTP / 1.1 and how it works, so some of these things could be reversed, or at least changed to make the most of HTTP / 2. For example, a page load usually loads HTML, then CSS, and then images, which naturally leads to priority. In the HTTP / 2 section, you can request all assets at the same time, but in reality, for example, you should prioritize the CSS code for images. Most browsers do this, but do they do it in the most optimal way?