HTMLおよびその他のWebサイトコードを圧縮する方法

公開: 2022-02-25

ページ速度は、Webサイトの主要なパフォーマンス指標です。 HTMLやその他の種類のコードを圧縮すると、40〜70％の利益を得ることができます。 方法は次のとおりです…

Webサイトのユーザーは、コンテンツが高品質で、すばやくアクセスできることを期待しています。 これは、最適なユーザーエクスペリエンスにとって重要です。 幸いなことに、数行のコードといくつかの小さなトリックで、HTMLやその他のWebサイトのコードを40％から70％（場合によってはそれ以上）圧縮することが完全に可能です。 この記事では、その方法を紹介します。

>>ページ速度の最適化：読み込み時間を改善する方法<<

なぜウェブサイトのコードを圧縮するのですか？

今、あなたは自分自身に質問をすることができます：なぜ私は私のウェブサイトのソースコードを圧縮する必要がありますか？ 圧縮されていないので、結局のところ、サイズはわずか数百キロバイトです。

答えは非常に簡単です。ウェブサイトの読み込みが速いほどユーザーエクスペリエンスが向上し、コンバージョン率、ページでの滞在時間、ページビュー、バウンス率にプラスの効果があります。 コンバージョン率は、eコマースなどのセクターでの成功に直接影響するため、特に重要です。

たとえば、eコマースの巨人であるAmazonの場合、読み込み時間の遅延が100ミリ秒の場合、売り上げは約1％になります。 通年で予測すると、これは約2億4500万ドルの費用になります。 これらの数値は、Webサイトの読み込み速度がもたらす可能性のある劇的な影響を示しています。

また、モバイルデバイスでインターネットを閲覧するユーザーの割合も考慮する必要があります。 LTEおよび4Gワイヤレスネットワークのカバレッジには、まだまだ改善の余地があります。 つまり、モバイルインターネットはかなり遅いことが多く、ページ速度を速くすることがさらに重要になります。

たとえば、GzipまたはDeflate圧縮テクノロジーを使用することで、読み込み時間を大幅に改善できます。 これにより、コストと帯域幅が節約されます。

HTML、CSS、JavaScriptを圧縮することは可能ですか？

圧縮は、転送時間を短縮するために、要求されたデータをクライアントに凝縮します。 Webで最も一般的な2つの圧縮方法は、GzipとDeflateです。 圧縮プロセスでは、ドキュメント内で類似した文字列が検索され、同じプレースホルダーを持つ一時的な文字列に置き換えられます。

したがって、2つの方法は、HTML、CSS、およびJavaScriptファイルを圧縮するのに理想的です。これらの方法には、多くの場合、多くの同一の文字列が含まれ、通常は多くの空白行とスペースが含まれるためです。 どちらの方法も、比較的少ない労力で実装またはアクティブ化できます。

ウェブサイトのコード圧縮のしくみ

圧縮データを転送するには、クライアントのブラウザが最初にデータの圧縮送信を要求する必要があります。 これは、「Accept-Encoding：gzip、deflate」という仕様のHTTPリクエストを介して行われます。 1つまたは複数の圧縮方法を指定でき、この例ではgzipとdeflateの両方の圧縮データを受け入れます。

これが単なる要求であり、要求ではないことが重要です。その結果、サーバーは圧縮されたデータで応答する必要がありません。 データが圧縮形式で利用できない場合は、圧縮せずに要求元のクライアントに送信されます。

すべてのブラウザの約90％が圧縮をサポートしています。 「Accept-Encoding」設定、またはブラウザで許可されている圧縮方法への影響は、通常は存在しません。 ブラウザがデータ圧縮をサポートしているか、サポートしていないかのどちらかです。

サーバーは、いわゆる「HTTP応答」でクライアントのHTTP要求に応答します。 サーバーが圧縮をサポートしている場合、データは圧縮されてクライアントに転送されます。 次に、サーバーはHTTP応答のヘッダーで、たとえば「Content-Encoding：gzip」を報告します。 それ以外の場合、要求されたリソースは非圧縮でクライアントに送信されます。

Webサイトのコード圧縮はどのようにアクティブ化されますか？

サーバーによっては、適切な構成ファイルを使用してコード圧縮をアクティブ化できます。

Blogbeitrag

図1： Gzip圧縮の図

.htaccessを使用したコード圧縮のアクティブ化

