.htaccessとトラブルシューティングでGZIPをセットアップする方法

公開: 2025-02-25

WordPressサイトをスピードアップしたいですか? .htaccess経由でGZIP圧縮を有効にすることは、ページの読み込み時間を改善するためのシンプルで効果的な方法です。

この記事では、GZIP圧縮、それがどのように機能するか、および.htaccessファイルを介してそれを有効にする方法を発見します。さらに、一般的な問題のトラブルシューティングに関するいくつかの役立つヒントについて説明します。

GZIPとは何ですか?それはどのように機能しますか?

GZIPは、Webサイトファイル(HTML、CSS、JavaScriptなど)を縮小する圧縮方法であるため、より速くロードされます。テキストで繰り返されるパターンを見つけ、より短いコードに置き換えることで機能します。

電子メールで送信する画像とテキストを含むファイルをジップアップするときのようなものです。ファイルははるかに小さくなるため、送信してダウンロードします。同様に、WebサイトファイルがGZIPで圧縮されると、ブラウザはそれらをすばやく「解凍」し、ページのコンテンツをより早く表示できます。ファイルサイズを70〜80%削減できるため、Webサイトの読み込みが速くなります。

これがどのように機能しますか:

  1. サーバーはファイルをより小さなサイズに圧縮します。
  1. 圧縮されたファイルは、大きなオリジナルの代わりに訪問者のブラウザに送信されます。
  1. ブラウザは自動的にそれらを開梱し、通常どおりWebサイトを表示します。
GZIP圧縮の説明 - 出典:WPロケット
GZIP圧縮の説明 - 出典:WP Rocket

以下の例では、GZIP圧縮の前に329文字のコードスニペットがあります。圧縮後、それはたった142文字です。

GZIP圧縮がどのように見えるか - 出典:WP RocketGZIPガイド
GZIP圧縮がどのように見えるか - 出典:WP RocketGZIPガイド

WebサイトのパフォーマンスでGZIPを使用することの利点

読み込み時間が短くなります

GZIPは、HTML、CSS、およびJavaScriptファイルのサイズを最大70-90に減らします。これは、ブラウザが小さなファイルをダウンロードし、ページをより速くロードすることを意味します。

  • GZIPなし:ブラウザは、大規模で非圧縮されていないファイルをダウンロードしますが、これには時間がかかります。
  • GZIP:ファイルは転送が小さく速く、訪問者の画面でより速くレンダリングできるようにします。

帯域幅の使用量が少ない

小さいファイルは、サーバーとブラウザ間のデータ転送が少ないことを意味します。これは、モバイルユーザーや接続が遅いユーザーにとって特に役立ちます。

改善された最大の満足した塗料

最大のコンテンツペイント(LCP)は、Webページのパフォーマンスを測定するためにGoogleによって作成された3つのコアWebバイタルの1つです。最大の満足している塗料は、最大の可視要素(ヒーローイメージや見出しなど)がロードにかかる時間を測定します。これは、ユーザーがページの準備が整っているように感じる瞬間です - よりマイナーな要素がまだロードされていても。

LCPグレード - 出典:PagesSpeed Insights
LCPグレード - 出典:PageSpeed Insights

LCPを改善するために、GoogleはGZIPまたはBrotli圧縮を実装することをお勧めします。実際、PageSpeed Insightsでパフォーマンステストを実行すると、GZIPまたはBrotliを指す「テキスト圧縮を使用する」という推奨事項が表示される場合があります。

GZIP圧縮監査 - 出典:PagesSpeed Insights
GZIP圧縮監査 - 出典:PagesSpeed Insights

理由? GZIPはWebサイトファイルのサイズを縮小し、小さなファイルがより速く読み込まれ、ページの最大の可視部分(LCP)がより速く表示されます。

SEOの改善

最後に、GoogleはランキングファクターとしてLCPを使用します。グリーンLCPスコアは、ランキングの可能性を高め、より多くのオーガニックトラフィックをもたらします。 LCPが迅速にロードされた場合、ユーザーはページにとどまり、それに関与し、サイトを信頼する可能性が高くなります。さらに、GoogleはFast Webサイトに報いるため、GZIPの負荷時間を改善することで、サイトの検索エンジンのランキングが利益を得ることができます。

.htaccessでGZIPをセットアップします

.htaccessファイルにGZIP圧縮を実装する前に、いくつかの検査を行います。

GZIPがサイトで既に有効になっているかどうかを確認してください

GZIPがサイトで既に有効になっているかどうかを確認する最も簡単な方法は、ブラウザ開発ツールを使用することです。 [ビュー] > [開発者] > [開発者]ツールからアクセスできます。次に、 [ネットワーク]タブを開き、ヘッダーを選択します。コンテンツエンコード行の隣に「GZIP」を見ることは、GZIPがサイトでアクティブ化されることを意味します。

DEVツールを介してGZIPが有効になっているかどうかを確認-Source:WP Rocket
DEVツールを介してGZIPが有効になっているかどうかを確認します - 出典:WP Rocket

.htaccessファイルを見つけてバックアップします

.htaccessファイルは、WordPressインストールのルートディレクトリ(WP-Config.phpおよびWP-Adminと同じフォルダー)にあります。表示されていない場合は、FTPクライアントまたはファイルマネージャーに「隠されたファイルを表示」してください。

.htaccessファイルの検索-Source:my ftp
.htaccessファイルの検索 - 出典:my ftp

.htaccessファイルは、WordPressサイトの重要な構成ファイルであり、誤った変更を加えるとWebサイトが破損する可能性があります。慎重に進み、サイトとファイルのバックアップを作成することが不可欠です。

.htaccessがGZIPセットアップにとって重要な理由です

.htaccessファイルは、Webサイトにさまざまなディレクティブを設定できるApacheサーバー構成ファイルです。 1つのオプションは、GZIPがHTML、CSS、JavaScriptファイルなどのリソースを圧縮できるようにすることです。

.htaccessファイルに特定のGZIPルールを追加すると、ユーザーのブラウザに送信する前にサーバーが圧縮されるようになります。平易な英語では、.htaccessファイルはブラウザとサーバーと「通信」して、指定されたファイルタイプ(HTML、CSS、JavaScriptなど)を圧縮します。

GZIP圧縮に.htaccessを使用することの利点

.htaccessを使用してGZIPを有効にすることは、メインサーバー構成を変更せずにGZIP圧縮にさまざまな設定を適用することを意味します。これにより、サーバーのコア設定を変更せずに帯域幅の使用を削減できます。

.htaccess経由でGZIP圧縮を有効にするための段階的なガイド

.htaccessファイルを使用してWebサイトでGZIP圧縮を有効にするためのステップバイステップガイドを次に示します。予防策として、WordPressサイトのコードを編集する前に、サイトをバックアップすることをお勧めします。

ステップ1:.htaccessファイルにアクセスします

  • FTPクライアント(Filezillaなど)を使用してサイトに接続します。
  • ルートディレクトリの.htaccessファイルを探してください(wp-config.phpおよびwp-adminと同じフォルダー)。

ステップ2:.htaccessファイルを編集します

  • .htaccessを右クリックして編集を選択します。
  • ファイルの上部に次のコード行を追加します。このコードは、圧縮するファイルタイプをサーバーに指示します。
 <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML, and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for ancient browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

ステップ3:.htaccessファイルを保存して再アップロードします

  • 新しい.htaccessファイルは次のようになります。
新しいコードを備えた.htaccessファイル - 出典:my .htaccessファイル
新しいコードを備えた.htaccessファイル - 出典:my .htaccessファイル
  • 変更を保存します。

GZIP圧縮が機能しているかどうかを確認する方法(3つの方法)

GZIP圧縮がサイトで機能するかどうかを確認するための3つの簡単な方法が存在します。

方法1:ブラウザ開発ツールを確認します

  • ブラウザの開発者ツール(F12またはCtrl + Shift + I in Chrome)を開きます。
  • [ネットワーク]タブに移動し、ファイルを選択します
  • ヘッダーセクションを確認してください。 「コンテンツエンコード:GZIP 」が表示されている場合、GZIPはアクティブです。
Chrome Dev Toolsを使用したGZIP圧縮の確認 - ソース:Chrome Dev Tools
Chrome Dev Toolsを使用したGZIP圧縮の確認 - ソース:Chrome Dev Tools

方法2:PageSpeed InsightsまたはGTMetrixを使用します

PageSpeed InsightsとGTMetrixは、Lighthouseテクノロジーを使用してWebサイトのパフォーマンスとコアWebバイタルを分析します。パフォーマンススコア、推奨事項、およびサイトの速度を向上させるための実用的なヒントが含まれます。 GZIPがサイトでアクティブ化されているかどうかを確認する方法は次のとおりです。

  • PagesSpeed Insightsを開きます( GTMetrixで同じ手順に従うことができます)。
  • テストを実行し、監査結果を確認します。
  • 「テキスト圧縮を有効にする」などの警告が表示された場合、GZIPは有効になりません。
PagesSpeed Insights(診断セクション)でGZIP圧縮を確認する - 出典:PagesPeed
PagesSpeed Insights(診断セクション)でGZIP圧縮を確認する - 出典:PagesPeed
  • GZIPがアクティブな場合、この監査は合格した監査セクションに表示されるはずです。
PagesSpeed InsightsでGZIP圧縮を確認する(合格監査セクション-Source:PagesPeed
PagesSpeed InsightsでGZIP圧縮を確認する(合格監査セクション - 出典:PagesPeed

方法3:オンラインGZIPテストを使用します

オンラインGZIPテストツールは、GZIP圧縮がウェブサイトでアクティブであるかどうかをチェックします。 WebサイトのURLを入力し、ツールは、サーバーがファイルを圧縮してから訪問者のブラウザに送信するかどうかを分析します。

  • Speed GZIPテストのギフトに移動します。
  • WebサイトURLを入力してください。
  • テストURL >>ボタンをクリックして、テストを実行します。
  • 結果を読んでください:GZIPが有効になっているかどうか、どのくらいの圧縮が適用されているかがわかります。
オンラインツールでGZIP圧縮を確認する-Source:GiftofSpeed
オンラインツールでGZIP圧縮を確認する - 出典:GiftofSpeed

一般的な問題のトラブルシューティング

GZIP圧縮は通常うまく機能しますが、潜在的な問題に注意するのは良いことです。 GZIP圧縮とそれらの修正方法に直面する可能性のあるいくつかの一般的な問題を以下に示します。

1.すべてのコンテンツが圧縮されていません

問題:GZIPを有効にした後、一部のコンテンツが圧縮されない場合があります。

修正:圧縮用の.htaccessファイルに正しいファイルタイプ(HTML、CSS、JS)をリストしていることを確認してください。

2。サーバーの互換性の問題

問題:.htaccessを使用したGZIP圧縮は、主にApacheサーバーで動作します。 nginxやIISなどの別のサーバーを使用する場合、.htaccessの設定が機能しない可能性があります。

修正:ホスティングプロバイダーまたはサーバー管理者に連絡して、GZIPがサポートされているかどうかを確認し、サーバーの一意のセットアップについて尋ねます。

3。テストツール

問題:GZIPをテストするとき、一部のツールはそれが機能していることを示していますが、他のツールはそうしません。

修正:ブラウザ開発者ツールや信頼できるオンラインテスターなどの信頼できるテストツールを使用して、GZIPがアクティブで動作していることを確認します。

4。CDNまたはプロキシサーバーとの互換性

問題:CDNまたはプロキシサーバーを使用する場合、GZIPが独自の圧縮設定を有効にしていれば正しく機能しない場合があります。

修正:CDNまたはプロキシプロバイダーに確認して、GZIPの設定が適切にセットアップされるようにします。 WebサーバーとCDN/Proxyサーバーの両方で設定を調整する必要があります。

ボーナス:WordPressでGZIP圧縮を簡単にする方法

WordPressでGZIP圧縮を有効にする最も簡単で安全な方法は、WP Rocketなどのパフォーマンスプラグインを使用することです。このツールは、アクティブ化されたときにパフォーマンスのベストプラクティスの80%以上を自動的に適用し、技術的なスキルは必要ありません。

アクティブ化されるとすぐに、WP Rocketは、ページキャッシュ、ブラウザーキャッシュ、 GZIP圧縮、プリロード、重要な画像最適化、自動レイジーレンダリングなど、必須の最適化を自動的に適用します。

WPロケットによる自動GZIP圧縮 - 出典:WPロケット
WPロケットによる自動GZIP圧縮 - 出典:WPロケット

アクティブ化されると、WP RocketはCSSおよびJavaScriptファイルを模倣してサイズを縮小し、キャッシュとリンクをプリロードしてコンテンツの配信を加速し、サーバーの負荷を減らします。上に、ワンクリック機能を簡単に有効にして、ウェブサイトの速度をさらに向上させることができます。 CSS最適化タブのように見える方法は次のとおりです。

自動GZIP圧縮を含む完全なパフォーマンス最適化プラグイン - 出典:WPロケット
自動GZIP圧縮を含む完全なパフォーマンス最適化プラグイン - 出典:WPロケット

サーバーの設定を手動で微調整したり、.htaccessファイルを編集したり、コードを追加したりすることは危険です。 1つの小さな間違いは、サイトを壊したり、修正に時間がかかる可能性があります。 WPロケットは重いリフティングを処理し、サイトのパフォーマンスを最適化し、GZIP圧縮を可能にするためのより速く、より安全なソリューションになります。

まとめます

GZIP圧縮を有効にすることで、サイトを即座にスピードアップできます!なぜ待つのですか?これは、ファイルを小さくし、読み込み速度と全体的なパフォーマンスを向上させる単純なプロセスです。 .htaccessファイルを介してコードを使用して手動で行うか、WPロケットなどのプラグインを使用できます。

WP Rocketを使用すると、コードを破るリスクはありません。14日間のマネーバック保証で心配することはできません。