TL:DR
- You probably don’t need a
preloadif the image is in the HTML- If not, put it at the END of the
<head>.
- If they are placed at the start, they may prevent render-blocking javascript and css from loading in the first batch (-> tight mode)
- Use
fetchpriority="high. Read more here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority- There are probably better ways to improve page speed, use this only for the 100% solution
- When using newer HTTP protocols, different resources can be loaded in the same TCP connection -> Multiplexing
- Most Web servers are bad at prioritizing resources. Even if priorities are passed, many don’t care.
- Some web browsers, like Chrome and Safari, implement Tight Mode
- They implement it differently
- Tight mode loads 5 resources and waits before they are loaded before loading more
- You probably want to have the critical resources in that first batch
- Order and fetchpriority can help
- At the moment, Firefox is the only one that doesn’t have this.It just loads every resource at the same time.