
Contants
90点も夢じゃない、簡単3つの対策
SEO対策の1つでGoogleスピードテスト対策をします。
60点台のサイトを90点越えした方法をご紹介。
- プラグインで画像の最適化
- gzipサーバ圧縮設定
- キャッシュ(プロキシ・ブラウザ)設定
プラグインで画像の最適化
画像の最適化は効果的な対策です。
作成した画像は、圧縮方法や形式の最適化がされていない場合が多い為、サイズが肥大化しています。
アップロードした画像を最適化して配置することで、表示スピードを上げ離サイト率を下げることができます。
そのような場合におすすめなプラグインは『EWWW Image Optimaizer』です。
- アップロード時に自動最適化
- 未最適化分も一括置換

更新頻度が高くない場合や、画像を更新されない場合は有効化せず、一括置換するのもサーバ負荷が減っていいと思います。
一括最適化の方法
未最適化分の一括最適化方法を解説します。
プラグインの設定より『一括最適化』をクリックします。
『最適化されていない画像をスキャンする』をクリックします。
『最適化を開始』をクリックします。
最適化結果が表示されて一括最適化が完了します。
gzip設定【.htaccessへのコピペ】
gzip圧縮データにしてサーバ送信する設定をします。
最新ブラウザはgzipファイルを解読できるので、サーバから送り出しする事でスピードアップできます。
サーバ側の.htaccessファイルに下記設定をコピペするだけでOKです。
共通設定
ファイル形式など共通の設定項目
# ETags(Configure entity tags) を無視する設定
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>
# MIME Type 追加
<IfModule mime_module>
AddType text/cache-manifest .appcache
AddType image/x-icon .ico
AddType image/svg+xml .svg
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType application/x-font-opentype .otf
AddType application/vnd.ms-fontobject .eot
</IfModule>
Gzip圧縮設定
※古いブラウザでは解読できない為無効化します。
※画像や圧縮済みコンテンツはスルーします。
# Gzip圧縮の設定
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
# 古いブラウザでは無効
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|eot|woff|woff2)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-opentype
</IfModule>
キャッシュ設定【.htaccessへのコピペ】
画像やスクリプトなどキャッシュをする設定をします。
一度サーバより読み込んだファイルを保持し、再利用する事で2回目以降のアクセススピードを向上させます。
ブラウザとプロキシでのキャッシュ設定を行います。
gzip設定同様に、.htaccessファイルに下記設定をコピペします。
プロクシ/ブラウザキャッシュ設定
# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# プロキシサーバーが間違ったコンテンツを配布しないようにする
Header append Vary Accept-Encoding env=!dont-vary
</IfModule>
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<ifModule mod_expires.c>
ExpiresActive On
# キャッシュ初期化(1秒に設定)
ExpiresDefault "access plus 1 seconds"
# MIME Type ごとの設定
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/js "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
まとめ
プラグインと.htaccessのファイル設定だけで劇的にスピードテストをクリアすることができます。
最低限の設定ですので、皆さんもぜひ挑戦してみてください。