HTML ミニファイア オンライン: レイアウトの驚きのない小さなページ

HTML の縮小は、クライアントのサイトの左側にあるすべてのボタンを一度動かしたことがあります。その理由を理解するのに、恥ずかしいほど長い時間がかかりました。 使用したナビゲーション display: inline-block アイテムをリストすると、レイアウトは空白に応じて、いつものように偶然でした 間に ザ・ </li> あんど <li> タグ。 HTML では、インライン要素間の空白が並ぶと、約 4 ピクセル幅のスペースとして表示されます。 ミニファイアは空白を削除し、ブラウザはギャップを取り除き、デザインが変化しました。 マークアップは「同じ」でした。ピクセルはそうではありませんでした。

その話は、ミニチュアの HTML 縮小トピック全体です。 空白がほとんど純粋に装飾的な CSS や JavaScript とは異なり、HTML の空白は 時にはレンダリングに重要- つまり、HTML ミニファイアーは find-and-replace よりも賢くなければならず、"smaller" と "identical" が発散できる 3 つまたは 4 つの場所を知る必要があります。これらを正しく取得し、ミニ化は無料のお金です。HTML ドキュメントはブラウザが受信する最初のリソースであり、他のリソースは何もありません。CSS リクエストも JS リクエストも画像検出もありません。到着して解析が開始されるまで発生するため、そこからトリミングされたバイトはクリティカル パスの前からトリミングされます。

存在するすべてのコンテキストで HTML を縮小しました。WordPress ページは、その場で縮小するキャッシュ (4 ピクセルのバグの元の場所)、静的サイト ビルド、Laravel ブレード出力、メール テンプレート、および自分の製品のマーケティング ページです。 ザ・ Toolz.dev の HTML ミニファイア これは、貼り付け、縮小、完了、完全にクライアント側、ビルド システム不要の 1 回限りのケース用に私が望んでいたツールです。

このガイドでは、その使用方法、正確に何が削除され、何が生き残らなければならないか、4 ピクセルのクラスのバグを引き起こす空白ルール、および HTML ミニ化が a のどこにあるかについて説明します コア Web Vitals 戦略.

tl;dr: マークアップを Toolz.dev html ミニファイア コメントをストリップして空白を折りたたむには、ページを通常10 ~ 25% 縮小します - 無料、即時、そしてブラウザで完全に処理されます。 2つの知っておくべきこと: それはの内容を保存します <pre>、 <textarea>、 <script>、そして <style> バイト単位 (コード サンプルを内部に保存) <pre>)、それは空白の各実行を折りたたむため、 独身 スペースを削除するのではなく、インライン ブロック要素間のレンダリングされたギャップは残ります。攻撃的なミニファイアを噛む 4 ピクセルのレイアウト バグは存続します 'ここでは起こりません。ページの CSS と JS の半分も縮小します - CSS ミニファイア 前者を処理します - そして を見てください Web 開発者ツールキット ガイド 完全なパイプライン用。

主な機能

コメントの削除

HTMLコメントはレンダリング効果がゼロの純粋なペイロードで、現実世界のページには驚くほど多くのページが用意されています - テンプレートの注釈、コメントアウトセクション " 後で必要になるかもしれない" (2021 年から) 、ビルドツールバナー、トラッキングスニペットドキュメントのすべてがキャッシュされていないすべての負荷ですべての訪問者に出荷されます コメントの削除は、1 つの歴史的な脚注: 条件付きコメント () を持つ、存在する単一の最も安全なミニフィケーション変換です<!--[if IE]>) はかつては機能的な構文だったので、このツールはそれらをそのまま残します。通常のコメントを削除しますが、デフォルトでは IE 条件付きブロックを所定の位置に保持します。2026 年にターゲットとするブラウザはいずれにしてもそれらを尊重しないため、それらを維持するには数バイトのコストがかかり、監査している可能性のある従来のマークアップの動作を変更する可能性が排除されます。

空白の崩壊

