HTTP/2 server push allows a server to "push" resources to the browser before the browser has actually requested them.
When using the network tab of the Chrome DevTools, how can I tell which resources were "pushed" vs. ones that were requested in the traditional way?
I know that I can enable the Protocol column in the network tab, and that shows some calls as "h2" which I assume means HTTP/2. But what do I look for to tell whether it was actually pushed?
Google Chrome offers a quick and easy way to check if HTTP/2 is supported on your SSL-enabled site. First, visit your site in Chrome over HTTPS. There you'll see your site listed with protocol h2, confirming your site works over HTTP/2.
Access Developer ToolsRight-click a page and select "Inspect Element". This displays the HTML code for the element you clicked. Select View > Developer > Developer tools.
Right click -> inspect -> then you will have the chrome dev tools just by selecting networks you can filter what's the browser is loading also you can see the http request going through your application.
Look for Push
in the Initiator column. See image.jpg
in the screenshot below.
Hovering over the Waterfall also shows a breakdown of the push-related activity.
I know that I can enable the Protocol column in the network tab, and that shows some calls as "h2" which I assume means HTTP/2.
Yes, this is correct. h2
stands for HTTP/2. As mentioned, the Protocol column is hidden by default. Right-click the table header and select Protocol to enable it. See Show more information for an example.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With