HTMLの縮小 - フリーのWebツールでHTMLを圧縮

HTMLを最小化するフリーツール

HTMLの縮小(圧縮)とは

HTMLの縮小(圧縮)とは、HTMLファイルに含まれる改行コードやコメントなどを削除してファイルサイズを最小化・軽量化することを言います。

ウェブサイトを作成する際にHTMLを縮小(圧縮)しておくと、転送量が削減されて読み込みが早くなり、ブラウザの表示速度が高速化します。GoogleのPage Speed Insightsのスコアもアップするので、SEO的にも有利になると思われます。

また、改行が入っていないHTMLを人間が読むのは面倒なので、サイトの盗用防止にもちょっとだけ効果があると言われます。

HTMLの縮小は手作業でもできますが、非常に手間と時間がかかります。これを自動的にやってくれる無料のウェブサービスが複数存在するので、そういったウェブサービスを利用したほうが作業効率があがります。

無料のウェブサービス

HTMLを縮小するフリーのウェブサービスはたくさんあります。「minify html」で検索すると、ずらっと出てきます。

わたしが使っているのは以下の3つです。

Compress HTML

日本人に一番有名なのは、たぶん、こちらのサイト。

Compress HTML

このサイトが優れている点は、HTMLコード内のJavascript部分を圧縮しない仕様なので、Javascriptが動作しないなどのトラブルが生じない点です。

サイトのスクリーンショットはこんな感じです。テキストボックスにHTMLをペーストしてCompress HTMLボタンを押せば、圧縮したHTMLが表示されます。

compresshtml

しかし、あまりに人気がありすぎたせいか、最近は利用に制限がかかるようになりました。

圧縮ボタンを押す際に、画像認証が必要になりました。データ入力欄の下にある画像の文字をテキストボックスに正しく入力しないとCompressのボタンが押せません。この仕様変更によって、作業効率が著しく低下しました。

HTML Minifier

そこで、代わりに発見したのがこちらのサイトです。

HTML Minifier

使い方はCompress HTMLと同じで、圧縮したいHTMLコードをテキストボックスにコピペして、Minifyボタンを押すだけです。瞬時に圧縮が完了します。

minifyhtml

HTMLを張り付けるボックスと縮小した結果を表示するボックスが同じなので、複数のHTMLをどんどん処理していく場合の作業効率が高く、わたしは愛用しています。

なお、このツールだとHTMLコード内のJavascript部分も圧縮されます。何度か使ってみましたが、Javascriptが動作しないトラブルはいまのところ発生していません。Adsenseの広告もちゃんと表示されています。

このHTML Minifierは、米国在住の個人が運営しているようです。この人は、ほかにも文字数カウンターなどの無料のウェブツールを公開しています。

online HTML compression tool

こちらのサイトも紹介しておきます。

online HTML compression tool

compresshtmltool

このサイトの特徴は、

  1. HTML内のコメントは削除されない
  2. ヘッダ部分を圧縮しない設定を選択できる

です。

1に関して言えば、ブラウザにとっては不要なコメント情報が削除されないので、HTMLを最小化・軽量化するという目的に鑑みれば、不利な特徴といえます。

2については、テキストボックス下部の「Don't compress HTML head of document」にチェックを入れておくと、ヘッダ部分を圧縮しません。ヘッダを書き換える予定があるなら、易読性を維持するためにこのモードを選択しておくとよいと思います。

なお、このウェブサービスもHTML内のJavascriptを圧縮しますが、トラブルなく動作しており、Adsenseの広告は正しく表示されました。

HTML Minifier (v3.5.5)

最近わたしが一番良く使っているのは、こちらのサイトです。

HTML Minifier (v3.5.5)

このサイトの特徴は、圧縮のレベルを自分でこまかく設定できること。

ただし、あまりに多機能なので、すべてを使いこなすのは難しそうです。さっくり使うなら、以下の設定でよいと思います。

  1. メニュー最下部のNoneをクリックして、全部のチェックボックスを空欄に戻す。
  2. 以下のチェックボックスのみチェックを入れる。
    • Collapse inline tag whitespace
    • Collapse whitespace
    • HTML5 (HTML5の場合のみ)
    • Minify CSS
    • Remove comments

以上で普通に圧縮できます。この設定ならJavascriptは圧縮しないので、Googleアドセンスや、Javascriptを使用したアクセス解析などの動作にも影響しません。

フォルダ内のHTMLファイルを一括で圧縮(縮小)する方法

ページ数の多いサイトを更新した際、上記の方法で1ページずつ縮小していくと、膨大な時間と手間がかかります。

そこで、Windowsで使える代替手段を考えました。別記事にまとめたの参考にしてください。

Googleは、ウェブサイトの表示速度が検索エンジンの表示順位に影響すると公式にアナウンスしています...

追記:HTML圧縮用のフリーソフト

(2020年10月追記)

HTMLを圧縮、軽量化するための非常に優れたWindowsソフトウエアを見つけたので、追加でご紹介します。

HTMLminify

こちらのサイトから無料でダウンロードできます。

http://www.romeolight.com/ja/products/htmlminify/

インストール不要なPortable版と、通常のインストール版があります。とりあえず試すには、レジストリを汚さないPortable版がよいと思います。

ダウンロード、解凍したら、アイコンをクリックするだけで起動します。

使い方は簡単です。圧縮・軽量化したいHTMLをウインドウ上にドラッグ・アンド・ドロップすると、フォルダ内のHTMLがリスト表示されます。確認のうえ、左上の圧縮開始のボタンを押すだけです。

このソフトウエアのとくに優れている点は、フォルダ内のHTMLファイルを一括で圧縮できることです。しかも、フォルダが複数階層あっても、深い階層のフォルダ内のHTMLファイルまで圧縮してくれます。

わたしは3階層、100ファイル以上を一気に圧縮しています。

拡張子がhtml以外のファイルは無視するので、サイトのフォルダごと全部放り込んでしまってかまいません。CSSやJavaScriptのファイルは改変されません。

こんな便利な、しかも無料のソフトウエアなのですが、なぜか巷での知名度は低いようです。それではもったいないので、ここで御紹介した次第です。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク