title: Understanding WebPageTest waterfall
body: <p>I'm using WebPageTest and am struggling to understand the meaning of the different colors and why it takes so long for my images to be shown (almost 2s). Using the WebPageTest waterfall view I can see a lot of "wait". I just dunno how to read the waterfall correctly and understand what all of my content is waiting on to be downloaded.</p>
  
  <p>You can see my test results on WebPageTest: <a href="http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F" rel="nofollow noreferrer">http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F</a>,</p>
  
  <p>I did some research and found I have to fix the issue using preload attribute:</p>
  
  <pre><code>&lt;link rel="preload" href="style.css" as="style"&gt;
  &lt;link rel="preload" href="main.js" as="script"&gt;
  &lt;link rel="preload" href="img.jpeg" as="image"&gt;
  </code></pre>
  
  <p>I have tried playing around with this preload attribute by preloading some of the js and also some of the images (requests 93-100) but neither of it have helped so far.</p>
  
  <p>Which elements should I take a closer look on in order to fix this long waiting time before my content is showing?</p>