title: How I can calculate page fully load with Pupppeteer?
body: <p>I'm trying to get the page fully load time in seconds with puppeteer in Node, for this I do some research on the API and other questions and create the following code:</p>
  
  <pre><code>/* First Configuration */
      puppeteer.launch({
              defaultViewport: { width: 1600, height: 800 }
        }).then(async browser =&gt; {
          const page = await browser.newPage();
      await page.setCacheEnabled(false);
          await page.goto('https://stackoverflow.com', {waitUntil: 'networkidle0'});
  
          /* Get Page Metrics */
  
          const perf = await page.metrics();
          console.log(JSON.stringify(perf));
  
          /* Get Page Evaluate */
  
          const timing = await page.evaluate(() =&gt; {
              const result = {};
              for (const key of Object.keys(window.performance.timing.__proto__))
                  result[key] = window.performance.timing[key];
              return result;
          });
          console.log(JSON.stringify(timing));
  
          /* Show Results on Browser Close */
  
          await browser.close().then(() =&gt; {
  
      var fullyLoadEvaluate = (timing.loadEventEnd - timing.navigationStart);
          console.log('Fully Load Time (Page Evaluate): ' + fullyLoadEvaluate);
  
          var fullyLoadMetrics = (perf.LayoutDuration + perf.RecalcStyleDuration + perf.ScriptDuration + perf.TaskDuration);
          console.log('Fully Load Time (Page Metrics): ' + fullyLoadMetrics);
  
          /* Send Response to Server */
          res.send('Check The Console');
          });
  
        });
  </code></pre>
  
  <p>Basically I use two codes to return metrics, One of them is <code>page.metrics()</code> that return the following data:</p>
  
  <pre><code>{"Timestamp":961736.600171,"Documents":8,"Frames":4,"JSEventListeners":375,"Nodes":8654,"LayoutCount":27,"RecalcStyleCount":31,"LayoutDuration":0.705517,"RecalcStyleDuration":0.144379,"ScriptDuration":0.527385,"TaskDuration":1.812213,"JSHeapUsedSize":11082496,"JSHeapTotalSize":20344832}
  </code></pre>
  
  <p>And the last one <code>page.evaluate()</code>, return the following:</p>
  
  <pre><code>{"navigationStart":1556722407938,"unloadEventStart":0,"unloadEventEnd":0,"redirectStart":0,"redirectEnd":0,"fetchStart":1556722407938,"domainLookupStart":1556722408247,"domainLookupEnd":1556722408548,"connectStart":1556722408548,"connectEnd":1556722408737,"secureConnectionStart":1556722408574,"requestStart":1556722408738,"responseStart":1556722408940,"responseEnd":1556722409087,"domLoading":1556722408957,"domInteractive":1556722409995,"domContentLoadedEventStart":1556722409995,"domContentLoadedEventEnd":1556722410190,"domComplete":1556722412584,"loadEventStart":1556722412584,"loadEventEnd":1556722412589,"toJSON":{}}
  </code></pre>
  
  <p>In my example I'm testing the site <strong><a href="https://stackoverflow.com">https://stackoverflow.com</a></strong>. Like <a href="http://webpagetest.org" rel="nofollow noreferrer">webpagetest.org</a> and <a href="http://getmetrix.com" rel="nofollow noreferrer">getmetrix.com</a>, I'm trying to get <strong>Page Fully Load Time</strong>. </p>
  
  <p>I know this kind of value is inconsistent, but I wonder if the values ​​I'm calculating are right, and which of the two results seems to be more correct ? <code>Fully Load Time (Page Evaluate)</code> or <code>Fully Load Time (Page Metrics)</code> ?</p>