重い変換。 HTMLソースは、ファイルを読み取る開発者のために存在するインデントと改行でいっぱいで、HTMLレンダリングルールに従って、ブロックレベルの要素間の空白の実行は、とにかく何も表示されないように崩壊します - ブラウザがすでにあなたの美しいインデントを無視していたファイルに折りたたむと、無視されたバイトが存在を停止します ニュアンスは、安全なミニファイアを危険なものから区別するものです: 間 インライン elements, whitespace renders as a single space, so a tool that deletes it outright is the tool that moved my client's buttons. Toolz.dev's minifier sidesteps that trap with a blunt-but-safe rule - it collapses every run of whitespace down to one space rule rather than removing it. Toolz.dev' s minifierは、ブラントだが安全なルールでトラップを回避する - それは空白を削除するのではなく、空白のすべての実行を1 つのスペースにダウンして折りたたむ。 lone spaceが何もないものとしてレンダリングするブロックレベルのボックスの間では、それでも節約が得られます; インラインまたはインラインブロックの要素間では、レイアウトが頼りにしていたギャップとしてレンダリングされるため、何もシフトしない最後の数バイトを、攻撃的なミニファイアーがブロックタグの間から絞り出すので、その代わりに、4 ピクセルのゴー

敏感な要素の保存

<pre> 文字通り、その空白を表示します - それと#39;そのジョブ全体。 <textarea> コンテンツは、すべての改行が重要なユーザー向けのデフォルト テキストです。 <script> あんど <style> ブロックには独自の空白ルールを持つ独自の言語があります 信頼できるHTMLミニファイアーはこれらを不透明な領域として扱います: 開始タグと終了タグの間のすべてがバイト単位で通過します これは、任意のミニファイアーを評価するときにテストする最初のものです - コードサンプルを含むページを に貼り付けます <pre> ブロックして、インデントが存続することを確認します。 そうでない場合、そのツールは本番マークアップに二度と触れません。

タグの内側を片付ける

タグ間のテキスト以外に、タグ内に再利用できるバイトがあります。 ミニファイアが空白の実行を折りたたむ 間に 単一のスペースに属性を与え、クロージングの直前にある空白をドロップします >.意図的に行わないのは属性の引用符を剥ぎ取ることです.HTML仕様では狭い場合には引用符のない値が許可されていますが,節約はバイトか2 バイト,本番マークアップをデバッグする際の可読性コストは実数,diffツールは引用符で囲まれた属性をはるかに優雅に処理します.私は自分の仕事で属性の引用符を保持しています,そしてI& #39;ツールが同意してくれて嬉しいです - 保守的な選択はリスクのどれも持たずにほぼすべての値をキャプチャします。

サイズの前後の報告

ツールは入力と出力のサイズを報告し、 - CSSのために私が作るのと同じ引数 - デルタは診断的です。 典型的なHTMLのミニ化は10 ~ 25% を節約します: CSSよりも少ない、なぜならマークアップは比例して空白が少なく、より多くのコンテンツを持っているからです。 40% 縮小した場合、それはコメントやインデントに溺れていました、そしてthat& #39; sは問題ありません。 4% 縮小した場合、それはすでにミニ化されているか、it& #39; sはほとんどテキストコンテンツです - そしてコンテンツの多いpage& #39; sの最適化予算は、マークアップではなく、画像とフォントに属しています。 数字は間違ったものを最適化することを止めます。これは、パフォーマンスが実際に機能するもののほとんどです。

完全にクライアント側

マークアップはブラウザで処理され、アップロードされることはありません。 HTMLは、フロントエンドトリオの最小の"secret" - it'sは文字通り公開 - ですが、リリース前のページ、内部管理テンプレート、および未発表の製品名を含む電子メールキャンペーンはすべてHTMLです'tは、ローンチ日の前にサードパーティのサーバーをツアーする必要があります&クライアント側の処理は、質問をムートにし、ボーナスとしてアップロードタイムアウトなしで大規模なドキュメントを処理します。

HTML ミニファイアの使い方

ステップ 1: マークアップを取得する

HTML をそのソースからコピーします - 静的ファイル、レンダリングされた出力である template's、メールビルダー's エクスポート、またはステージングページ上のソースを表示する (View Source) を好みます レンダリング テンプレートが異なる場合、テンプレートを介して出力します。ブレードまたは JSX テンプレート ファイルを縮小すると、テンプレート言語は HTML ではないため、テンプレートの構文が直接操作されます。 最初にレンダリングして、結果を縮小します。

ステップ 2: ミニファイアに貼り付けます

を開きます HTML ミニファイア そして貼り付けます。 output はすぐに現れます。 document が malformed - unclosed tags, misnested elements - minification だと malformation を修正するのではなく、保存します。 minifier はバリデータではなく、 garbage in は garbage out のままで、ただ小さいだけです。

ステップ 3: 保護地域を確認する

出荷する前に、出力をスキャンして <pre> ブロック、テキスト領域、およびインライン スクリプトを使用して、それらが無傷であることを確認します。 30秒。 これは、CSS と JS の縮小が必要としない HTML 固有のステップです。なぜなら、HTML は、一部の領域が空白で神聖な領域で、他の領域が存在しない 3 つの領域のうちの 1 つだけだからです。

