ForHosting KIT · サイト取得・監視

フォント・CSS・スクリプト・画像のpreloadタグを生成

ファイルとHTML上の読み込み先、オリジン間動作の関係を暗記せずに、そのまま貼り付けられるpreloadリンクを生成できます。絶対URLまたは相対URLを入力し、フォント、スタイル、スクリプト、画像から種類を選びます。適切なas属性を設定し、URLを安全にエスケープし、フォントには匿名のCORS読み込みを追加します。未対応の種類には明確な入力エラーを返します。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

早期取得する価値のあるリソースを選びます

Preloadは対象を絞った性能ヒントであり、すべての素材を先に取得する指示ではありません。CSSから参照される主要フォント、重要なヒーロー画像、初期表示に必要なスタイルシートやスクリプトなど、必要になるのにブラウザーの発見が遅いリソースへお使いください。パス、クエリー、コンテンツ指紋を含む実際のURLを入力します。絶対URL、プロトコル相対、ルート相対、通常の相対URLに対応します。HTML属性で特別な意味を持つ文字は安全に変換されます。用途に従ってfont、style、script、imageを選ぶと、headへ配置できる完全なlink要素が得られます。

as属性とcrossorigin属性を理解します

as属性は、先に取得する応答の用途をブラウザーへ伝えます。これは優先度、セキュリティーポリシー、後続リクエストでの再利用に影響します。各種類は標準の用途へ直接対応します。フォントの取得にはCORSが使われるため、同一オリジンに見える一般的な場合でもcrossorigin="anonymous"を付けます。省略すると再度ダウンロードされることがあります。他の種類では後続リクエストの認証方式によって正解が異なるため、自動追加しません。入力情報だけでは確定できないtype、media、imagesrcset、integrity、fetchpriorityも推測しません。

タグを配置して再利用を確認します

生成したリンクは、通常なら同じリソースを発見するCSSやスクリプトより前のheadへ配置します。後続リクエストとhrefを完全に一致させてください。ホスト、パス、クエリー、リダイレクト、CORS方式が異なると再利用できない場合があります。ブラウザーの開発者ツールで新規読み込みを確認し、対象が一度だけ要求され、間もなく利用されることを確かめます。未使用preloadの警告は、URLの不一致や初期表示に不要な素材を示すことがあります。ヒントを増やしすぎると重要な通信と競合しますので、各タグを計測すべき仮説として扱ってください。

活用例

主要なWebフォントを先読みします

後続のフォント要求で再利用できる匿名CORS付きpreloadを作成します。

ヒーロー画像を優先します

初期表示に重要な安定したURLの画像preloadを生成します。

配信用HTMLを準備します

リリース工程で指紋付きCSSやスクリプトの決定的なマークアップを作ります。

よくある質問

対応するリソース種類は何ですか？

font、style、script、imageに対応し、それ以外は入力エラーになります。

フォントにcrossoriginが付く理由は何ですか？

フォント要求はCORSを使うため、同じ方式にすると再ダウンロードせず再利用できます。

相対URLも使えますか？

はい。絶対URL、プロトコル相対、ルート相対、通常の相対URLに対応します。

リソースの存在も確認しますか？

いいえ。ネットワークへ接続せず、入力を検証してエスケープし、決定的なマークアップを生成します。

preloadで必ず表示が速くなりますか？

いいえ。発見順と優先度が変わるため、不要な先読みが競合しないか実測してください。

APIリクエストの料金はいくらですか？

生成1件あたりの基本料金は$0.002です。同じロジックをブラウザー内で実行できます。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/web/preload-link-generate

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/web/preload-link-generate \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url":"/assets/site.woff2","type":"font"}'

const res = await fetch("https://api.kit.forhosting.com/web/preload-link-generate", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "url": "/assets/site.woff2",
    "type": "font"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/preload-link-generate",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "url": "/assets/site.woff2",
    "type": "font"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/preload-link-generate", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"url":"/assets/site.woff2","type":"font"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"url":"/assets/site.woff2","type":"font"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/preload-link-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "url": "/assets/site.woff2",
  "type": "font"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.preload_link_generate",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

KITの完全なドキュメントを見る →