はじめに
WordPressでプログを公開し始めて、もう半年以上も経ちますが、SEO対策はほとんどやっていませんでした。
さすがに少しぐらいはSEO対策をやろうと思い、エンジニアリングでできそうなところとして、GoogleのPageSpeed Insightsのスコアを上げる対策をしてみました。
基本的なことですが、下記の対応をするだけこのブログサイトのスコアは常時80以上のスコアをキープできるようになりました。ぜひ、参考にしていただければと思います。
現状のスコアと改善点を確認する
何はともあれ、現在のスコアと改善を確認するところからですね。
こちらのサイトで計測したいウェブページのURLを入力して、分析ボタンを押してください。
暫くすると現状の「スコア」と「適用可能な最適化のリスト」が表示されます。この「適用可能な最適化」を一つずつ改善していけばスコアは上がります。
とはいえ、一つずつ見ていくのは大変と思いますので、下記に代表的な対策例を紹介していきます。
ブラウザキャッシュを活用する
Googleのサイトでも改善方法が記載されていますが、nginxをご利用であれば下記をnginx.confに追加していただくだけで一気に改善されます。
ポイントは、expiresを7日以上にすることです。もちろん、指定した期間はブラウザにキャッシュされてしまいますので、もし画像を差し替える場合は注意が必要です。ファイル名を変更して、公開をし直すなどが必要になります。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | http { ...省略 server { ...省略 location ~* \.(html|jpeg|jpg|gif|png|css|js|ico|woff|woff2)$ { access_log off; expires 7d; break; } ...省略 } ...省略 } |
圧縮を有効にする
ページ上の圧縮可能なリソース（HTML / CSS / JavaScriptなど）をgzip圧縮で圧縮することでリソースのダウンロードの時間を短縮します。これも下記をnginx.confに追加するだけです。
ポイントは、gzip_typesにcss / javascriptを追加することです。何も追加しないとtext/htmlだけの圧縮になります。
| 1 2 3 4 5 6 | http { ...省略 gzip on; gzip_types text/css text/javascript application/javascript; ...省略 } |
HTML/CCS/JavaScriptを縮小する
HTML/CSS/JavaScriptなどのアセットをMinifyするツールをかなりありますので、ご自身で使い慣れているものがあればそれを利用しても良いと思います。
WordPressをご利用の型であれば、やはりプラグインを活用するのが簡単だと思います。オススメは、「Fast Velocity Minify」です。WordPress管理画面にログインして、[プラグイン]-[新規追加]からインストールし、有効にするだけです。
画像を最適化する
Googleのサイトにもありますが、画像圧縮ツールを使用するのが簡単です。WordPressのプラグインもあるようですが、現在ある画像を一気に圧縮させる方法を紹介します。月に1回程度に夜間などにcronで定期実行するのも良いと思います。注意点としては、下記のようにGoogle推奨のツールで圧縮しても、GoogleのPageSpeed toolsでまだ最適化が不足していると指摘されることもありますが、それはある程度許容するしかないですね。
| 1 2 3 4 5 6 7 8 | # jpeg圧縮ツールのインストール sudo yum install libjpeg-turbo-utils # png圧縮ツールのインストール sudo yum install optipng # uploadsディレクトリ以下の全てのjpgファイルを圧縮する find /var/www/wp-content/uploads/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -progressive -outfile {} {} \; # uploadsディレクトリ以下の全てのpngファイルを圧縮する find /var/www/wp-content/uploads/ -name "*.png" -print | xargs optipng |
レンダリングをブロックしているJavaScript/CSSを排除
次の対応としては、JavaScript/CSSの読み込みをbody終了タグの直前に移動させることです。我々のブログでは、「STINGER8」テーマをカスタマイズしているので、修正箇所は「STINGER8」となっていますが、他のテーマでも同様に対応できると思います。
修正ファイルは「wp-content/themes/stinger8/functions.php」となります。WordPress管理画面にログインして、[外観]-[テーマの編集]-[functions.php]を選択して編集できます。
下記の「wp_enqueue_script」という関数の第5引数をtrueにすることで、body終了タグの前に配置されます。
注意点としては、body終了タグの直前などに読み込みを遅らせるため、依存しているJavaScriptが先に読み込まれるとエラーになるので、依存しているJavaScriptも下部に移動させる必要があります。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | if ( !function_exists( 'st_enqueue_scripts' ) ) { /** * スクリプトをキューへ追加 */ function st_enqueue_scripts() { wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', array(), '1.11.3', true ); wp_enqueue_script( 'base', get_template_directory_uri() . '/js/base.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array( 'jquery' ), false, true ); } } |
サーバーの応答時間を短縮する（WordPress）
この対応は、最新のWordPressでは改善済みかもしれませんが、私たちのブログでは若干効果がありましたので対応しました。
記事の抜粋を表示させる「the_expect()」という関数が遅いので、結果が同じになるように下記のように書き換えをしました。
| 1 | <?php the_excerpt(); ?> |
↓
| 1 | <p><?php echo get_the_excerpt(); //抜粋文 ?></p> |
「STINGER8」テーマの場合は、「wp-content/themes/stinger8/itiran.php」「wp-content/themes/stinger8/kanren.php」「wp-content/themes/stinger8/newpost.php」となります。こちらも管理画面からも編集できます。
その他
ここまでで十分スコアが上がっていると思います。その他としては、下記のようなものを確認してみると良いと思います。
- 不要なWordPressプラグインをアンインストールする
- SNSボタンで外部JSや画像の読み込みで最適化の指摘がある場合自前で作成する
- php-fpmのパラメータチューニング
- MySQLのパラメータチューニング
さいごに
基本的な設定をちゃんとするだけで、GoogleのPageSpeed Tools Insightsのスコアが上がりますので、ぜひ皆さんもやってみてはいかがでしょうか。
また、さらにスコアを上げるためには、ミドルウェアのパラメータチューニングなども必要になると思いますので、アクセスが増加したら、きっちり再チューニングをしていこうと思います。