ステップ 4: レンダリングを確認する

ミニ化されたバージョンをロードして、それを見てください - 特にナビゲーションメニュー、ボタン行、タグリスト、および並んで座っているインラインまたはインラインブロック要素から構築された他のものすべてで That' s空白に依存するレイアウトが隠れているスペースが変更された場合、耐久性のある修正はミニファイアではなくCSSにあります: コンポーネントをflexboxに切り替えます gap、これにより、明示的でマークアップの空白に対する影響を受けなくなります。 ミニファイアはレイアウトを壊しませんでした。それは、レイアウトが事故で耐荷重であることが明らかになりました。

ステップ 5: ソースをデプロイして保持する

縮小されたファイルを出荷; 読み取り可能なソースを編集したものとして保持します。すべてのビルド成果物と同じ一方向ルール。あらゆる種類のビルド ステップまたはキャッシュ レイヤーを持つサイトの場合、この手動プロセスをパイプラインに宣伝して自動的に実行します。ブラウザ ツールは、don' がないサイト用であり、他の誰か's パイプラインが行ったことを検査するためのものです。

テクニカル ディープ ダイブ: HTML の空白は、他の空白とは異なります

HTML を自信を持って縮小するには、1 つのメンタル モデルが必要です。 通常のフローでブラウザーが空白を処理する方法。 すべてのブラウザーが実装する HTML レンダリング動作から要約されたルール:

1. 空白文字 (スペース、タブ、改行) の実行は、1 つのスペースに折りたたまれます。
2. あの単一のスペース レンダリング インラインレベルのコンテンツ - テキスト の間に位置する場合、 <a>、 <span>、 <img>、なんでも display: inline や inline-block。
3. ブロック レベルのボックス間では、スペースは何も表示されません。
4. 中に white-space: pre コンテキスト (<pre>、またはそのようにスタイルされた任意の要素)、上記のどれも適用されません - whitespace はリテラルです。

ルール 2 は、HTML の縮小のリスク面全体です。 <li>A</li> <li>B</li> あんど <li>A</li><li>B</li> リスト項目がブロックレベル - で、かつ、they're inline-block の時に、4 ピクセルスペースが1 つ異なる場合に、同一にレンダリングします。 markup の違いは "just whitespace"; レンダリングの違いは、リアルです。 classic inline-block レイアウトハックが存在した理由 (親にフォントサイズゼロ、負の余白、タグ間のコメント) と、flexbox's が存在する理由もここにあります gap プロパティはジャンル全体を終わらせました: それはマークアップの事故から明示的なスタイルに間隔を移動しました。 minificationがあなたのレイアウトを変更した場合、正しい反応は感謝です - それはおそらく悪い時期にCMSの移行中に、いずれにせよ、最終的にあなたを噛んだであろう脆弱性を見つけました。

HTML のわずかなパーセンテージを考えると、なぜドキュメントを縮小するのでしょうか? 滝の位置。 HTML ドキュメントはリクエスト番号 1 で、そのバイト ゲートです。 every- パーサーは、それを読み取ることによって、あなたのスタイルシート、スクリプト、およびプリロードを発見します。 Time to First Byte plus document download and parse sit upstream of First Contentful Paint and Largest Contentful Paint, the Core Web Vitals metrics. There& #39; s 複合的な微妙さも: ブラウザはパケットが到着すると部分的なドキュメントで投機的な解析を開始するため、より少ない TCP ラウンド トリップに収まるドキュメントを使用すると、リソース検出が早く開始されます。 60 KB ドキュメントから 15 KB をトリミングすると、画像のトリミングよりも絶対的な節約が小さくなりますが、it' s は並列化ではなく遅延が複合する行の前面に保存されます。

縮小と圧縮、HTML エディション。 CSSと同じ関係: gzipとBrotli shrink transportですが、ブラウザは元のバイトをすべて解凍して解析します。 comments and whitespace compress extremely well - which is precisely why they're cheap to ship and still worth deliting, since deletion is the only thing that removes their parse cost and their share of the compression dictionary.両方、常に両方です。

