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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

このサイトの特徴は、

です。

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

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

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

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

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

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

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