圧縮されたHTMLのしくみと必要な理由

圧縮されたHTMLのしくみと必要な理由

あなたがウェブサイトを運営しているなら、あなたはすでにその方法を知っているはずです 適切な画像形式を使用する Web用に画像を最適化します。画像圧縮はよく知られている方法ですが、HTML圧縮は見過ごされがちです。これは、メリットに見合うだけの価値があるため、残念なことです。





この記事では、HTMLファイルを縮小するための2つの主な方法、HTMLファイルを縮小する理由、およびその方法について説明します。



圧縮と縮小

HTMLファイルの最適化に関しては、主に2つの方法があります。 圧縮 と 縮小化 。表面的には似ているように聞こえますが、実際には2つの異なる手法であるため、混同しないでください。





縮小化

縮小化は、ソースコード内の不要な文字や行を削除することと考えることができます。インデント、コメント、空の行などを考えてください。これらはHTMLでは必要ありません。ファイルを読みやすくするために存在します。これらの詳細をトリミングすると、何にも影響を与えることなくファイルサイズを削減できます。

サンプルHTMLページ：





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

元のサイズ：354。縮小サイズ：272。節約：82（23.16％）。

多くのWeb開発者とサイト所有者はJSファイルとCSSファイルのみの縮小を予約していますが、この時代遅れの慣習は間違いです。 HTMLの縮小も重要です。



2000年代には、縮小ツールはまれでした。何かが変更されるたびに、手動でファイルを縮小する必要がありました。 HTMLファイルはJSファイルやCSSファイルよりも頻繁に変更されるため、当時は毎回縮小するのが面倒でした。今日では、それは論点です。

圧縮

ユーザーがWebサイトにアクセスするときは、HTTPプロトコルを使用してアクセスします。ブラウザは特定のページのリクエストをWebサーバーに送信し、Webサーバーはそのページを見つけて、そのページのコンテンツを訪問者のブラウザに送り返します。



ただし、HTTPプロトコルは圧縮をサポートしているため、Webサーバーはページを訪問者に送信する前に圧縮でき（サーバーの設定で圧縮が有効になっている場合）、訪問者のブラウザーはページを解凍して元の状態に戻すことができます。

最も一般的な圧縮方式は GZIP 、を使用するファイル形式です。 可逆圧縮アルゴリズム DEFLATEと呼ばれます。

アルゴリズムは、HTMLファイル内のテキストの繰り返しの出現を探し、それらの繰り返しの出現を前の出現への参照に置き換えます。各参照は単純に2つの数字です。参照がどれだけ前にあるか、および参照している文字数です。

次のようなテキストの文字列について考えてみます（GZIP Webサイトからの例）。

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番目のオカレンスは、最初のオカレンスを参照します。これは、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ファイルと、その中に存在する繰り返しの量について考えてみましょう。次のようなほぼすべてのタグ

、のような対応する終了タグがあります

。さらに、次のような多くのタグが全体で繰り返されます。

、

、

