title: Website performance: How to reduce difference in domContentLoadedEventStart and domInteractive time?
body: <p>We have recently done revamp of our one of the key pages. We have done following changes:</p>
  
  <ol>
  <li>Moved rendering from client side to server side.</li>
  <li>Made modular javascript (Created 8 Modular Javascript files. There were only 2 earlier, we have just made them modular so size is still the same. But they are all in different JS now so effectively 8 separate downloads instead of 2. We have not bundled as we are using HTTP2)</li>
  </ol>
  
  <p>We are tracking our performance based on following metrics:- <a href="https://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive" rel="nofollow noreferrer">https://www.w3.org/TR/navigation-timing/#dom-performancetiming-dominteractive</a></p>
  
  <p>We are observeing a spike in following timing: <strong>domContentLoadedEventStart - domInteractive</strong></p>
  
  <p>AFAIK by studying <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/measure-crp" rel="nofollow noreferrer">here</a>, this is the time in which DOM is parsed after receiving first HTML byte. But I am clueless why it's showing an increase of 1 seconds after making above changes? The changes should ideally reduce this time as html is prepared from server. Am I missing something here?</p>