Screenshot of a webpage section titled “Priority escalation example” explaining the impact of preloading async scripts. A comparison shows that without preload, CSS, fonts, and LCP images have medium/high priority while async scripts have low priority. With preload applied to an async script, all resources—including the preloaded async script—compete at medium/high priority, marked with warning icons and a red X. A highlighted note states that scripts marked async or defer are not critical for initial render, and preloading them elevates their priority unnecessarily. Below, a “Snippet” section displays JavaScript code that checks for <link rel="preload" as="script"> elements and logs a message if none are found.
🚀 New WebPerf Snippet published!
Detects preload resource hints for scripts that use async or defer attributes. This is an anti-pattern that wastes bandwidth & can hurt performance by artificially elevating the priority of resources that should load at lower priority
#WebPerf #WebPerfSnippet