What problem does it solve?
This Skill helps you reduce perceived and measured page-load delays by ensuring critical assets (often discovered late) begin downloading earlier, improving user experience and Core Web Vitals.
Core Features & Use Cases
- Targets late-discovered critical assets: Use browser
<link rel="preload"> for resources like fonts, hero images, and important scripts that would otherwise enter the loading waterfall too late.
- Prevents common preload pitfalls: Avoid wasting bandwidth and triggering browser warnings by preloading only what must be visible within roughly the first second.
- Improves performance metrics: Focuses on benefits to Time To Interactive (TTI), First Input Delay (FID), First Contentful Paint (FCP), and Largest Contentful Paint (LCP) through careful prioritization.
- Ensures correct fetch semantics: Uses
crossorigin for font/CORS resources so the preload can be reused by the eventual @font-face request.
Quick Start
Use the preload skill to generate the correct <link rel="preload"> tags for your critical scripts or fonts once you identify which assets are needed immediately after initial render.
