dbit.jpのPageSpeed Insightsの得点をチェックしたところ、モバイル：55点 パソコン：71点でした。90点以上を達成するための対応策をまとめてみました。対応後、モバイル：90点 パソコン：98点になりました。100点はなかなか難しいです。
圧縮を有効にする
gzip や deflate を使用してリソースを圧縮ということで、mod_deflateの設定を .htaccessに記入します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<IfModule mod_deflate.c> SetOutputFilter DEFLATE BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip 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_expiresの設定を.htaccessに記入しキャッシュ設定をします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<ifmodule mod_expires.c> AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg ExpiresActive On ExpiresByType image/jpg "access 1 week" ExpiresByType image/jpeg "access 1 week" ExpiresByType image/gif "access 1 week" ExpiresByType image/png "access 1 week" ExpiresByType text/css "access 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType image/x-icon "access 1 week" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" </ifmodule> |
※「ブラウザのキャッシュを活用する」は、Googleアナリティクスを入れている場合は、どうしても analytics.jsが残ってしまいます。そこは諦めるしかなさそうです(1点マイナス)。
画像を最適化する
◆jpegoptimでjpegを最適化
jpegoptimをインストールします。
|
1 |
[root@test-server ~]$ yum --enablerepo=epel install jpegoptim |
|
1 2 |
#画像フォルダに移動して、一括でjpeg画像を最適化します。 [root@test-server ~]$ jpegoptim --strip-all *.jpg |
上のコマンドで圧縮した場合、まだ圧縮できるとPageSpeed Insightsでアラートが残ったりします。その際は 品質を90%にして圧縮します。(90%であれば、そんなに画像の見た目は変わりません）
|
1 |
[root@test-server ~]$ jpegoptim --max=90 *.jpg |
◆optipngでpngを最適化
optipngをインストール
|
1 |
[root@test-server ~]$ yum install optipng |
|
1 2 |
#画像フォルダに移動して、一括でpng画像を最適化します。 [root@test-server ~]$ optipng *.png |
サーバーの応答時間を短縮する
php6の方は php7へのアップデートをおすすめします。
php7+ opcache で かなり高速化されます。
|
1 2 3 |
#php7とモジュールのインストール [root@test-server ~]$ rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm [root@test-server ~]$ yum --enablerepo=remi-php70 -y install php php-mbstring php-pear php-fpm php-pdo php-intl php-mysqlnd php-pecl-redis php-xml php-gd php-json php-zip php-mcrypt php-pecl-zendopcache |
|
1 2 3 |
#opcache.max_accelerated_filesの数値を増やします [root@test-server ~]$ vi /etc/php.d/10-opcache.ini opcache.max_accelerated_files=20000 |
mod-pagespeedの導入
これも php7+opcacheに引き続き サーバー自体の設定になりますが、
mod-pagespeedを導入しました。
apacheでのinstall方法は以下となります。https://www.modpagespeed.com/doc/download
|
1 2 3 4 |
[root@test-server ~]$ wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-stable_current_x86_64.rpm [root@test-server ~]$ yum install at [root@test-server ~]$ rpm -U mod-pagespeed-*.rpm [root@test-server ~]$ systemctl restart httpd.service |
mod-pagespeed設定を少し変えます。
|
1 2 3 4 5 6 7 8 |
[root@test-server ~]$ vi /etc/httpd/conf.d/pagespeed.conf #以下を追記 ModPagespeedRewriteLevel CoreFilters ModPagespeedEnableFilters prioritize_critical_css ModPagespeedEnableFilters defer_javascript ModPagespeedEnableFilters sprite_images ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp ModPagespeedEnableFilters collapse_whitespace,remove_comments |
この導入により、ページ表示速度が少し上がったとともに、[CSS を縮小する][JavaScript を縮小する]のエラーが消えました。
WordPressサイトの場合
◆CSSを縮小する
WordPressプラグイン Autoptimizeを入れて、Autoptimize設定で、[HTML コードを最適化][JavaScript コードの最適化][CSS コードを最適化]にすると、
簡単に縮小されます。ただ、サイトによっては 最適化すると jsが動かなかったりと不都合が出たりしますので、プラグイン導入後、動作確認はした方が良いです。
※この処理をしても エラーメッセージは消えたものの 点数が変わらなかったので、私は 余計なプラグインを入れたくなかったので、導入したものの外しました。私の場合は、その部分は、mod-pagespeedに任せました。
◆使用しないWordPressのデフォルト javascriptを外す
このサイトでは絵文字は使わないので、
WordPress絵文字対応「wp-emoji」を外しました。
テーマフォルダにあるfunctions.phpに以下を追加。
|
1 2 |
remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); |
◆ページによって使わないcss,javascriptを外す
このサイトでは、contact-form-7プラグインを使っているんですが、そのcss,javascriptの読み込み を問い合わせ画面のみに限定しました。
テーマフォルダにあるfunctions.phpに以下を追加。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function deregister_styles() { if ( !is_page( 'contact' ) ) { wp_dequeue_style( 'contact-form-7' ); } } add_action( 'wp_print_styles', 'deregister_styles', 100); function deregister_scripts(){ if ( !is_page( 'contact' ) ) { wp_deregister_script( 'contact-form-7' ); } } add_action( 'wp_print_scripts', 'deregister_scripts', 100); |
まとめ
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構築にお困りでしたら、ご相談にのらせていただきます、ぜひご連絡ください。