I was curious to know if there can be too many resources preloaded. Let’s say for example a website has 10 CSS and 10 JS files that are loaded in the , would preloading all 20 of these resources be too much, inefficient, or otherwise a poor practice? Or should only the 10 JS files be preloaded? Can/should every resource loaded in the head be preloaded?
Thanks in advance, I’d love to have more clarification on this issue.
If the files are just normal script and link tags in the head then preloading won’t help anything. The browser will already discover them and load them as soon as it would with preload hints. You want to use the preload hints for any “hidden” resources that the preload scanner won’t be able to detect. Things loaded by external scripts (i.e. document.write).
Often you won’t know the exact resource but you’ll know the domain so you’ll probably be using preconnect more than preload. A common use case for this is Google fonts. The fonts css loads the actual fonts from a different domain but the browser has no way to know until the css has been loaded. You can preconnect the font domain to have it ready for when the css finishes loading.