、

  • 、など。属性も頻繁に繰り返されます。

    class

    、

    href

    、 と

    src

    。 GZIP圧縮がHTMLで非常に効果的である理由は簡単に理解できます。

    唯一の欠点は、ページが要求されるたびにWebサーバーが圧縮を実行するためにもう少しCPUを必要とすることです。しかし、最近ではCPUはそれほど問題にならないため、エントリーレベルのWebホスティングを使用している場合でも、GZIPを有効にする方が、有効にするよりも有効にする方がほとんどの場合に適しています。

    圧縮して縮小する必要がある理由

    2つの主な利点があり、どちらも今日のモバイルを多用するWeb環境では非常に重要です。

    より高速なページ読み込み

    HTMLミニファイアは、基本設定を使用すると、平均してファイルのサイズを約3％削減できます。オプションの詳細設定を使用すると、HTMLファイルをさらに3〜7％削減でき、最大10％削減できる可能性があります。これは、ページの読み込み時間の短縮に直接つながります。

    使用される帯域幅が少ない

    10個のファイルがあり、それぞれが50KBから45KBに縮小され、合計で50KBの縮小が発生したとします。そして、あなたのウェブサイトが毎日平均1,000人の訪問者にサービスを提供し、各訪問が平均10ページであるとしましょう。 HTMLの縮小だけで、帯域幅の使用量が1日あたり50 MB（1か月あたり1.5 GB）削減されます。

    圧縮+縮小

    ご覧のとおり、HTMLの縮小はそれ自体で役立ちます。特に、サイトが大きくなり、ファイルが大きくなり、トラフィックが増えると便利です。ご了承ください GoogleのPageSpeedガイドライン HTMLを縮小することをお勧めします。懐疑的な場合は、それ以外の方法で納得させてください。

    Mac上のiMessageがメッセージを送信しない

    しかし、HTML最適化の優れている点は、縮小または圧縮のいずれかを選択する必要がないことです。 あなたは両方を行うことができます！実際、あなたは したほうがいい 両方を行います。

    平均すると、GZIP圧縮によってHTMLファイルが70〜90パーセント縮小されることが期待できます。控えめな圧縮見積もりを使用した上記の例を使用すると、縮小されたHTMLファイルはそれぞれ45KBから13.5KBになり、合計で365KBの縮小になります。非縮小/非圧縮と比較して、サイトの帯域幅は1日あたり365 MB（1か月あたり11 GB）削減されています。

    また、帯域幅の節約に加えて、エンドユーザーのブラウザがダウンロードする必要があるのは1ページあたり50KBであるのに対し13.5KBであるため、各ページの読み込みが劇的に速くなります。

    HTMLを圧縮および縮小する方法

    幸いなことに、どちらも最近は非常に難しくなく、それらを設定するための技術的なノウハウはあまり必要ありません。

    WordPressプラグイン

    WordPressサイトを運営している場合は、プラグインを1つインストールするだけで、圧縮と縮小の両方のメリットを享受できます。

    ほとんどのキャッシュプラグインは、単にページをキャッシュするだけではありません。例えば、 WP最速キャッシュ と W3トータルキャッシュ どちらにもワンクリック設定があり、HTMLミニファイとGZIP圧縮をオンにできます。その他の機能により、ページの読み込みがさらに高速化され、帯域幅の使用量が削減されます。

    もし、あんたが それだけ 縮小したい場合は、 HTMLを縮小する プラグイン。シンプルで、HTML / CSS / JSをサポートしており、縮小方法を少し調整できます（削除するかどうかなど）。

    http:

    と

    https:

    URLから）。

    静的HTMLミニファイア

    HTMLファイルが静的である場合（つまり、CMSまたはWebフレームワークによって動的に生成されない場合）、HTMLファイルの2つのセットを維持できます。編集を容易にするために縮小されていない「ソース」セットと「縮小された」セットです。ソースファイルに変更を加えるたびに作成します。

    縮小するには、次のいずれかのツールを使用します。

    これは、WordPressのようなCMSから離れて、静的サイトジェネレーターを使用する場合に実行可能な手法です。

    GZIP圧縮を有効にする

    GZIP圧縮を有効にする手順は、使用しているWebサーバーソフトウェアによって異なる場合があります。 Apacheが最も一般的なオプションであるため、.htaccessを使用してApacheを有効にする方法について説明します。

    FTPを使用してWebサーバーに接続し、次のファイルを作成します。

    .htaccess

    ルートディレクトリにあります。 .htaccessファイルを編集して、次の設定を行います。


    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.*


    SetOutputFilter DEFLATE

    あなたのウェブサイトで圧縮が機能しているかどうかわかりませんか？ このツールでテストしてください 。

    究極の効率を得るには、 CSSをチェック、クリーンアップ、最適化する方法について学びます 。

    共有 共有 つぶやき Eメール すぐにWindows11にアップグレードする必要がありますか？

    Windows 11は間もなく登場しますが、できるだけ早く更新する必要がありますか、それとも数週間待つ必要がありますか？確認してみましょう。

    次を読む     関連トピック
    • プログラミング
    • HTML
    • ウェブ開発
    著者について ジョエル・リー（1524の記事が公開されました）

    Joel Leeは、2018年からMakeUseOfの編集長を務めています。彼は理学士号を取得しています。コンピュータサイエンスの分野で、9年以上のプロの執筆および編集の経験。

    JoelLeeのその他の作品

    ニュースレターを購読する

    ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

    購読するにはここをクリックしてください