キーポイント

• HTML圧縮は、ドキュメントから冗長要素を削除するプロセスであり、ファイルサイズを削減し、コードの保守性を向上させることができます。その有効性に関するいくつかの論爭にもかかわらず、GoogleのPageSpeed Insightsはこの方法を推奨しています。
• HTML圧縮を自動的に実行できる3つのツールが最小限に抑えられます。PeavyのHTMLミニファイアとKangax HTMLミニファイヤーになります。各ツールには、HTMLコメント、不要な屬性、スペースの削除など、ユニークな機能と機能があります。
• 重複した文字列をポインターに置き換える手法であるGzippingでHTML圧縮を使用すると、ファイルサイズをさらに削減できます。これら2つの手法の結(jié)果は異なりますが、両方を同時に使用すると、少量のバイトを節(jié)約できます。

この記事は、Sitegroundとのコラボレーションで作成された一連の記事の一部です。 SitePointを可能にしたパートナーをサポートしてくれてありがとう。

HTML圧縮の利點について明確なコンセンサスはありませんが、GoogleのPagesSpeed InsightsでWebサイトをテストする場合、得られる結(jié)果の一部は、HTML、CSS、およびJavaScriptを圧縮する必要があるということです。

リソースの圧縮とは、冗長な要素を削除することを意味します。つまり、ブラウザはドキュメントでは不要な要素を正しく処理します。

この概念をHTMLドキュメントに適用すると、圧縮には以下が含まれます。

htmlコメントを削除するだけでなく、インラインCSSおよびjavaScriptコードのコメント

• インラインCSSおよびjavaScriptのHTMLコードとスペースを削除
• 不要な引用符、空の屬性などを削除します
CDATAセクションを削除します
• これらの操作は、ファイルのサイズを削減しながら、コードをシンプルで保守可能に保つことも容易にするのに役立ちます。

gzippingと圧縮リソースの比較

GZIPを使用している場合、HTMLを圧縮する価値はありますか？

HTML圧縮に対する1つの議論は、HTMLページを圧縮してスペースを削除し、ファイルサイズが縮小したことです。これにより、圧縮は非常に役に立たなくなります。

まず、これら2つの操作は同じではなく、同じ結(jié)果が得られないことに注意する必要があります。

圧縮結(jié)果は、ブラウザが同じファイルの非圧縮バージョンのように解析および実行できる完全に有効なコードで構(gòu)成されるファイルを作成します。一方、

gzippingはすべての重複した文字列を探し、文字列の最初のインスタンスへのポインターに置き換えます。 ...ネットワークでは、Gzingはサーバーによって直接行われます。 ...サーバーはファイルを圧縮し、そのようなネットワーク上に送信します。ブラウザはファイルを受信し、使用前に解凍します。

CSSトリックに関する

Chris Coyer

つまり、これらの2つの手法を使用すると、少量のバイトを節(jié)約できます。たとえば、GzippingやHTMLファイルの圧縮の効果では、Mads Kristensenは、4つの人気のあるWebサイト（Amazon.com、CNN.com、Twitter.com、Xbox.com）HTMLファイルの圧縮と圧縮を含む小さな実験について説明します。結(jié)果は、圧縮と圧縮を?qū)g行することにより、ファイルサイズが9?16％削減されることを示しています。

次のツールは、圧縮プロセスを自動的に実行します。

最小化

最小化は、node-htmlparser2に基づくオープンソースサーバー側(cè)のHTML5コンプレッサーです。

このツール：

• HTML5コードを圧縮できます（古いHTMLドラフトではなく、インラインPHPコードまたはテンプレートファイルはありません）
• それは高度に構(gòu)成可能です
• 條件を區(qū)別できます。つまり、コメント

…など。詳細(xì)については、GitHubのプロジェクトページにアクセスできます。

は、PeavyのHTMLミニファイア

になります

HTML Miniifierは、PHPを使用して構(gòu)築されたオンラインHTML圧縮ツールです。

それを使用するには、タグに追加できるCSSやJavaScriptを含む、HTMLをテキストボックスに貼り付け、[Compress]ボタンをクリックします。

圧縮後もスクリプトがまだ有効であることを確認(rèn)するために、Peavyは、symicolon（;）でJavaScriptステートメントを終了し、マルチラインコメント（/ * */）

を使用することを推奨します。

Kangax HTML Miniifier

Kangax HTML Miniifierは、強力な機能を備えたJavaScriptベースのHTMLコンプレッサーです。

これらは、このツールの機能のほんの一部です：

• htmlコメントを削除
• スタイルとスクリプトのコメントを削除します
• CDATAセクションを削除します
• 屬性の引用符を削除します
• 不要な屬性を削除
• 空白の屬性を削除
• htmllint
を介して入力を確認(rèn)します

ニーズに応じて各オプションを構(gòu)成できます。

