title: How to analyzing Page Speed in Chrome Dev tools
body: <p>I'm trying to get my head around the Network Tab in Chrome Dev tools to understand how long the page is taking to load and the difference between DomContentLoaded, Load and Finished at the bottom of the Network Tab.</p>
  
  <p><a href="https://i.stack.imgur.com/CYj6h.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/CYj6h.jpg" alt="enter image description here"></a></p>
  
  <p>From the users perspective when is the page ready for reading, viewing, interacting with etc?  Is it DomContentLoaded, Load or Finished? </p>
  
  <p>Also what about from an SEO perspective what event is Google using to measure page speed? </p>
  
  <p><strong>DOMContent loaded</strong></p>
  
  <p>As I understand it DOMContent loaded means the WebPages <strong>HTML document</strong> has been downloaded and parsed by the browser but assets such as images, css &amp; javascript may still have to be downloaded, is this correct?</p>
  
  <p>From the user visiting the webpage is it ready at this time?</p>
  
  <p>Does <a href="https://developers.google.com/speed/docs/insights/BlockingJS" rel="noreferrer">render-blocking JavaScript and CSS</a> delay this event?</p>
  
  <p>In the Chrome network tab above why is DOMContentLoaded 1.97s at the bottom in blue text yet the blue line in the timeline is just before the 3 second mark?</p>
  
  <p><strong>Load Event</strong> </p>
  
  <p>I imagine this event is fired once everything is finished downloading and has been fully rendered, what colour line is this represented by as again the red line is at the 2s mark but at the bottom of the Network tab it says Network 2.95s in Red!?</p>
  
  <p>Is this a good point to consider the page is ready to view for the user.  If you look at <a href="http://www.amazon.co.uk/" rel="noreferrer">amazon.co.uk</a> this isn't till about 14 seconds and the <strong>Finished time</strong> goes all the way up to 3.5 min which I suppose are Ajax requests.  Which makes me think neither of these events really represent when the Page is ready for the user to view.
  <a href="https://i.stack.imgur.com/XQdbY.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/XQdbY.jpg" alt="enter image description here"></a></p>