What is Preload Tag Builder?
Preload tells the browser to fetch a resource early before it would normally be discovered. It speeds up loading for fonts, hero images, critical CSS, and scripts. The as attribute is required to tell the browser what type of resource to expect. Missing as or incorrect crossorigin are common mistakes.
Quick answer
Use preload to fetch critical resources -- such as hero images, fonts, or above-the-fold CSS -- before the parser discovers them. Only preload a few resources per page to avoid bandwidth contention.
Limitations
- Preload requires the as attribute. Omitting it or using an incorrect value may cause the browser to fetch the resource twice.
- Cross-origin preloaded resources such as fonts from a CDN must include the crossorigin attribute.
- Excessive preloading delays other resources and can hurt performance instead of helping.
How to use this tool
- Select the resource type you need to preload: font, image, CSS, or script.
- Enter the URL or file path of the resource.
- The tool adds the correct as and crossorigin attributes for the selected type.
- Copy the link tag into the page head before other resource references.
What you can use it for
- Preload a critical font file so text renders correctly on the first paint.
- Preload a hero image to improve Largest Contentful Paint.
- Preload a critical CSS file or JavaScript module for faster rendering.