PageSpeed Insightsで90点以上を取るために対応したこと

dbit.jpのPageSpeed Insightsの得点をチェックしたところ、モバイル:55点 パソコン:71点でした。90点以上を達成するための対応策をまとめてみました。対応後、モバイル:90点  パソコン:98点になりました。100点はなかなか難しいです。

 

PageSpeed Insights

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮ということで、mod_deflateの設定を .htaccessに記入します。

 

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

mod_expiresの設定を.htaccessに記入しキャッシュ設定をします。

※「ブラウザのキャッシュを活用する」は、Googleアナリティクスを入れている場合は、どうしても analytics.jsが残ってしまいます。そこは諦めるしかなさそうです(1点マイナス)。

 

画像を最適化する

◆jpegoptimでjpegを最適化

jpegoptimをインストールします。

上のコマンドで圧縮した場合、まだ圧縮できるとPageSpeed Insightsでアラートが残ったりします。その際は 品質を90%にして圧縮します。(90%であれば、そんなに画像の見た目は変わりません)

 

◆optipngでpngを最適化

optipngをインストール

 

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

php6の方は php7へのアップデートをおすすめします。
php7+ opcache で かなり高速化されます。

 

mod-pagespeedの導入

これも php7+opcacheに引き続き サーバー自体の設定になりますが、
mod-pagespeedを導入しました。

apacheでのinstall方法は以下となります。https://www.modpagespeed.com/doc/download

mod-pagespeed設定を少し変えます。

この導入により、ページ表示速度が少し上がったとともに、[CSS を縮小する][JavaScript を縮小する]のエラーが消えました。

 

WordPressサイトの場合

◆CSSを縮小する

WordPressプラグイン Autoptimizeを入れて、Autoptimize設定で、[HTML コードを最適化][JavaScript コードの最適化][CSS コードを最適化]にすると、
簡単に縮小されます。ただ、サイトによっては 最適化すると jsが動かなかったりと不都合が出たりしますので、プラグイン導入後、動作確認はした方が良いです。
※この処理をしても エラーメッセージは消えたものの 点数が変わらなかったので、私は 余計なプラグインを入れたくなかったので、導入したものの外しました。私の場合は、その部分は、mod-pagespeedに任せました。

 

◆使用しないWordPressのデフォルト javascriptを外す

このサイトでは絵文字は使わないので、
WordPress絵文字対応「wp-emoji」を外しました。

テーマフォルダにあるfunctions.phpに以下を追加。

 

◆ページによって使わないcss,javascriptを外す

このサイトでは、contact-form-7プラグインを使っているんですが、そのcss,javascriptの読み込み を問い合わせ画面のみに限定しました。

テーマフォルダにあるfunctions.phpに以下を追加。

 

まとめ

dbit.jpは WordPressで作成し、WordPressテーマもシンプルなものにしてますので、比較的簡単に点数をあげることができました。

サーバー自体は そこまで高スペックなものではありません。参考までに dbit.jpのサーバー環境は以下となっています。

◆サーバー
Google Cloud Platform の Compute Engine

◆サーバースペック
g1-small(vCPU x 1、メモリ 1.7 GB)

◆ゾーン
asia-northeast1-a

◆OS
CentOS7

もし、WordPress構築にお困りでしたら、ご相談にのらせていただきます、ぜひご連絡ください。



この記事をシェア

コメントを残す

one × four =