ダイナミック サイト バージョン。 WordPress のキャッシュ プラグイン、Cloudflare の自動ミニファイ (廃止前)、およびフレームワーク ミドルウェアはすべて HTML を縮小します 応答時間に 時間を構築するのではなく。 同じ変換、同じリスク、さらに新しいもの: オンザフライのミニファイアは、ページ ビルダーのマークアップ、サードパーティの埋め込み、インライン JSON-LD ブロックを満たし、サイトのすべてのページで一度にそれらを満たします。 ステップ 4 の検証習慣を一度に 1 つずつ、これらの機能を展開します。 どうやって知っているのか聞いてください。

より広範な最適化シーケンス (マークアップ、スタイル、スクリプト、画像) の場合 SEO 画像最適化ガイド 最も重いレイヤーをカバーし、正直なところ、トリアージしている場合は、マークアップの前に画像を作成します。 ザ・ CSS ミニファイア ガイド これと同じ規律をスタイルシートに適用するのは、CSS の空白がほとんどレンダリングしないため、安全ルールがより単純です。

よくある使用例

静的サイトとランディング ページ

手作りのランディングページ、ドキュメントサイト、静的マーケティングページは完璧なミニフィケーション候補です: 自動的に行うビルドシステムがないこと、めったに変更されないマークアップ、キャッシュされていないすべてのバイトをカウントするトラフィックがこれらに対する私のルーチンは、レンダリング、ミニファイ、デプロイです - ブラウザツールは、プロジェクトが正当化するには小さすぎるパイプラインを置き換えます ランディングページも、FCPが最も商業的に重要である場所であり、滞在するかどうかを決定する訪問者は、クリティカルパスを見つめています。

メールテンプレート

HTMLメールは、ミニ化が直接お金を稼ぐ場所です: Gmailは、102 KBを超えるメッセージをクリップし、メールの下部を隠します - 通常、購読解除リンクとフッターを含む - &quotの背後に; メッセージ全体を表示" リンクほとんど誰もクリックしません 電子メールテンプレートは、自然によって肥大化されています (ネストされたテーブル、インラインスタイル、20 年間のクライアント回避策) 、 したがって、20% の削減は、クリップされたものとそうでないものの差になる可能性があります 電子メールクライアントパーサーは非標準的な行動の博物館であるため、送信前にすべてのキャンペーンを縮小し、その後プレビューツールでテストします。

WordPress 出力最適化

WordPress を実行する場合、HTML の縮小は通常、手作業ではなくキャッシュまたは最適化プラグインを介して行われますが、ブラウザ ツールがその方法です 監査 プラグインが実際に行ったこと。 キャッシュされたページでソースを表示し、それをミニファイアに貼り付けて保存するものがないかどうかを確認します。多くの場合、プラグインは保守的に構成されており、コメントと空白を表に残します。 プラグイン開発の年から、ベンダー側のメモを追加します。開発者は、コメントアウトされた実験でいっぱいのテンプレートを出荷しません。 あなたのコメントは、平均して、縮小プラグインがうまく構成されていない 10 万のサイトのソースになってしまいます。

埋め込みウィジェットとスニペット ペイロード

埋め込み可能なウィジェットを出荷する場合、スクリプトによって挿入された HTML スニペットは、すべての埋め込みサイトのすべての訪問者によってダウンロードされます - あなたのバイト、他の誰か& #39; s トラフィックを乗算したスニペット マークアップ (および効率的にアセットをエンコードする; the) を最小化します Base64 コンバーター 小さな画像をインライン化するときに役立ちます) は、礼儀正しいサード パーティであるためのテーブル ステークスです。 同じロジックは、CMS ブロック テンプレート、ブラウザ拡張コンテンツ、および所有していないページに挿入されたその他すべてのものをカバーしています。

逆転: 縮小マークアップを読む

すべてのミニファイアーと同様に、この 1's の逆使用が静かに最も頻繁です: 誰か他の人を作る' s の縮小ページを読み取り可能にします。埋め込み競合をデバッグするとき、または " このサイトはそのスキーマ マークアップをどのように構造化するか、" ソースを表示すると、300 KB の 1 行が手渡されます。美しくして、読んで、答えを見つけてください。コメントは永遠になくなります - 設計によるコメントの縮小は損失です - しかし、構造はワンクリックで戻ってきます、そしてページの 2 つのバージョンを比較すると、 テキスト差分ツール マークアップを美しくした場合、展開間で何が変わったかが正確に表示されます。

どの HTML の縮小で削除され、保存されますか

このテーブルを頭の中に印刷し、HTML のミニ化は怖いことを停止します。行が " にきれいに分割されます。常に安全にストリップして引用します。および " はそのまま保存する必要があります。" そして興味深いエンジニアリングはインライン空白行に住んでおり、このツール ' の 1 スペースへの折りたたみルールによってトラブルを回避できます。その行を正しく行うツール - と Toolz.dev html ミニファイア は - 全体の操作をルーチン化するように構築されています。このステップを取り巻くすべてのものについては、 コーディング ツール ガイド 隣人をカバーします。

