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.
You can see my test results on WebPageTest: http://webpagetest.org/video/compare.php?tests=190928_QX_41979a80ef721f72c65dba5363475192-r%3A1-c%3A0-l%3Awww.kaybojesen.dk%2F,
I did some research and found I have to fix the issue using preload attribute:
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
<link rel="preload" href="img.jpeg" as="image">
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.
Which elements should I take a closer look on in order to fix this long waiting time before my content is showing?
The color key is at the top. It just tells you what type of asset is being loaded except for the DNS + connect + ssl which combined together make up the process of establishing the initial connection to a domain.
The Atelier theme doesn't seem to have been centered around performance, but you should still be able to get things loading faster. One thing that you could fix is you can make sure you're only loading the necessary scripts/css for each page. https://www.kaybojesen.dk/wp-content/plugins/instagram-feed/css/sb-instagram.min.css doesn't need to be loaded on the homepage. Some items such as the cookie notice, could be loaded after everything else. Fixing that should give you a big improvement. You can also load the CSS/JS from a CDN. Make sure you're using a good caching plugin if you're not already doing so.
It's easy to spot some of these problems such as the cookie notice loading too early. The tricky part is finding plugins or code snippets that you can use to fix these performance issues.
If you look at the "browser main thread" at the bottom it will tell you what is happening during the "wait" time. According to this, There is a bunch of layout happening. Chrome just needs some time after receiving all of the CSS to process it before it continues loading the page. I think webpagetest's server's are slower than your typical computer, so they spend more time in the wait stage, but it's probably a good idea to optimize for the worst case scenario. Anyhow, that's what the wait is all about.