WEBサーバの設定による高速化

Last Updated on

はじめに

AMP化や画像そのものを軽量化するといったファイル容量を減らす施策だけではなく、WEBサーバの設定でサイトのレスポンス速度の向上させることができます。

gzipの導入

物理的にファイルのサイズを圧縮することやシンプルなコンテンツに作り替えは、Google Page Speed Insightにおいても推奨されている項目の1つではありますが、サーバ側の設定において、通信方式にgzipを組み込むことも有効な手段になります。

このgzipは、Apacheであればmod_deflateの導入により実装可能です。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# gifやjpgなど圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

# htmlやcssなどは圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

また、NginxではデフォルトでgzipのHTTP圧縮通信に対応しており、ginx.confにおいて、

gzip on;
gzip_types image/png image/gif image/jpeg text/javascript text/css;

といった記述することで簡単に導入できます。

どういった仕組みか

gzipは、サイト上のコンテンツを圧縮して、転送量を減らすことで高速表示を可能にするモジュールです。転送量が減る反面、CPUの処理は増えるため、CPUの処理能力にボトルネックがある場合は逆にレスポンス速度が低下してしまう恐れがあります。

圧縮といえば、身近にあるものとして、zip形式やtgz形式のファイルがあります。これらの圧縮技術と同様で、クライアントからホストサーバにリクエストが行われた際、サーバ上で予めコンテンツを圧縮して、クライアントにデータを返送するといった仕組みになります。

ホストサーバでは圧縮処理が行われることになるので、大量のリクエストが発生する場合は、むしろレスポンス低下を招くことになりますが、貧弱な共有サーバを使用していない限り、パフォーマンスは向上します。

Google Speed Insightにより評価される項目の1つ

何より注目するべきところは、サイトにgzipが導入されていると、Google Page Speed Insightで評価される点です。

Enable text compression

通信量が減るということは、ファイル容量が減ることと同じになるので、当然スピードの改善にはなりますが、Googleは【First Contentful Paint】も評価基準の1つとしています。つまりサーバへの問い合わせ後、何らかのコンテンツがクライアント側に表示されるタイミングも重要視しているのです。
gzip処理をおこなうことにより、サーバに大きな負荷が掛かってしまうと、そもそも初回レンダリングが遅くなってしまう可能性があるので、First Contentful Paintが遅くなってしまうようであれば、導入は控えたほうが良いです。

Browser cachingの導入

通信量を削減するもう1つの手段として、Browser cachingの導入が挙げられます。

gzipと同様にSpeedInsightにも関連する重要な項目の1つです。
しかしながら、gzipと大きく異る点として、Browser cachingはサーバ負荷が掛かりません。

これもWEBサーバがApacheであれば、.htaccessなどに記載することで実現可能です。
※サンプルはちょっと強めのキャッシュですので適宜調整してください

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
Nginxであれば、nginx.confに以下のような記述を行う。

expires 10d;

どういった仕組みか

その名の通り、クライアント(ユーザ)側のブラウザにコンテンツをキャッシュさせる技法です。サーバサイドの設定でブラウザにリソースを保持させる期間を指定することになります。

しかしながら、デメリットもあります。
ブラウザ側に保持されてるキャッシュデータを手動でクリアしない限り、サーバ側のコンテンツが更新されたとしても、指定保有期間が切れるまで古いデータが表示されることになります。

常にコンテンツが更新されるようなリピートユーザ向けのサイト運営が行われている場合、過度にキャッシュを効かせると不都合が生じる可能性があります。

gzipと同じくGoogle Speed Insightにより評価

Browser Caching

クライアント側でコンテンツデータが保持されることにより、通信処理自体が発生しませんので、ほぼ間違いなくサイトの高速化が図れると言えるでしょう。

まとめ

データ通信量を最小限に抑えることは、通信速度を向上させるよりも効率的ではありますが、ただ闇雲にgzip、Browser cachingを導入すれば良いというわけではありません。
その特色や仕組み、メリット・デメリットを理解した上で、導入前と導入後のサーバレスポンスや通信負荷をしっかりと確認してください。
適切なサーバ設定で最大限のパフォーマンスを発揮できるようにチューニングを行えるようにしましょう。

当サイトの運営者。
主にSEO、SXO、Googleの考え方について、現場での経験をもとに、どのように対策を行えば良いかを具体的に解説できるよう努めています。詳しくはプロフィールをご覧ください。

記事が気に入ったらシェアをお願いします!

, , , , , , ,