Pembuat Petunjuk Sumber Daya Web
Hasilkan tag resource hint <link rel> yang benar (preload, prefetch, preconnect, dns-prefetch, modulepreload) dan header HTTP Link yang setara dari daftar sumber daya biasa, dengan panduan as= dan crossorigin otomatis.
Input
Satu sumber daya per baris: url | hint type | resource type (as=) | crossorigin | media. Hanya url dan hint type yang diperlukan — field yang tertinggal dapat dihilangkan. Hint types: preload, prefetch, preconnect, dns-prefetch, modulepreload. Baris yang dimulai dengan # diabaikan.
Output
Perbaikan yang diterapkan secara otomatis (seperti menambahkan crossorigin untuk font) dan apa pun yang layak untuk diperiksa kembali.
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/web-resource-hints-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"resources": "https://fonts.gstatic.com | preconnect | | anony…"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `web-resource-hints-generator` tool (Web Resource Hints Generator) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/web-resource-hints-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Pembuat Petunjuk Sumber Daya Web — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Pembuat Petunjuk Sumber Daya Web mengubah daftar sumber daya biasa menjadi tag HTML <link rel> yang diformat dengan benar dan header HTTP Link: yang setara untuk preload, prefetch, preconnect, dns-prefetch, dan modulepreload. Alat ini menerapkan aturan atribut yang benar-benar diterapkan browser — as= untuk preload, crossorigin untuk font — secara otomatis, dan memberitahu Anda apa yang diubah.
Cara menggunakan alat
Masukkan satu sumber daya per baris dalam format:
url | hint type | resource type | crossorigin | mediaHanya URL dan hint type yang diperlukan — field yang tertinggal dapat dihilangkan. Contohnya:
https://fonts.gstatic.com | preconnect | | anonymous
/styles/critical.css | preload | style
/fonts/inter.woff2 | preload | fontAlat ini menghasilkan tag HTML <link> (untuk <head> Anda) dan baris header HTTP Link: yang setara (untuk konfigurasi tingkat server, karena petunjuk header diterapkan sebelum HTML bahkan diurai). Salin format mana pun yang digunakan pengaturan Anda.
Jenis hint
preload— ambil sumber daya yang pasti akan dibutuhkan halaman ini, dengan prioritas tinggi, tanpa memblokir rendering. Memerlukanas=.prefetch— ambil sumber daya yang kemungkinan akan dibutuhkan navigasi mendatang, dengan prioritas rendah, selama waktu idle.preconnect— buka koneksi (DNS + TCP + TLS) ke host lintas-asal sebelumnya, tanpa mengambil apa pun dulu.dns-prefetch— selesaikan DNS untuk host sebelumnya; fallback yang lebih murah untuk browser yang tidak mendukungpreconnect.modulepreload— preload modul JavaScript dan grafik dependensinya.
Mengapa as= dan crossorigin penting
preload tanpa nilai as= yang cocok (script, style, image, font, fetch, document, audio, video, track, worker, embed, object, manifest) diambil dengan prioritas yang salah atau diabaikan sepenuhnya, karena browser tidak dapat mengetahui cara mencocokkannya dengan permintaan akhir. Font khususnya harus diambil dalam mode CORS bahkan saat asal sama — alat ini menambahkan crossorigin secara otomatis untuk baris as=font apa pun dan menjelaskan mengapa di panel Panduan.
Mengapa alat terkadang menambahkan crossorigin tanpa nilai?
Atribut crossorigin telanjang (tidak ada ="anonymous") adalah shorthand standar untuk mode anonim CORS — bentuk yang digunakan browser sendiri dalam contoh preload mereka sendiri. Gunakan crossorigin="use-credentials" secara eksplisit hanya jika sumber daya memerlukan cookie atau auth HTTP.
Tag HTML atau header HTTP — mana yang harus saya gunakan?
Header HTTP Link: ditemukan sebelum browser bahkan mulai menguraikan HTML, sehingga dapat memberi petunjuk sedikit lebih awal daripada tag <link> yang sama ditempatkan di <head> — berguna untuk CDN atau proxy terbalik yang dapat menyuntikkan header, atau untuk petunjuk preconnect/dns-prefetch yang ingin Anda terapkan di seluruh situs. Jika tidak, tag HTML lebih sederhana untuk dipertahankan karena berada di sebelah markup yang didukungnya.
Untuk memeriksa header apa yang sudah dikirim situs langsung, gunakan Penganalisis Header HTTP. Untuk header keamanan HSTS terkait, lihat Pembuat Header Preload HSTS. Untuk mengalihkan URL lama daripada memberi petunjuk yang baru, lihat Pembuat Aturan Pengalihan.