圧縮htmlの仕組みと必要な理由
ウェブサイトを運営している方なら、正しい画像フォーマットの使い方やウェブ用に画像を最適化する方法をすでにご存知でしょう。しかし、画像の圧縮はよく知られていますが、HTMLの圧縮は見落とされがちで、そのメリットは大きいだけに残念なことです。
今回は、HTMLファイルを縮小する主な2つの方法、その理由と方法について説明します。
圧縮・減容
HTMLファイルの最適化には、大きく分けて「圧縮」と「縮小」の2つの方法があります。一見似ているようですが、実は全く異なる2つの技術なので混同しないようにしましょう。
削減
シュリンクとは、ソースコードから不要な文字や行を削除することだと考えてもよいでしょう。インデント、コメント、空白行など、HTMLでは必要ないものばかりです。これらのディテールをトリミングすることで、コンテンツに影響を与えることなくファイルサイズを小さくすることができます。
HTMLページの例です。
<html> <head> <title>Your Title Here</title> </head> <body> <div><img src="clouds.jpg"></div> <h1>This is a Header</h1> <p>Send me mail at <a href="mailto:[email protected]">[email protected]</a>.</p> <p>This is a new paragraph!</p> <p><strong><em>This is a new paragraph in bold and italics.</em></strong></p> </body></html>HTMLページの例、縮小。
<title>Your Title Here</title><div><img src=clouds.jpg></div><h1>This is a Header</h1><p>Send me mail at <a href=mailto:[email protected]>[email protected]</a>.<p>This is a new paragraph!<p><strong><em>This is a new paragraph in bold and italics.</em></strong>オリジナルサイズ：354、縮小サイズ：272、節約：82（23.16％）。
多くのWeb開発者やWebサイトオーナーは、JSとCSSのファイルのみを削減していますが、この時代遅れのアプローチは間違っています。
21世紀当時は、シュリンクツールは珍しい存在でした。変更が発生するたびに、手動でファイルを縮小する必要があったのです。HTMLファイルはJSやCSSファイルよりも頻繁に変更されるので、当時は毎回縮小するのは単調で面倒でした。さて、これはムチャクチャな話です。
圧縮
ユーザーがあなたのウェブサイトを訪問するときは、HTTPプロトコルを使用します。ブラウザは特定のページに対する要求をウェブサーバに送り、ウェブサーバはそのページを見つけ、そのページの内容を訪問者のブラウザに送り返します。
しかし、HTTPプロトコルは圧縮をサポートしているので、Webサーバーは訪問者に送信する前にページを圧縮し（サーバーの設定で圧縮が有効になっていると仮定）、訪問者のブラウザはページを解凍して元の状態に戻すことができるのです。
最も一般的な圧縮方式はGZIPで、DEFLATEという可逆圧縮アルゴリズムを用いたファイル形式である。
このアルゴリズムは、HTMLファイル内で繰り返し現れるテキストを探し、これらの繰り返し現れるテキストを、以前の出現箇所への参照に置き換えます。各参考文献は、どこまで遡って参照されているか、何人のキャラクターが参照されているかという2つの数字で構成されているだけです。
次のようなテキスト文字列を考えてみよう（GZIPのウェブサイトから引用した例）。
Blah blah blah blah blah.このアルゴリズムでは、次のような繰り返しを識別しています。
B{lah b}{lah b}{lah b}{lah b}lah.最初の外観は私たちの参考になるので、ぜひ残しておいてください。
Blah b{lah b}{lah b}{lah b}lah.2回目の出現は1回目の出現を参照し、その後に5文字と5文字長い:が続く。
Blah b[5,5]{lah b}{lah b}lah.しかし、この場合、アルゴリズムは次の出現が同じ文字列であることを認識し、さらに5倍に参照長を伸ばします。
Blah b[5,10]{lah b}lah.繰り返すこと。
Blah b[5,15]lah.そして、アルゴリズムは賢いので、次の3文字が参照の最初の3文字であることに気づき、3文字ずつ展開する。
Blah b[5,18].さて、典型的なHTMLファイルについて、その中にどれだけの繰り返しがあるかを考えてみましょう。
<body>を、対応するエンドマーカーで表現します。
</body>また、多くのタグが繰り返されています。
<p>,
<div>,
<img>,
<li>属性もよく繰り返されます。
class,
hrefそして
srcGZIP圧縮がHTMLに有効である理由は簡単です。
唯一の欠点は、ページが要求されるたびに圧縮を実行するために、ウェブサーバーがもう少し多くのCPUを必要とすることです。しかし、CPUは現在あまり重要な問題ではないので、たとえエントリーレベルのウェブホスティングであっても、GZIPを有効にすることは、有効にしないよりもほぼ常に良いことです。
なぜ圧縮・収縮するのか
主なメリットは2つあり、どちらもモバイルが多用される今日のWeb環境では欠かせないものです。
ページ読み込みの高速化
HTMLブラウザは、基本的な設定で平均して約3％のファイルサイズを削減することができます。オプションの詳細設定により、HTMLファイルをさらに3〜7％、最大10％削減することが可能です。これは、ページの読み込み時間の短縮に直結します。
使用する帯域幅が少ない
10個のファイルがあるとすると、各ファイルは50kbから45kbに圧縮され、合計50kbになります。 あなたのウェブサイトに1日平均1000人の訪問者があり、1回の訪問につき平均10ページが閲覧されると仮定します。HTMLの削減だけで、1日あたり50MB（1ヶ月あたり1.5GB）の帯域使用量を削減することができます。
圧縮＋減圧
このように、HTMLの縮小化自体は、特にサイトの規模が大きくなり、ファイルサイズが大きくなり、トラフィックが増加すると、便利な機能です。なお、GoogleのPageSpeedガイドラインではHTMLの縮小を推奨しているので、これに懐疑的な方は納得してください。
しかし、HTML最適化の良さは、縮小と圧縮のどちらかを選ぶ必要がないことです。
GZIP圧縮は、平均して70％から90％程度、HTMLファイルを圧縮することができます。上記の例で圧縮率を控えめに見積もると、圧縮されたHTMLファイルはそれぞれ45kbから13.5kbになり、合計365kbの圧縮になります。 あなたのサイトの帯域幅は、統合/非圧縮の場合と比較して1日あたり365MB（1ヶ月あたり11GB）削減されます。
帯域幅の節約に加え、エンドユーザーのブラウザが1ページあたり50KBダウンロードする必要があるのに対し、13.5KBしかダウンロードしないため、各ページがより速く読み込まれるようになりました。
htmlを圧縮・縮小する方法
幸いなことに、どちらの方法も最近はそれほど難しくなく、専門的な知識も必要なく設定できます。
ワードプレスプラグイン
WordPressでサイトを運営している場合、プラグインをインストールするだけで、圧縮と縮小の効果を享受することができます。
ほとんどのキャッシュプラグインは、単にページをキャッシュするだけではありません。例えば、WP Fastest CacheとW3 Total Cacheはどちらもワンクリックで設定でき、HTMLの縮小やGZIP圧縮を有効にできるほか、ページの読み込みをさらに高速化し、帯域幅の使用量を削減することができます。
縮小するだけなら、Shrink HTMLプラグインをお勧めします。シンプルで、HTML/CSS/JSに対応し、シュリンク方法を微妙に調整できる（削除するかしないか等）。
http:と
https:(URLより)です。
静的なhtmlのサムネイル
HTMLファイルが静的な場合（CMSやウェブフレームワークによって動的に生成されない場合）、2つのHTMLファイルセットを管理することができます：「ソース」セット（編集しやすいように標準化されていない）と「縮小」セットです。は、ソースファイルに何らかの変更を加えたときに作成することができます。
削減するには、以下のいずれかのツールを使用します。
- HTMLコンプレッサー
- HTMLリデューサ
- HTML小型化装置（上記とは異なります）
WordPressのようなcmseから移行した場合、今度は静的サイトジェネレータを使う、これは有効な手法です。
gzip圧縮を有効にする
GZIP圧縮を有効にする手順は、お使いのウェブサーバーソフトウェアによって異なる場合があります。Apacheは最も一般的なオプションなので、ここでは.htaccessを使用してApacheを有効にする方法を説明します。
FTPでWebサーバーに接続し、以下のファイルを作成します。
.htaccessルートディレクトリで、.htaccessファイルを編集し、以下のような設定にします。
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule><FilesMatch "\.(html?|txt|css|js|php|pl)$"> SetOutputFilter DEFLATE</FilesMatch>あなたのサイトで圧縮が機能しているかどうかわからない場合は、このツールを使ってテストしてください。
最大限の効率を得るためには、CSSの検査、クリーニング、最適化の方法も学ぶ必要があります。
- 2021-03-14 09:00 に公開
- 閲覧 ( 27 )
- 分類：プログラミング
