Server

[WordPressのSEO対策]PageSpeed Insightsのスコアを上げる方法

投稿日:2017年11月13日 更新日:

はじめに

WordPressでプログを公開し始めて、もう半年以上も経ちますが、SEO対策はほとんどやっていませんでした。

さすがに少しぐらいはSEO対策をやろうと思い、エンジニアリングでできそうなところとして、GoogleのPageSpeed Insightsのスコアを上げる対策をしてみました。

基本的なことですが、下記の対応をするだけこのブログサイトのスコアは常時80以上のスコアをキープできるようになりました。ぜひ、参考にしていただければと思います。

現状のスコアと改善点を確認する

何はともあれ、現在のスコアと改善を確認するところからですね。

こちらのサイトで計測したいウェブページのURLを入力して、分析ボタンを押してください。

暫くすると現状の「スコア」と「適用可能な最適化のリスト」が表示されます。この「適用可能な最適化」を一つずつ改善していけばスコアは上がります。

とはいえ、一つずつ見ていくのは大変と思いますので、下記に代表的な対策例を紹介していきます。

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

Googleのサイトでも改善方法が記載されていますが、nginxをご利用であれば下記をnginx.confに追加していただくだけで一気に改善されます。

ポイントは、expiresを7日以上にすることです。もちろん、指定した期間はブラウザにキャッシュされてしまいますので、もし画像を差し替える場合は注意が必要です。ファイル名を変更して、公開をし直すなどが必要になります。

圧縮を有効にする

ページ上の圧縮可能なリソース(HTML / CSS / JavaScriptなど)をgzip圧縮で圧縮することでリソースのダウンロードの時間を短縮します。これも下記をnginx.confに追加するだけです。

ポイントは、gzip_typesにcss / javascriptを追加することです。何も追加しないとtext/htmlだけの圧縮になります。

HTML/CCS/JavaScriptを縮小する

HTML/CSS/JavaScriptなどのアセットをMinifyするツールをかなりありますので、ご自身で使い慣れているものがあればそれを利用しても良いと思います。

WordPressをご利用の型であれば、やはりプラグインを活用するのが簡単だと思います。オススメは、「Fast Velocity Minify」です。WordPress管理画面にログインして、[プラグイン]-[新規追加]からインストールし、有効にするだけです。

画像を最適化する

Googleのサイトにもありますが、画像圧縮ツールを使用するのが簡単です。WordPressのプラグインもあるようですが、現在ある画像を一気に圧縮させる方法を紹介します。月に1回程度に夜間などにcronで定期実行するのも良いと思います。注意点としては、下記のようにGoogle推奨のツールで圧縮しても、GoogleのPageSpeed toolsでまだ最適化が不足していると指摘されることもありますが、それはある程度許容するしかないですね。

レンダリングをブロックしている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も下部に移動させる必要があります。

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

この対応は、最新のWordPressでは改善済みかもしれませんが、私たちのブログでは若干効果がありましたので対応しました。

記事の抜粋を表示させる「the_expect()」という関数が遅いので、結果が同じになるように下記のように書き換えをしました。

「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のスコアが上がりますので、ぜひ皆さんもやってみてはいかがでしょうか。

また、さらにスコアを上げるためには、ミドルウェアのパラメータチューニングなども必要になると思いますので、アクセスが増加したら、きっちり再チューニングをしていこうと思います。

page_footer_300rect




page_footer_300rect




-Server
-,

執筆者:


  1. […] [WordPressのSEO対策]PageSpeed Insightsのスコアを上げる方法 […]

comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

DockerでRails + Vue.jsの環境を作ってみる

1 はじめに1.1 前回までのあらすじ1.2 今回の趣旨1.3 環境2 MySQLのUTF-8対応3 Node.jsをRubyコンテナに組み込む4 Webpackerを使用してVue.jsをインストー ...

Conohaのサーバーを借りて、CentOS+MySQL+nginxの環境を作ってみた。

1 はじめに1.1 環境2 Conohaでサーバーをレンタル3 サーバーの初期設定3.1 サーバーにrootユーザーでログイン3.2 ユーザー作成3.3 SSHログインを許可3.4 秘密鍵を生成3.5 ...

Google

【Google Invisible reCAPTCHA】Railsサイトにキャプチャ導入

1 はじめに2 reCAPTCHAとは3 Site keyとSecret keyの取得4 Rails gemの導入5 サイトへの組み込み6 さいごに はじめに こんにちは、最近休みなく仕事をいただいて ...

icon

ブログ運営で最も気をつけること(障害報告)

1 お詫び2 障害報告書2.1 障害内容2.2 障害期間2.3 障害の原因2.4 障害の長期化の原因2.5 詳細3 対応3.1 決済に使用するクレジットカードを変更する3.2 一つ前のOSバージョンで ...

aws

MyCoachの本番環境をAWS上に構築する 〜EC2編〜

1 はじめに1.1 関連記事2 MyCoachで利用しているインスタンス3 設定する項目4 キーペアの作成5 セキュリティグループの作成6 インスタンスの作成6.1 Webサーバのインスタンスを作成6 ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年11月
« 10月 12月 »
 1234
567891011
12131415161718
19202122232425
2627282930