PageSpeed InsightsはWebページの読み込み時間を短くするための方法を提案してくれるGoogleのサービスです。
検索のGoogle様が提案するんだらか、やっておいて損はない！たぶん検索数増えるんじゃない？ということで、PageSpeed Insightsのスコアの上げ方を載せておきます。
ちなみに、このサイト、
denshikousaku.netのPageSpeed Insightsのスコア
ちょこちょこ対策してモバイルが88/100で、PCが95/100になりました。対策前はモバイルが70、PCが80ちょっとくらいでした。
ちなみにPageSpeed Insightsにはユーザーエクスペリエンスというスコアもあります。
ユーザーエクスペリエンスはユーザにとっての使い勝手みたいな項目だと思います。最近のWordpressのテーマを使っていれば、何もしなくても90以上いきます。
最初にやること
何はともあれ、最初にPageSpeed Insightsにアクセスして自分のサイトのスコアを確認します。
基本的に70でギリギリ合格だと思います。
70を切ると、おそらく検索で不利になっているんじゃないかと思います。
いくつか対策すれば90点前後にすることができます。
とてもがんばれば100点も取れるかもしれませんが、90から100にする労力と効果を考えると、90ぐらいで満足しておくのが幸せだと思います。
それでは自分のサイトのスコアを確認して、
“修正が必要”と“修正を考慮”に記載された項目を対策しましょう。
下記で、スコアアップに効果的、または簡単にすこあアップできる対策の仕方を説明します。
圧縮を有効にする
まず最初にやるべきことは圧縮を有効にすることです。
これだけでスコアが10くらいあがります。
分析したPageSpeed Insightsに圧縮を有効にするという項目がなければ、既に圧縮済みです。やったね！ 圧縮を有効にするという項目があれば、最優先で対策しましょう！
圧縮を有効にする方法はサーバーによって異なり、いくつか方法があります。
まず最初に一番手っ取り早いのが.htaccessに下記のコードを追加する事です。
サイトのトップページと同じ場所
wordpressなら一番上のフォルダです。
.htaccess
<ifModule mod_deflate.c> 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 </ifModule>
追記し終わったらPageSpeed Insightsにアクセスして、再分析してみてください。スコアが上がって、圧縮を有効にするという項目が消えていたら圧縮成功です。
.htaccessに追記しても圧縮が有効にならない場合、サーバーの設定をいじくる必要があります。
自分がサーバー管理者の場合、素直にmod_deflateを入れましょう。
apache2.2系の場合
sudo a2enmod deflate
sudo a2enmod headers
apache2.4系の場合
httpd.confの下記のコードのコメントを外す
LoadModule deflate_module modules/mod_deflate.so
apache2を再起動してdeflateの設定は完了です。
PageSpeed Insightsで再分析すれば、圧縮が有効になっていると思います。
レンタルサーバーの場合
レンタルサーバーでmod_deflateが入っていない場合、厄介です。ロリポップなんかは入っているそうですが、さくらは入っていないそうです。
さくらはphp.iniを編集できるらしいので、それで圧縮に対応しています。
php.ini
zlib.output_compression=1 #On
ただこれは、あまりよろしくない方法だそうです。
WP Super Cacheからよくわからないメッセージが表示されるようになります。mod_deflateがない場合に設定しましょう。
あとmod_deflateをインストールした状態で、
WP Super Cacheでの圧縮は推奨されていないようです。
mod_deflateをインストールしていない状態でWP Super Cacheの圧縮を有効にすると、gzipが機能しているっぽいですが、PageSpeed Insightsでは圧縮できていないと文句がきます。
mod_deflateをインストールしている状態でWP Super Cacheの圧縮を無効にしても、gzipは機能していてPageSpeed Insightsでも圧縮が有効になっています。WP Super Cacheの圧縮を有効にするとWP Super Cacheで生成したgzファイルをブラウザに送信していました。
とりあえずGoogle様には逆らうな！ということで、
mod_deflateは有効にしてしまいましょう。WP Super Cacheでの圧縮はお好みで。
mod_deflateを有効にすれば、WP Super Cacheで圧縮しようがしまいが、スコアには関係なかったです。
各種プラグインをインストールする
ここはwordpressを使っている事を前提に書いています。
まだ、wordpressを使っていない人、使おうよ！楽だよ。
wordpressのプラグインを使う事で下記の必要項目/考慮項目の対策を取る事が出来ます。
・スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
・CSSを縮小する
・HTMLを縮小する
・JavaScriptを縮小する
レンダリングブロック対策にAsynchronous Javascriptをインストールする
wordpressのプラグイン、Asynchronous Javascriptをインストールするとレンダリングのブロックを軽減できる場合があります。
軽減でいる場合がある、と書いた理由は、軽減できない場合があるからです。インストールして、PageSpeed Insightsの分析をかけて、スコアが上がったら採用です。スコアが下がるようなら削除してしまいましょう。
Asynchronous Javascriptには設定は必要ありません。インストールしてプラグインを有効にするだけです。
ちなみに、このサイトにAsynchronous Javascriptをインストールしたらサイト内で使っているいくつかのJavascriptが動かなくなったので、結局削除してしまいました･･･。
各種ファイルを縮小するAutoptimize
wordpressのプラグイン、Autoptimizeで、Javascript、CSS、HTMLを縮小する事が出来ます。
ただし縮小するファイルによって逆にスコアが悪くなる場合があるので、注意が必要です。
Autoptimizeをインストールして有効にします。
Autoptimizeの設定画面に行き下記の3つのチェックボタンをチェックします。
Optimize HTML Code
Optimize JavaScript Code
Optimize CSS Code
Save Changes and Empty Cacheをクリック
PageSpeed Insightsの分析をかけて、スコアが上がったらOKです。スコアが下がるようならJavaScriptかCSSの片方、もしくは両方を削除して再分析にかけましょう。一番良いスコアがでるようにチェックを入れてください。
ちなみに、Optimize JavaScript Codeをすると、動かないJavascriptが出てきてしまったため、このサイトではOptimize JavaScript Codeのチェックをはずしています。
WP Super Cacheを使う
WP Super Cacheの設定の仕方を見て、WP Super Cacheを設定しましょう。PageSpeed Insightsのスコアは少ししか上がりませんが、たぶんキャッシュで早くなるのではなかろうか？
以上がPageSpeed Insightsのスコアの上げ方でした。
他に画像のサイズを最適化させたりがありますが、めんどくさいだけです。サイト全体で同じ画像を使っているような場合は最適化してください。それ以外は不要です。mod_expiresを使うことで“ブラウザのキャッシュを活用する”項目をある程度対策できますが、スコアが1も上がりませんでした。
.htaccessに追記
<IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access 7 days" ExpiresByType application/javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" ExpiresByType text/css "access plus 1 year" ExpiresByType text/html "access plus 7 day" ExpiresByType text/x-javascript "access 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/x-shockwave-flash "access 1 year" </IfModule>
(スコアを上げる効果はほとんどない・・・)
PageSpeed Insightsのスコアの上げ方の肝は、圧縮を有効にして、プラグインを入れて調整する。これでスコアが20くらいよくなるのです！
コメントを残す