Improve request parallelization, particularly on Chrome #1201
Conversation
|
Netlify Deployments: |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1201--ocw-next.netlify.app/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-www-pr-1201--ocw-next.netlify.app/search/ |
| Device | URL |
|---|---|
| mobile | https://ocw-hugo-themes-course-v2-pr-1201--ocw-next.netlify.app/ |
Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead
ChristopherChudzicki
changed the title
There was a problem hiding this comment.
So, I wasn't able to properly test the PR with the URLs provided. I saw the same blocking behavior on both Netlify URLs, so I deployed this PR to my private web server and tested it there building it myself. I was able to verify that this works as intended and the blocking behavior is gone:
|
@gumaerc tried again and saw the intended behavior. We suspect using wrong urls before. Should be: |
|
results on my web server after enabling http2:
|
What are the relevant tickets?
Related to #1196
Description (What does it do?)
This PR moves Google Tag Manager script to the top of
<head />, as recommended:Why? The goal is to better parallelize network requests, particularly in Chrome. Previously, in Chrome, many requests were being queued after some CSS. Similar queueing seemed to occur in firefox, though to a much lesser extent.
Notes:
<link />has this effect. But since putting GTM at the top is recommended anyway, I feel good about this change.How can this be tested?
Consequently, you can observe the behavior easily in Prod or on RC, but not on our default PR builds deployed with netlify (no
GTM_ACCOUNT_ID) and not easily on localhost (http1.1, which is limited to 6 concurrent connections per host).To help test this change, I've made two separate PRs just for the netlify deployments:
mainbranch netlify deployment, but withGTM_ACCOUNT_IDset to the RC value.cc/move-gtmbranch netlify deployment, but withGTM_ACCOUNT_IDset to the RC value.To observe old blocking behavior:
To observe new behavior: Repeat steps above, but use https://ocw-hugo-themes-course-v2-pr-1202--ocw-next.netlify.app/
Additional Tests:
Additional Notes
Because Lighthouse and PageSpeed Insights both use Chromium, I expect this to help or Core Web Vitals scores:
Lighthouse performance scores are variable, but they do seem better on
1200link than on 1202` link. Try https://pagespeed.web.dev/ if you're interested.