Preconnect Tag Generator: A Practical Guide
Use Preconnect Tag Generator to hint that a connection to an external origin may soon be needed. An origin includes scheme, hostname and any nondefault port. It is not the full path of one file.
How to Use Preconnect Tag Generator
- Enter the external Origin URL.
- Generate the preconnect tag.
- Place it in the head only where the origin is needed.
- Measure whether the connection is used and improves loading.
Preconnect Is a Resource Hint
The generator reduces the supplied URL to its origin and includes crossorigin. A browser may prepare DNS and connection setup ahead of the later resource request.
Each speculative connection consumes resources and contacts another origin. Limit hints to important origins actually used early. Preconnect does not download a particular image, stylesheet or script.
Worked Example
For an early asset at https://cdn.example.com/assets/main.css, the connection hint targets https://cdn.example.com, not the /assets/ path.
Choose the appropriate preparation level: use the Preload Link Generator.
Compare another resource hint: use the DNS Prefetch Tag Generator.
Checks and Common Mistakes
- Use the exact intended host or resource.
- Avoid unused hints.
- Check browser console warnings.
- Measure before claiming a performance improvement.
Frequently Asked Questions
Does it download my stylesheet?
No. It prepares a connection; the resource still needs its normal request.
Should I add many origins?
No. Unused connections can waste work and undermine the intended benefit.
Does it always improve speed?
No. Measure on the actual page and connection conditions.
Related Tools for the Next Step
- Preload Link Generator: Choose the appropriate preparation level.
- DNS Prefetch Tag Generator: Compare another resource hint.
- URL Parser: Inspect the resource address.
- Image Compressor: Reduce actual asset bytes where appropriate.
Reference
Further reading: MDN preconnect.