I don't seem to understand what the coverage tab in the Chrome Devtools exactly means. From the documentation I found online, it doesn't become 100% clear to me.
For example: There is a CSS file called 'jet-elements.css' on my website (see screenshot). In the coverage tab, it says that this file is 229.658 bytes (229kb). However, the network tab shows that only 21.7kb is loaded.
My questions:
- What's the right way of reading the data from the network and the coverage tab? What does the data from both tabs exactly mean?
- What is being loaded for the user of the website? Is it the entire CSS or just the part that's used?
- Does the unused CSS make the website slower for the user?
Hope someone has some answers for me! :)