NCSA準拠のWebサーバー（たとえば、最も広く使用されているWebサーバーであるApache）では、.htaccess構成ファイルを使用してGzip圧縮をインストールできます。 これを行うには、次のコードを.htaccessファイルに挿入する必要があります。

<IfModule mod_deflate.c>
<FilesMatch "\\。（js | css | html | xml）$">
SetOutputFilter DEFLATE
</ FilesMatch>
</ IfModule>

まず、「<IfModule mod_deflate.c>」を使用して、拡張モジュールmod_deflateがインストールされているかどうかを確認するためのテストが実行されます。 その場合、「<FilesMatch」\\。（js | css | html | xml）$”>”を使用すると、フィルターを適用するファイルの種類が決まります。

この例では、JavaScript、CSS、HTML、およびXMLファイルをフィルター処理します。 「SetOutputFilterDEFLATE」を使用すると、以前に指定されたパターンに一致するすべてのファイルがDEFLATEフィルターで送信されることが決定されます。 その後、モジュールのマッチングとクエリが再び閉じられます。

理論的には、このフィルターは他のデータタイプ（.jpg、.gif、.png画像ファイルなど）にも適用できます。 ファイルの照合は、次のように調整する必要があります。

“ <FilesMatch” \\。（js | css | html | xml | png | jpg | gif）$”>”

ただし、これらの形式は通常すでに圧縮されており、再圧縮すると画像ファイルの品質が低下することがよくあることに注意してください。 したがって、バイナリ（画像など）をアップロードする前に圧縮し、gzipを使用して圧縮しないことをお勧めします。 これには、JPEGminiやTinyPNGなどのツールを使用できます。

PHPを使用したコード圧縮のアクティブ化

サーバーの.htaccessファイルにアクセスできない場合、または個々のgzip圧縮ファイルのみを転送する場合は、次のコードを使用して圧縮を有効にするオプションがあります。

<？php ob_start（ "ob_gzhandler"）; ？>

可能であれば、この関数は最初のHTMLコードの前に配置する必要があります。

例：

<？php ob_start （ "ob_gzhandler" ）; ？>
<html>
<本体>
<p>これは圧縮されたページである必要があります。</p>
</ body>
</ html>

ウェブサイトコードを圧縮する際の5つの落とし穴

HTMLやその他のWebサイトのコードを圧縮すると、エラーやリスクが発生する可能性もあります。 次の点について考える必要があります。

1. https経由でGzipを使用すると、セキュリティの欠陥が悪用される可能性があります。 これにより、機密情報を含むファイルで問題が発生する可能性があります。 したがって、機密情報を含むファイルタイプをGzipで圧縮することはお勧めしません。

2.圧縮は、ファイルタイプまたはまだ圧縮されていないファイルにのみ適用する必要があります。 通常、画像ファイルはすでに縮小されているため、gzipでさらに圧縮しないでください。 再圧縮は逆の効果をもたらす可能性があり、ファイルサイズが大きくなる可能性があります。そうしないと、圧縮プロセスで大量のメモリが消費されます。

3.圧縮は、適切なサイズのファイルにのみ適用する必要があります。 サイズがわずか数バイトのファイルの場合、圧縮によりファイルが元のファイルよりもさらに大きくなる可能性があります。

4.圧縮段階では、圧縮しすぎないように注意してください。 多くの場合、弱いファイル、通常のファイル、および高度に圧縮されたファイルの間でファイルサイズにほとんど違いはありません。 ただし、中程度または重い圧縮には、かなり多くの計算能力が必要です。

5.圧縮プロセスは同一または反復的な文字列を置き換えるため、変数とクラス名を使用すると（たとえば、CSSファイルとHTMLファイルで）、すべての変数とクラスの名前が異なる場合よりも圧縮の成功率が高くなります。圧縮を提供します。

スリムコードのさらなる最適化対策

HTMLおよびその他の戦略の縮小

ソースコードを明確かつ簡潔に保つために、開発者は通常、ソースコードを読みやすくする改行、スペース、インデント、およびその他の文字を使用します。 後でソースコードをより適切に維持するために、特に複雑な構造とセクションは、コメントの助けを借りて文書化されることがよくあります。

開発者にとって非常に役立つものは、検索エンジンクローラーでは必要ないため、削除する必要があります。 不要な文字を切り取るのは「縮小」と呼ばれ、貴重なバイトを節約するのに役立ちます。 縮小によって節約されたバイト数は、無料のJavaScriptライブラリjQueryを使用した次の例で印象的に示されています。