HTML Miniifierの詳細(xì)については、KangaxのHTMLミニファイヤー実験とPerfect Aspedのすべての情報を見つけることができます。

結(jié)論

CSSやJavaScriptを圧縮するほど一般的ではありませんが、HTML圧縮はGoogleのPageSpeed Insightsの推奨事項の一部です。それが価値があるかどうかは未解決の問題のままです。

この記事では、多くのHTML圧縮タスクを自動化することにより、Webページのバイト數(shù)を減らすのに役立つ3つのツールをリストしました。

あなたはどうですか、HTMLを圧縮することは良い考えだと思いますか？お気に入りのHTML圧縮ツールは何ですか？

HTML圧縮ツールに関するFAQ

HTML圧縮とは何ですか？それが重要なのはなぜですか？

HTML圧縮は、機能に影響を與えることなく、HTMLドキュメントから不必要なまたは冗長データを削除するプロセスです。これには、スペース、ラインブレーク、コメント、ブロックセパレーターの削除が含まれます。 HTML圧縮の重要性は、HTMLファイルのサイズを削減し、それによりウェブサイトの読み込みを加速できることです。読み込み速度が速くなると、ユーザーエクスペリエンスが向上し、WebサイトのSEOランキングが改善されます。

HTML圧縮ツールはどのように機能しますか？

HTML圧縮ツールは、Webサイトのテキストパーツを分析および書き換えることにより、ファイル全體のサイズを削減します。ウェブサイトの機能を変更せずに、スペース、ラインブレーク、コメントなどの不要なキャラクターを削除します。また、一部のツールでは、CSSやJavaScript圧縮などの追加機能や、Webサイトをさらに最適化できる自動HTML Tidyも提供しています。

最高のHTML圧縮ツールは何ですか？

いくつかのHTML圧縮ツールがあり、それぞれにユニークな機能があります。最も人気のあるツールには、htmlminifier、miniify、cleancssが含まれます。 htmlminifierは、高度に構(gòu)成可能で、よくテストされた、JavaScriptベースのHTMLコンプレッサーです。 Miniifyは、クライアントのパフォーマンスのいくつかのルールに従うのに役立つPHP5アプリケーションです。複數(shù)のCSSまたはJavaScriptファイルを組み合わせて、不必要なスペースとコメントを削除し、GZIPエンコードと最高のクライアントキャッシュヘッダーを提供します。 CleanCSSは強力なCSSオプティマイザーとフォーマッタです。

HTML圧縮は私のウェブサイトの機能に影響しますか？

それが正しく行われた場合、HTML圧縮はあなたのウェブサイトの機能に影響しないはずです。コードの機能を変更せずに、不要な文字を削除するだけです。ただし、圧縮後にウェブサイトをテストして、すべてが適切に機能することを確認(rèn)することが常に最善です。一部のツールは、安全な最適化のみを確保するための「セーフモード」機能も提供しています。

HTML圧縮は1回限りのプロセスですか？

いいえ、HTML圧縮は1回限りのプロセスではありません。 HTMLファイルを更新または変更するたびに、それらを再度圧縮して、可能な限り最適化されていることを確認(rèn)する必要があります。一部のツールは自動圧縮を提供します。これにより、時間と労力を節(jié)約できます。

HTML圧縮はSEOを改善しますか？

はい、HTML圧縮はあなたのウェブサイトのSEOを改善することができます。 HTMLファイルのサイズを削減することにより、圧縮によりWebサイトの読み込みを加速できます。読み込み速度が高速化すると、ユーザーエクスペリエンスが向上し、WebサイトのSEOランキングが改善されます。

CSSとJavaScriptとHTMLを同時に圧縮できますか？

はい、多くのHTML圧縮ツールもCSSとJavaScript圧縮を提供します。これにより、Webサイトコードのすべての側(cè)面を最適化し、負(fù)荷時間と全體的なパフォーマンスをさらに改善できます。

HTML圧縮を使用してファイルサイズをいくら削減できますか？

ファイルサイズの削減量は、元のHTMLファイルのサイズと、それらに含まれる不要なデータの量に依存します。ただし、通常、ファイルサイズを10?20％削減することが期待できます。

HTML圧縮に関連するリスクは何ですか？

HTML圧縮に関連する最大のリスクは、プロセスが正しく動作しない場合、エラーが発生する可能性があることです。これが、圧縮後にウェブサイトをテストすることが常に最善である理由です。一部のツールは、安全な最適化のみを確保するための「セーフモード」機能も提供しています。

すべてのWebサイトにはHTML圧縮が必要ですか？

すべてのWebサイトが厳密にHTML圧縮を必要とするわけではありませんが、Webサイトの読み込み時間とパフォーマンスを改善するためのベストプラクティスです。特に、HTMLファイルが大きい場合やSEOの最適化を希望するWebサイトにとっては有益です。

以上がこれらの3つのHTML縮図ツールでファイルサイズを削減しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。