stagemonitor / stagemonitor-mailinglist

GitHub issues abused as a mailing list
3 stars 0 forks source link

network time seems wrong when using throttling on Chorme #34

Open gpeel opened 7 years ago

gpeel commented 7 years ago

For Webapp Stagemonitor records the network time, but when using Chrome if I throttle to A 4G speed, the time is falsely attributing too page rendering. Anyone knows how to solve that issue ?

felixbarny commented 7 years ago

Could you open the console in chrome and type execute JSON.stringify(performance.timing, null, 2) Then paste the result and the values stagemonitor is showing. It should look something like this:

performance.timing:

{
  "navigationStart": 1473452448740,
  "unloadEventStart": 1473452449085,
  "unloadEventEnd": 1473452449086,
  "redirectStart": 0,
  "redirectEnd": 0,
  "fetchStart": 1473452448740,
  "domainLookupStart": 1473452448740,
  "domainLookupEnd": 1473452448740,
  "connectStart": 1473452448740,
  "connectEnd": 1473452448740,
  "secureConnectionStart": 0,
  "requestStart": 1473452448744,
  "responseStart": 1473452449079,
  "responseEnd": 1473452449205,
  "domLoading": 1473452449098,
  "domInteractive": 1473452449296,
  "domContentLoadedEventStart": 1473452449296,
  "domContentLoadedEventEnd": 1473452449298,
  "domComplete": 1473452449730,
  "loadEventStart": 1473452449730,
  "loadEventEnd": 1473452449746
}

stagemonitor:

Page Load Time  1962 ms
Network     224 ms (11.42%)
Server  2 ms (0.10%)
DOM Processing  648 ms (33.03%)
Page Rendering  1088 ms (55.45%)
gpeel commented 7 years ago

ok thanks for your quick reponse ! I experimented with your command and here are the result :

No throttling JSON.stringify(performance.timing, null, 2) "{ "navigationStart": 1473499254401, "unloadEventStart": 1473499254531, "unloadEventEnd": 1473499254531, "redirectStart": 0, "redirectEnd": 0, "fetchStart": 1473499254401, "domainLookupStart": 1473499254401, "domainLookupEnd": 1473499254401, "connectStart": 1473499254401, "connectEnd": 1473499254401, "secureConnectionStart": 0, "requestStart": 1473499254410, "responseStart": 1473499254530, "responseEnd": 1473499254531, "domLoading": 1473499254537, "domInteractive": 1473499254680, "domContentLoadedEventStart": 1473499254680, "domContentLoadedEventEnd": 1473499254680, "domComplete": 1473499254684, "loadEventStart": 1473499254684, "loadEventEnd": 1473499254684 }"

Page Load Time Page Load Time 283 ms Network 19 ms (6.71%) Server 110 ms (38.87%) DOM Processing 150 ms (53.00%) Page Rendering 4 ms (1.42%)

Visually, the contend appears fast . Chome says DomcontentLoaded : 275 ms Load : 276ms

Throttling 4G Page Load Time Page Load Time 2198 ms Network 19 ms (0.86%) Server 144 ms (6.55%) DOM Processing 324 ms (14.74%) Page Rendering 1711 ms (77.85%) JSON.stringify(performance.timing, null, 2) "{ "navigationStart": 1473498667984, "unloadEventStart": 1473498668211, "unloadEventEnd": 1473498668211, "redirectStart": 0, "redirectEnd": 0, "fetchStart": 1473498667985, "domainLookupStart": 1473498667992, "domainLookupEnd": 1473498667993, "connectStart": 1473498667993, "connectEnd": 1473498667993, "secureConnectionStart": 0, "requestStart": 1473498667993, "responseStart": 1473498668147, "responseEnd": 1473498668293, "domLoading": 1473498668218, "domInteractive": 1473498668471, "domContentLoadedEventStart": 1473498668471, "domContentLoadedEventEnd": 1473498668471, "domComplete": 1473498670174, "loadEventStart": 1473498670182, "loadEventEnd": 1473498670182 }"

To Slow things even more 3G now : Throttling 3G regular App content appears visually under 2 sec CHrome Show (status bar) : DomContentLoaded 1.88 s Load= 11.4 s The DomContentLoaded 1.88 confirms what I see when the content appears The 9 more sec are stagemonitor loading lots of stuffs

Page Load Time 11144 ms Network 25 ms (0.22%) <<<<<<<<< almost stable Server 164 ms (1.47%) DOM Processing 1690 ms (15.17%) Page Rendering 9265 ms (83.14%)

JSON.stringify(performance.timing, null, 2) "{ "navigationStart": 1473498814072, "unloadEventStart": 1473498814605, "unloadEventEnd": 1473498814605, "redirectStart": 0, "redirectEnd": 0, "fetchStart": 1473498814072, "domainLookupStart": 1473498814081, "domainLookupEnd": 1473498814081, "connectStart": 1473498814081, "connectEnd": 1473498814082, "secureConnectionStart": 0, "requestStart": 1473498814082, "responseStart": 1473498814261, "responseEnd": 1473498815463, "domLoading": 1473498814623, "domInteractive": 1473498815951, "domContentLoadedEventStart": 1473498815951, "domContentLoadedEventEnd": 1473498815951, "domComplete": 1473498825193, "loadEventStart": 1473498825216, "loadEventEnd": 1473498825217 }

felixbarny commented 7 years ago

In stagemonitor, "Network" is defined as:

The network time is the time from requesting a page until the first byte arrived minus the server processing time.

So network might be a bit misleading as it rather is the network latency ("ping"). You can't really isolate the time of the data transfer (this is probably what you expected) as the browser is already rendering the page as soon as the first byte has arrived and blocks when it has to wait for new data -> receiving data and rendering happens at the same time.

When I set the throttling to 3G 100ms 759kb/s I can see an increase of the network time of about 100ms which is because of the 100ms throttling.