Preload Tag Generator
Paste the URLs of your key fonts, stylesheets, scripts and hero image to get correct preload tags, plus preconnect and dns-prefetch tags for the third-party domains they come from.
How to use the preload generator
- Find your critical files in PageSpeed Insights, under suggestions like “Preload Largest Contentful Paint image”.
- Paste their URLs and your domain.
- Copy the tags into the head of your page, or use your caching plugin’s preload settings.
- Test again to confirm LCP improved.
Resource hints explained
| Hint | What it does | Use for |
|---|---|---|
| preload | Downloads a file early, at high priority | Hero image, main font, critical CSS |
| preconnect | Opens the connection to another domain early | Google Fonts, CDNs |
| dns-prefetch | Looks up the domain early | Fallback for preconnect, less important domains |
| fetchpriority="high" | Tells the browser this file matters most | The LCP image |
Do not over-preload
Preload is powerful but easy to misuse. Every preloaded file competes for bandwidth, so preloading ten files can make the page slower. Pick the hero image and one or two key fonts. In WordPress, LiteSpeed Cache and Astra can handle font preloading for you.
Related tools
Rate your results with the Core Web Vitals checker, lazy load the rest with the lazy load code generator, and choose fonts with the font pairing tool.
More free tools and guides
Practise tools like this on real projects in our digital marketing course in Faridabad, with weekday, weekend and online batches.
See the courseAll free toolsAsk on WhatsApp
Frequently Asked Questions
Is this preload tag generator free?
Yes. It is free with no sign-up and works in your browser.
What should I preload?
Usually the main hero image and one or two fonts used above the fold.
Why do fonts need crossorigin?
Fonts are fetched in anonymous CORS mode. Without crossorigin, the preloaded file is not reused and downloads twice.
What is the difference between preload and preconnect?
Preload downloads a specific file early. Preconnect only opens a connection to a domain, saving time on later requests.