HTMLコードを圧縮してサイズ削減率を測定
このHTMLミニファイツールは、隣接するタグの間にあるコメントと空白だけのテキストを削除しながら、表示テキスト、属性、引用符付きの値、スクリプト、スタイルを保持します。通常の要素が正しい順序で閉じられているかも確認し、HTML標準の空要素と明示的な自己終了構文は例外として扱います。処理に成功すると、圧縮後のHTML、処理前後のUTF-8バイト数、削減率、削除したコメント数を返します。処理は決定的でネットワーク接続を必要とせず、マークアップを積極的に書き換える方法よりも慎重な選択肢です。
無料で実行
ページ内容を消さずに書式だけを取り除きます
読みやすいHTMLには、文書の保守に役立つインデント、空行、説明用コメントが含まれることがよくありますが、配信するファイルのバイト数は増えます。この機能は通常のHTMLコメントを削除し、2つのマークアップタグの間にある空白だけのテキストノードを取り除きます。空白以外の文字を1つでも含むテキストは意図的にそのまま残します。表示テキスト内の空白は単語を区切る場合があり、レイアウトやアクセシビリティにとって重要だからです。属性値も変更しません。引用符付きの値に山括弧、空白、コメントに似た並び、埋め込みデータが含まれていても保持します。スキャナーは引用符を考慮してタグ全体を読み取るため、最初の大なり記号だけでタグが終わったとは判断しません。scriptとstyleの本体は特別に扱い、対応する終了タグまで内容を正確にコピーします。そのため、比較演算子、文字列、CSSセレクター、内部のコメント構文をHTMLマークアップと誤認しません。返されたhtmlフィールドをデプロイ用成果物へ保存し、読みやすい元ファイルはバージョン管理に残せます。この慎重な範囲では、属性の並べ替え、テキストの正規化、実体参照の復号、タグの省略など、ブラウザーの動作を変え得る変換を行いません。
不完全または誤って入れ子にされたマークアップを検出します
ミニファイ処理によって、途中で切れたテンプレートが本番用の正常なファイルに見えてはなりません。文書を走査する間、この機能は通常の開始要素をすべて記録し、開始時と逆の順序で閉じることを要求します。たとえばdivの後にspanを開いた場合、divより先にspanを閉じる必要があります。予期しない終了タグ、途中で終わったタグ、閉じていないコメント、文書末尾で開いたままの要素があると、部分的な結果ではなく入力エラーを返します。img、input、meta、link、br、hr、source、wbrなど、HTML標準の空要素には終了タグが不要です。末尾にスラッシュを持つ明示的な自己終了構文も、名前のあるすべての要素で受け付けます。これにより、XML形式の断片やコンポーネントが生成した出力も処理できます。この検査は意図的に構造だけを検証するものであり、HTML仕様への完全な適合性を判定するものではありません。特に、省略可能な終了タグを推測したり、ブラウザーが許容するマークアップを修復したりしません。段落やリスト項目などの終了タグを省略しているソースは、送信前に明示的に閉じてください。厳密な規則により、壊れたテンプレート出力を見つけやすくし、さまざまな自動化環境で予測可能な結果を保ちます。
再現可能な公開工程で削減量を測定します
応答では、送信されたソースと圧縮結果の両方をUTF-8バイトで測定します。これはJavaScriptの文字数よりも、一般的なHTMLファイルの保存容量と転送量を正確に表します。アクセント付き文字、非ラテン文字、絵文字など、複数バイトで符号化される文字がマークアップに含まれる場合は、この違いが重要です。reduction_percentは正確な2つのバイト数から計算して小数第2位に丸め、comments_removedは削除した完全なHTMLコメントの数を示します。静的サイトジェネレーターでは、レンダリングした各ページをこの機能へ渡し、返されたhtmlの値を保存して、測定値をビルドレポートに記録できます。テンプレート処理では、生成されたマークアップが途中で切れている場合や入れ子が不正な場合に、構造エラーを利用して公開を停止できます。処理は純粋かつ決定的なので、同じ入力からは常に同じ出力と測定値が得られます。ネットワーク呼び出し、外部依存関係、乱数、時刻に左右される動作はありません。自動化したAPIリクエストは1回$0.002です。この処理は転送データの圧縮、リンク先リソースの結合、インラインJavaScriptやCSSの最適化、文書の意味の書き換えを行いません。さらに転送量を減らすには、その後でBrotliなどのサーバー圧縮を適用できます。
活用例
静的ページをデプロイ用に準備します
生成したHTMLから編集用コメントとインデントを除き、コンパクトな成果物を公開できます。
テンプレートの出力を検証します
生成したマークアップに閉じていない通常要素や誤った入れ子があれば、ビルドを停止できます。
マークアップの削減量を追跡します
処理前後のバイト数、コメント数、削減率をリリースレポートへ記録できます。
よくある質問
ミニファイ処理では何を削除しますか?
完全なHTMLコメントと、隣接するタグの間にある空白だけのテキストを削除します。
表示テキスト内の空白も削除しますか?
いいえ。空白以外の文字を含むテキストは、前後の空白を含めて正確に保持します。
終了タグを省略できる要素はどれですか?
HTML標準の空要素は例外です。また、明示的な自己終了構文で記述された要素も受け付けます。
スクリプトとスタイルはどのように扱いますか?
対応する終了タグまで本体を変更せずにコピーし、埋め込みコードをHTMLとして解析しないようにします。
削減率はどのように計算しますか?
処理前後のUTF-8バイト数を比較し、削減率を小数第2位に丸めます。
APIリクエストの料金はいくらですか?
APIリクエストは1回$0.002です。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/dev2/minify-html \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"html":"<!doctype html>\n<html>\n <body>\n <!-- Greeting -->\n <h1>Hello</h1>\n </body>\n</html>"}'const res = await fetch("https://api.kit.forhosting.com/dev2/minify-html", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"html": "<!doctype html>\n<html>\n <body>\n <!-- Greeting -->\n <h1>Hello</h1>\n </body>\n</html>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/dev2/minify-html",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"html": "<!doctype html>\n<html>\n <body>\n <!-- Greeting -->\n <h1>Hello</h1>\n </body>\n</html>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/minify-html", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"html":"<!doctype html>\\n<html>\\n <body>\\n <!-- Greeting -->\\n <h1>Hello</h1>\\n </body>\\n</html>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"html":"<!doctype html>\n<html>\n <body>\n <!-- Greeting -->\n <h1>Hello</h1>\n </body>\n</html>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/minify-html", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"html": "<!doctype html>\n<html>\n <body>\n <!-- Greeting -->\n <h1>Hello</h1>\n </body>\n</html>"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev2.minify_html",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |