分析と改善

圧縮を有効にする【PageSpeed Insights gzip圧縮編】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
圧縮を有効にする【PageSpeed Insights gzip圧縮編】

Google PageSpeed Insights使ってますか?
言わずと知れたモバイル、PCの表示速度や最適化の方法も提案してくれる無料のツールですね!

今回はその提案の中から「圧縮を有効にする」についてピックアップしていきたいと思います。
「スピードアップデート(Speed Update)」に合わせ、サイトスピードの改善・表示速度の高速化UX(ユーザー体験)の向上に、是非役立ててくださいね。

【Google PageSpeed Insights】に関する記事はこちら

Google PageSpeed Insights「圧縮を有効にする」とは

そもそも「圧縮を有効にする」るとはどういうことでしょう。
Google PageSpeed InsightsのDevelopersには以下のように記載があります。

要約するとこうです。
最近のブラウザは、gzipによって圧縮されたデータ(HTML、CSS、JavaScriptファイルなど)をサポートしています。
そのため、サーバーからデータを出力する前にgzipに圧縮すると、通信の負担、ページの読み込み時間が軽減できます。
圧縮されたデータはブラウザで展開し、描画されるため、閲覧には支障はありません。
推奨される方法はお使いのサーバーから「gzip」の項目を探し、サーバーの推奨設定に沿って設定することです。
参照:Google PageSpeed Insights Developers

つまり推奨される方法としては、サーバー内の「gzip」の設定を推奨される方法で設定することです。

「圧縮を有効にする」する方法

では、どのようにgzipの設定を推奨される方法で設定をすればよいのでしょうか?
結論から言うと「.htaccess」にディレクティブ(プログラムなどの処理方法の指示)を記述する方法が一般的です。
.htaccessは多くのサーバーで対応しており、サーバーをディレクトリ単位で制御するためのファイルです。シンプルなテキストファイルなので編集は容易に行なえます。

またWordPressや各CMSに対応したプラグインなどもありますので.htaccessを触りたくない方や、CMSをお使いの方はそちらをご利用ください。
ただし、プラグインは読み込み速度に影響しますので、極力使わない方がページ速度のためには良いと言えます。

その他、手動でもファイルをgzip圧縮することができますが、専門知識が必要になります。
さらにファイルを修正した際には、再度gzip圧縮をする必要が出てきます。
そのため修正や更新頻度の高いWebサイトには不向きと言えます。

.htaccessが使用できるサーバーの確認方法

.htaccessは多くのサーバーで対応していますので、大手のレンタルサーバーを利用している場合、基本的に問題ないでしょう。
ただしサーバーによってはApacheの機能を有効にする必要があります。
不明な場合はサーバー会社のWebサイトやお問い合わせにてご確認ください。
大抵の場合「.htaccessの作成/編集」の項目が設けられていますので簡単に確認できます。

.htaccessの編集 記述する内容は3つ!

上記でも触れましたが、「圧縮を有効にする」には.htaccessに記述する方法が一般的です。
ルートディレクトリにある.htaccessファイルをダウンロードし、下記の記述を追記するだけで設定ができるのでとても簡単です。
※念のため.htaccessをバックアップしてから作業をすると良いでしょう。最悪の場合、サイトが閲覧できなくなることもあります。

記述する内容は3つ!
下記の他に「古いブラウザで無効」などの記述もありますが、今回は割愛します。

  • サーバーにmod_deflateがある場合、圧縮を実行
  • 圧縮させないファイルの記述
  • 圧縮させるファイルの記述

サーバーにmod_deflateがある場合、圧縮を実行

これを記述することでmod_deflateを読み込み、DEFLATEフィルタを指定し、圧縮を実行させます。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

圧縮させないファイルの記述

GIF、JPG、PNG、ICOなどの画像の圧縮を除外します。
画像はすでに圧縮されていることがほとんどなので、圧縮をかける必要がありません。
また重複するとサーバーに負担がかかるためこともあるので避けたほうが良いでしょう。

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

圧縮させるファイルの記述

htmlやCSS、フォントなどのファイルを圧縮します。
使用していないファイルの種類があっても、そのまま記述しておいても問題ありません。

AddOutputFilterByType DEFLATE

.htaccessの記述例

具体的には下記の内容を.htaccessに追記します。
なるべく.htaccessの上の方に記述するようにしましょう。
コピペして使用する際には、余分なスペース等が入らないようご注意ください。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

#圧縮しないファイル
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

#圧縮するファイル
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>

まとめ

Google PageSpeed InsightsのDevelopersによれば、専門的な知識やスキルを必要のように記載されています。
しかし最近のサーバーで.htaccessが使えないサーバーはあまりないので「圧縮を有効にする」には、.htaccessがおすすめです。(サーバーによっては.htaccessが使えない場合もありますが、プラグインや手動でも対応可能です)
手っ取り早く、コピペでも対応できる事がほとんどですので、早急にサイトスピードの改善・表示速度の高速化をしたい方は是非試してみてください。

【Google PageSpeed Insights】に関する記事

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

Webサイトから集客できてないと感じる方へ

サイトは持っているものの上手く集客出来ていないということはありませんか?
当社が長年培った「サイトから効率的に集客を得る方法や手段」を駆使し、あなたのサイトに合わせた適切な施策を行います。
また、サイトの規模や予算感などを踏まえ、適切なサイト改善や集客に繋がるコンテンツのアドバイスを行います。
今すぐ改善部分を知りたい方やWebサイトを広告媒体として更に活用したいとお考えの方は、ぜひお問い合わせください。

Webサイト集客でお困りの方はこちら!

コメントを残す

*