WordPressを使っていると、SEO対策に向けたチューニングと言ってもどこまでできるのか。。。不安になります。
今回は徹底的にやれることをやってみました。
GoogleSearchConsoleでサイトマップの登録
ヘッドライン
まずはこれは最低限やることです。
もともとサイトマップ登録はしていましたが、細かい内容は見ていませんでした。
ウェブに関する主な指標で、警告・エラーを出ているものを徹底的につぶそう！
今回はこれです。
改善が必要や、警告が出ているものを1つずつつぶすことでパフォーマンスが改善され、結果的にGoogleの検索結果にいい影響を及ぼすはずだと考えました。
今回は改善が必要というのがたくさん出ていましたので、これをひとつづつ解決してみようと思います。
画像形式をwebp（ウェッピー）に変換
まず、ほとんどのページで使っている画像がjpgやpngになります。
Googleは新しい画像形式webp（ウェッピー）を優遇というか評価向上の指標としているようですので、webpへ変換することを目指しました。
今回は、WebP Expressという、プラグインで対応しました。
nginxだとWebP Expressでうまくいかない?
実は以前からやろうと思いながらうまくいきませんでした。
理由がわからず、おそらくPleskだと、GDモジュールもしくはImageMagickが上手く動かないんじゃないかと勝手に推測していましたが、実は違っていました。
基本的にapacheWEBサーバーなら、.htaccessでリライトルールを利用することで、すべての画像をwebp形式の画像にリライトしてくれることで既存の記事やページの画像を一括変換してくれるのですが、nginxでは、.htaccessが使えません。
よくよく読むと、nginxようのディレクティブ設定をすれば簡単にできることがわかりました。
これで難なく対応できました。
Googleのパフォーマンスチェックによると、画像をwebp形式にすることで3秒近くのパフォーマンス改善につながるとのことでした。
nginxのばあい、webp画像を書きだしする必要があります。
nginxのディレクティブを書けば問題なくwebp形式の画像を呼び出してくれるようになりますが、それだけではいけません。
Apacheのばあい、webp形式の画像を、アクセスのあるたびに書きだししてくれるようですがnginxのばあいそうはいきません。
Bulk Convertというボタンから一括書き出し処理を行うことであらかじめ画像を書きだしてしまうことで処理ができるようです。
cssやjavascriptなどの外部ファイルの呼び出し
cssやJavascriptなどのライブラリのロードを先に行うことで、本文の読み込みまでに時間がかかるため、遅延読み込みをするようにとアドバイスがありました。
ようは、先に文章を呼び出して、その後デザイン用のライブラリをロードさせることで、本文の閲覧にタイムラグを生じないようにする必要があると認識しました。
また同時に、同じように画像のロードも後回しにするようにとのことでした。
これらを一括で設定できるプラグインがありました。
Autoptimizeです。
Autoptimizeを導入し、テーマデザインに合わせて設定することで、ロード遅延や画像のあと読みは容易に設定できました。
また、外部ライブラリ参照するべきものと、直接記載するものを分けて設定もできるので、デザインに影響のない範囲で、細かく設定しました。
これにより、2秒程度読み込みが早くなったようです。
AutoOptimizeの設定を気を付けないと、むしろ遅くなることも?
当方が設定をしていくと、あるタイミングからむしろ遅くなってしまうことがわかりました。
原因は、【ファイルの連結】オプションです。JSファイルとCSSファイルでファイルを連結するというチェックがあります。
これは、WEBページ内で複数のjsファイルやcssファイルをロードするようになっていたときに、すべてを連結して一つのファイルにしてしまうというオプションです。
小さなjsファイルがたくさんあるのであれば、この連結も有効なのでしょうけど、ここ最近のテーマやプラグインのjsファイルは1ファイル自体も結構量が多いのです。
これらを全部結合してその結合したファイルをロードしようとすると、1ファイルのロード時間が異常に重くなり、かつ、jsファイルをロードしないと描画できないサイトの場合、その思いファイルをロードしてからサイトの描画になりますから、結果サイトの反応が遅いサイトになりかねません。
基本的に結合オプションは外す方向で生きましょう。
gzip圧縮をnginxで
Googleからは、画像も含め様々なファイルの圧縮を書けるように指示がありました。
プラグインもあるのですが、圧縮についてはWEBサーバーレベルでも対応できますので、nginxのディレクティブにgzip圧縮の指定を行いました。
キャッシュを持つ
更にはGoogleはWEBキャッシュを持たせることを推奨しています。
サーバーキャッシュもさることながら、情報更新が少ないページはブラウザキャッシュもなるべく利用するようにとのことでした。
このどちらも、プラグインで可能ですが、こちらについても、nginxのディレクティブに記載することでキャッシュを持たせるように設定しました。
プラグインでできることとWEBサーバーでできること
もちろん、キャッシュや圧縮についてはプラグインもあり、そちらで対応することもできるのですが、プラグインを入れれば入れるほどWordPressが重くなるのもありますので、WEBサーバーのディレクティブを書くことで解決できるものは、できるだけWEBサーバー側で処理するように心がけました。
AMP対応
そして最後に、モバイルページのAMP対応です。
私が採用しているテーマはAMPに対応していなかったのでAMPデザインを構築できるプラグインAccelerated Mobile Pagesを導入しました。
こちらは、アドセンス広告なども、差し込めますので、使い勝手が良かったので採用しました。
その結果どうなった？
チューニングを始めて約1か月程度です。
目に見えて効果が大きく表れたわけではありませんが、現状では右肩上がりが続いています。
現在1日2500PV程度まで伸びましたので、今年中に1万PVくらいは目指せるのではないかと勝手に考えています。