フェイク

HTML ミニファイアは何をしますか?

HTML ミニファイアーはブラウザーのバイトを削除します ' コメント、タグ間の冗長な空白、リムーバブル属性引用符などのオプションの構文など、ページをレンダリングする必要はありません。一般的なページは 10 ～ 25% 縮小します。正しく実行されました 's レンダリング保存 - ページは同じように表示され、解析されます。一方、ドキュメントはダウンロードと解析が速くなります。HTML はすべてのページ ロードの最初のリソースであるため、これは重要です。 's クリティカル パス。

HTML をミニマムにすると、ページ レイアウトが壊れますか?

特定のケースでは、はい: レイアウト inline-block 要素はタグ間の空白に依存することができ、これは可視スペースとして1 文字の幅にほぼ相当するレンダリングを行う。 removing it closes those gaps and shifts the layout. good minifiers handle inline contexts conservatively, but the robust fix is in your CSS - use flexbox with the gap プロパティの間隔は、マークアップの空白にまったく依存しません。

HTML の縮小は、プレまたはテキストエリア タグ内のコンテンツに影響を与えますか?

あってはならない、正しいミニファイアは、バイト単位でこれらの領域を保持します。 <pre> その空白を文字通りレンダリングします - 折りたたむとコード サンプルと ASCII 書式が破壊されます - そして <textarea> コンテンツはユーザーが表示するデフォルトのテキストです。 この保存は、HTML ミニファイアで最も迅速な品質テストです。インデントされたコード ブロックを含むページを実行し、インデントが存続している場合は、そのページをチェックします。

gzip が有効な場合、HTML の縮小は価値がありますか?

はい。圧縮により転送は縮小されますが、ブラウザは元のバイトに解凍し、それらすべてを解析します。コメントと空白が含まれます。縮小されたバイトはダウンロードされず、解析されることもありません。HTML ドキュメントはページ上の他のすべてのリソースの検出をゲートするため、ここでの節約はクリティカル パスの最前線に到達し、そこで並列化されるのではなく複合化されます。

HTML をミニミングすると SEO に役立ちますか?

間接的に、スピードを通じて.小さなドキュメントは、最初のコンテンツフルペイントのようなファーストレンダーまでの時間を改善し、最大のコンテンツフルペイントに貢献し、コアWebバイタルは、Google& #39; sページエクスペリエンスシグナルの一部である.minificationは、won& #39; tは、それ自体で遅いサイトを救出し、Googleはインデックス作成のためにminifiedとunminifiedマークアップを同じように読み取る - 利点は、純粋に、しかし比例しているパフォーマンスの向上です。

メールのクリッピングを避けるために、メールの HTML を縮小するにはどうすればよいですか?

Gmailは、102 KBを超えるメッセージをクリップし、&quotの背後にある折り目の下のすべてを隠します; メッセージ全体を表示" リンク - 多くの場合、フッターと購読解除リンクを含むテンプレートを介して実行します HTML ミニファイア 送信前に、テーブルが多いメールのマークアップは、通常、15 ～ 25% 縮小します。これは、クリップと完了の違いであることがよくあります。 電子メール クライアント パーサーは風変わりな悪名をとるため、常に電子メール プレビュー ツールでミニファイド バージョンをテストしてください。

他の人のページ ソースを読むために HTML を非表示にすることはできますか?

はい - 美化とは、逆実行されている同じツール カテゴリであり、it' s は間違いなく、より一般的な日常使用です。縮小ページのソースを貼り付けて、埋め込みのデバッグ、別のサイト' の構造化データの調査、またはキャッシュ プラグインが実際に出荷された内容を確認するためのインデント可能なマークアップを元に戻します。 1 つの永久的な損失: 縮小中に削除されたコメントがなくなり、再構築できなくなります。

未公開のページをオンラインの HTML ミニファイアに貼り付けても安全ですか?

クライアント側に、はい。 ザ・ Toolz.dev html ミニファイア 処理マークアップは完全にブラウザで - 何もアップロードされていない、ログに記録、または保存され、ネットワークタブで確認することができます。 & #39; 自分で公開する前にサードパーティのサーバーにアクセスする必要があります未発表の製品の詳細を含む起動前のページ、内部テンプレート、および電子メール キャンペーンにとって重要なことです。