バージョン2.1.4のフレームワークの元のファイルのサイズは約242kb（jQuery 2.1.4.js（非圧縮））ですが、不要な文字やコメントを削除した後のファイルサイズの縮小は約82kb（jQuery 2.1.4）です。 min.js（圧縮））。 最小化することによって、つまり不要な文字を減らすことによってのみ、ファイルサイズを約66％削減できます。 驚くべき結果。

komprimierung-e1438673459868

縮小プロセスの前後のソースコード

最小化は、HTML、CSS、およびJavaScriptファイルに対して機能します。

さらに、Gzip圧縮を使用すると、縮小されたjQueryファイルをさらに65％縮小できます。 元の242kbから、最終的には信じられないほどの29.5kbしかありません。

CSSおよびJavaScriptコードを削減するためのツール

CSSコードを減らすために、たとえばYUICompressorまたはcssmin.jsを使用できます。 JavaScriptコードを減らすために使用できるツールもいくつかあります。 Google PageSpeed Insightsは、クロージャコンパイラ、JSMin、またはYUICompressorを推奨しています。

ヒント：使用される改行、スペース、コメントは開発者にとって非常に重要であり、迅速で複雑でないメンテナンスのために、ファイルを元の状態（不要な文字を含む）と最適化/縮小された状態のファイルの両方に保持することをお勧めします。 したがって、コードは簡単に保守できますが、クローラーの場合はダウンロードもかなり高速です。

CSSファイルとJavaScriptファイルの組み合わせ

多くの場合、複数のCSSファイルとJavaScriptファイルがWebサイトのHTMLヘッダーに読み込まれます。 これらが呼び出されるたびに、これはブラウザで処理する必要があるHTTPリクエストです。 最新のブラウザは、同じドメインからの2〜8個のHTTPリクエストのみを同時に処理できます。他のすべてのリクエストは待機する必要があります。

1つのWebサイトで最大数百のHTTPリクエストが必要になる可能性があるため、これにより大きなボトルネックが発生します。 これは、たとえば、すべてのCSSファイルを1つのファイルに結合して、1つのHTTP要求のみを表すことで防ぐことができます。

<script>要素を介してロードされたJavaScriptファイルにも同じことが当てはまります。 ここでも、技術的に可能な場合は、すべてのJavaScriptファイルが1つのファイルに結合されていることを確認する必要があります。

多くの場合、各ページタイプ（たとえば、雑誌の下部と製品の詳細ページ）には、異なるJavaScript関数、したがって異なるJavaScriptファイルが必要であることに注意してください。 この場合、ページタイプごとに実際に必要なJavaScriptファイルとCSSファイルのみをロードするのが理にかなっています。 この場合、すべてのJavaScriptファイルを1つにグループ化すると、欠点が生じる可能性があります。

さらに、サブドメインまたはコンテンツ配信ネットワーク（CDN）の使用が理にかなっている場合があります。 すぐに必要とされないスクリプトとリソースは、AJAXで再ロードできます。

ウェブサイトコードの圧縮に関する概要

GzipまたはDeflateを使用してWebサイトのデータを配信することにより、読み込み時間を大幅に改善できます。 どちらの方法も、HTML、CSS、およびJavaScriptファイルの圧縮に最適です。 さらに、縮小はコードをスリムに保つためのもう1つの便利な方法です。

検索エンジンのクローラーは、ソースコードに開発者の役立つ改行やインデントなどを必要としないため、これらの不要な文字を減らすことができます。 CSSとJavaScriptコードを減らす便利なツールもあります。 これにより、多くのバイトを節約することもできます。

Webサイトで必要なHTTPリクエストが多すぎるのを防ぐために、CSSファイルとJavaScriptファイルをグループ化できます。 これらはHTTPリクエストを構成するだけであり、追加のリソースを節約します。

その結果、わずか数行のコードとWebサイトへの小さな介入でも、コードの最適な合理化を実現できます。 ウェブサイトの読み込み時間は重要なSEOとランキング要素であるため、すべてのウェブマスターは時間の経過とともにこの問題に対処する必要があります。

ウェブサイトコードの圧縮により、ユーザーエクスペリエンスが向上し、コンバージョン率や滞在期間などの他の指標にプラスの影響を与えます。 これは、会社全体の成功にとって重要な側面であり、満足のいくユーザーにつながります。

10日間の無料Ryteトライアルで、ページ速度を分析して最適化します

今すぐ始めましょう！