DISCOVER EARLIER · PRIORITIZE DELIBERATELY

Resource Hint Planner

Build a deliberate loading plan for your page. Review each resource, keep a small hint budget, and export markup you can explain.

Resource queue

Priority 1 is highest. Budgets are applied in priority order. Nothing is emitted for a resource left on Hold.

Resource decision

Add a resource or open the example.

Generated head markup

Paste into your page’s head only after review. The planner displays escaped text and never activates these links here.

Decision review

Make the browser’s first choices count

Choose. Add the few resources needed for this route’s first screen. Keep later widgets and unrelated pages on Hold.
Review. Use modulepreload for module scripts. Match preload destination, MIME type and CORS mode to the eventual request.
Measure. Integrate the snippet in your own project and record a fresh network trace. Hints are suggestions to the browser, not guaranteed speed gains.

Font preloads require anonymous CORS even on the same origin. Fetch preloads need a CORS mode matching the real request. Preconnect opens an origin connection, not an individual resource. Media-qualified hints still count against the planner’s conservative budget. Responsive-image srcset/sizes, prefetch, HTTP Link headers and 103 Early Hints are outside this planner’s export scope.

Imports support up to 200 resources and 2 MiB. Saved plans include your URLs and notes. Public pages may include advertising; see privacy information.

Reference: preload and CORS · resource hint guidance.

Using Resource Hint Planner

Plan preload, modulepreload, preconnect and DNS hints with a limited budget, explicit request modes and a reason for every decision.

Explore the magazine example: three early resources, one CDN connection and two deliberate holds. Set your page URL to resolve relative resource paths.
Add resources or import a resource CSV or saved JSON plan. Choose a hint, priority (1 is highest), request destination, MIME type and credentials mode.
Apply each resource decision and page settings. Review exclusions, duplicate suppression and budget usage beside the generated markup.
Copy or download the HTML snippet for manual integration. Save a JSON plan to reopen, export a resource CSV or download the decision report. Measure your real page after integration.

Example

A story page preloads a late-discovered hero image and one WOFF2 font, uses modulepreload for its article module and preconnects to its image CDN. Already-discoverable CSS and a later analytics widget stay on Hold.

Questions & answers

Does this crawl or change my website?

No. This is a local planning tool. Imported URLs are never fetched or activated as resource hints on this page. Review the exported snippet before adding it to your own site.

Why is a resource missing from the output?

Review its decision: it may be on Hold, a duplicate, a same-origin connection hint, an HTTP target on an HTTPS page, over budget, or a fetch preload without a declared CORS mode. Priority 1 is highest; ties keep their input order.

How are fonts and modules handled?

Font preloads use anonymous CORS, including same-origin fonts. Modulepreload emits a module-script hint without an as attribute. Match request credentials and MIME types to the real resource; fetch preloads require an explicit CORS mode.

What can I import and save?

Import a resource CSV, JSON array or version 2 saved plan, up to 200 resources and 2 MiB. Saved plans contain the page URL, resource decisions and budgets; exports include an HTML snippet, CSV and JSON decision report.

Will these hints guarantee a faster page?

No. Hints affect browser scheduling and can waste bandwidth when overused. Measure before and after integration. Responsive image srcset/sizes, prefetch, HTTP Link headers and 103 Early Hints are outside this planner.