WEBサイト高速化の為に実際にやってみた対策まとめ

2017年9月25日 SEO NAndo

サイトを速く表示させるとSEOで高評価

サイト高速化はSEOの重要な対策のひとつ。
できるだけサイトを速く表示させる事がデザイナー及びコーダーには求められています(主にGoogleに)。

特にスマートフォンの普及により、モバイルファーストという概念からスマホブラウザを主とし、屋外の低速回線状況をも念頭に入れた、より軽量なWEBサイトがSEOの評価を得られる、というのが現状です。
そんなWEBサイトのスピードチェックは、Googleが提供する「PageSpeed Insights」というサービスで調べられます。

PageSpeed Insights

とくに何も対策をせずにチェックしてみると、まあ殆どは”Poor”と言われます。
PageSpeed Insightsの画面

PageSpeed Insightsで指摘された部分をできるだけ対応する

PageSpeed Insightsの結果が出ると、最適化が可能な内容も同時に表示されます。
この対応を行うことでスコアが良くなっていき、サイト高速化がうまくいっているという指標になります。
但し、実際に早くなっているか体感できるかはその人次第です。

それでは、指摘される項目ごとに、私が実際に行った対応方法を紹介します。

ブラウザのキャッシュを活用する

キャッシュとは、WEBサイトを構築するHTMLやCSS、Javascript、jpgやpngの画像、映像などのデータを一定期間、保存しておく仕組みのことです。
データをブラウザに保存する(よくキャッシュすると言う)事で、サーバーからダウンロードする必要がなくなり、2回目以降の訪問でサイトが高速化するのです。

このキャッシュの設定は.htaccessに以下を追記することで設定可能です。

# ブラウザキャッシュ
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 10 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType text/javascript "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType application/javascript "access plus 10 days"
</ifModule>

mod_expiresというのは、Apacheのモジュールを使用しています。
さくらサーバーなど一部のレンタルサーバーでは、.htaccessの変更ができない場合があるので、各レンタルサーバーの仕様をは要チェックです。

キャッシュの設定は以下ページを参考にさせていただきました。

.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策!

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

説明ではこのように表示されています。
具体的には、以下のコードを.htaccessに追記します。

# データ圧縮
<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>

mod_deflateというのもApacheのモジュールです。

圧縮の設定は以下ページを参考にさせていただきました。

.htaccessのmod_deflateでファイル圧縮送信で高速化でSEO対策!

画像を最適化する

画像に含まれる余計なデータを排除し、圧縮して軽量データに変換するWEBツールを使います。

JPEG 圧縮
Tiny PNG

どちらもブラウザに画像ファイルをドラッグ&ドロップするだけなので、使い方は簡単。
すべての画像を差し替えるのは大変ですが、サイトのグランドデザインで使用している画像くらいは圧縮したほうが良いと思います。

サーバーの応答時間を短縮する

レンタルサーバーの場合、スペックが標準以上あり、速度の速いサーバーに引っ越しするなどを検討する必要があります。
『そこまでするのはちょっと、、、』という事情もあると思うので、サーバーの設定を見直しレスポンスが良くなる方法を調べてみてください。

ロリポップサーバーの場合は、PHP設定で「モジュール版」を選択することで少しだけ速くなります。
※スタンダード、エンタープライズプランのみ

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

これはWordpressに限定した対応ですが、ブロックを回避する為のプラグイン「WP Deferred JavaScripts」を入れてみます。
他のプラグインで読み込まれるJSなど、自力で全てのJSをコントロールする事は困難なので、この為のプラグインで対応するのが手っ取り早いです。
WP Deferred JavaScripts

WP Deferred JavaScripts

WP Deferred JavaScriptsは、インストールして有効化するだけでOK。
再度PageSpeed Insightsで調べてみると、このJSに関する部分が表示されなくなっていれば成功です。

しかしスコアが大して変化しなかったり、逆に下がってしまった場合は使わなくても良いと思います。

またSyntax系プラグインが動作しなくなったり、サイトの不具合が起きる様な場合も使用を停止しましょう。
Syntax系プラグインについては、ソースコードを色分け表示するSyntax系プラグイン3選で触れていますのでついでにどうぞ。

サイト高速化の施策を色々やってみた結果

サイト高速化対策の結果
モバイルはまだまだですが、パソコンではまあまあ良いスコアになりました。
個人的には.htaccessによるキャッシュデータ圧縮の設定が、サイト高速化の効果が高いと実感しました。

サイトを高速化したからと言え、検索順位が上がるとかアクセスが増えるとかを保証するものではありません。
高速化を行うことでサイト閲覧のストレスをできるだけ排除し、より快適なWEBサイトにすることが結果的にSEO効果があれば良いな、くらいに考えて貰えれば幸いです。