0

I have never setup http2 but I think cloudflare serve request as http2. However, when I see dev tool water fall it looks like http1. Because of the when I just test with http2 testing site it show I am serving http2.

enter image description here

As you see it kinda fetching 5 or 6 at a time.

Do I need to setup ngnix http2 instead of relying on cloudflare ? I also added webpack optimization option to allow more requests.

optimization: {
    splitChunks: {
      maxAsyncRequests: 20,
      maxInitialRequests: 20,
      minChunks: 2,
      chunks: 'all',
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        },
      }
    }
  },
fiddlest
  • 1,262
  • 2
  • 17
  • 42
  • According to the protocol column, your local resources _are_ being delivered over HTTP/2. If you are going through Cloudflare then resources will be delivered over HTTP/2 from it's caching servers, however if it has to communicate with your origin server and that does not support HTTP/2, then page load will be limited by the slowest connection. – luc122c Nov 26 '18 at 09:10
  • shouldn't waterfall column should be all in one line ? It seems it fetches 5 and then fetch more – fiddlest Nov 26 '18 at 14:41
  • No, as it appears that the scripts are being initiated from different sources. Resource 1 is initiated by the page itself. Resources 2, 3, 4 and 5 are initiated by a script 'rock...'. Scripts 6, 7, 8 and 9 are initiated by 'main...'. This means the index is parsed, then rock... (which loads some more scripts) then main... (which loads more scripts). This doesn't look like a problem with HTTP, the gap is probably caused by the time it takes to parse the JavaScript. – luc122c Nov 26 '18 at 21:09
  • so only way to fix this problem is make main.js small – fiddlest Nov 27 '18 at 15:25
  • Consider why rock... and main.js are pulling in other (blocking) scripts. Can they not all be pulled in by the index document? Take a look here: https://developers.google.com/web/tools/lighthouse/audits/blocking-resources – luc122c Nov 27 '18 at 20:30
  • main.js always had defer which I think it should not. – fiddlest Nov 27 '18 at 20:38

1 Answers1

0

Looks like the main... is calling the later scripts, so presumably the browser doesn’t think it needs to load more than the 5 or 6 resources at a time.

HTTP/2 doesn’t magically fix all performance issues with a site - often there are other limitations on a site, and these may be bigger than the issues with HTTP/1 that HTTP/2 is designed to address.

Barry Pollard
  • 40,655
  • 7
  • 76
  • 92
  • is there anyway I can remove number of max load ? – fiddlest Nov 26 '18 at 14:39
  • What do you mean by fixing number of max load? I don’t think you have hit a maximum limit. I think you only need those initial 5-6 resources and by the time it has spotted it needs other resources those initial ones are dealt with. I think you are limited by your JavaScript deciding it needs to load resources rather than by 12 being requested at once and only 6 being fetched at a time. – Barry Pollard Nov 26 '18 at 18:25
  • do you have experience using react-loadable ? – fiddlest Nov 26 '18 at 20:07
  • Nope. Suggest you run webpagetest.org on the app (if deployed) and then link to that. – Barry Pollard Nov 26 '18 at 20:07