追記：この記事は2017年の記事になります。現在WordPressを使用していないため、現在は別アプローチをしています。
サイトの表示スピードもSEOに影響があるらしい
どこまで影響があるか分かりませんが、早い方が良いことには変わりありませんよね。サイトの読み込みスピードを計測するサービスは色々ありますが、今回はGoogle Speed Insightsを利用します。
このサイトをオープンした時、トップページの点数はPCで50点台、スマホでは40点台と芳しくありませんでした。減点対象になる主な点ですが、
- CSS・JSの読み込み
- 無駄に大きい画像
- サーバ応答速度
- キャッシュの保存期間
になるかと思います。リダイレクトについても項目もありますが、一般的なサイトでは問題にならないでしょう。画像については適切なサイズに変更しアップロードし直します。Retina対応で大きな画像を使用している場合は物言いがつくかもしれませんが、その時は諦めましょう。コーディングで工夫が必要なのはそのほかの項目です。
それらの対策の結果、それぞれ90点台と80点台まで引き上げることができました。実際に行った対策としては、
- キャッシュ保存期間の設定
- gzip圧縮
- JavaScript読み込み順の最適化
- CSS読み込み順の最適化
- キャッシュ系プラグインの導入
以上の5点です。いずれの対策も技術的な知識やWordPressの工夫が必要になります。
この中で手っ取り早いのは5のプラグインの導入です。ただ自分はこれを一番最後に行いました。というのも、キャッシュ系プラグインはシステムとも絡んでくるので、場合によっては表示が崩れたりする可能性があります。なので、CSS・JS周りの対策を講じた上で、ダメ押し的に導入しました。幸い問題なくインストールできました。
それぞれについて簡単に説明していきます。
キャッシュ保存期間の設定
この対策は5のプラグインでもできますが、手動でもできます。htaccessに記述を追加します。やり方は先人たちが詳しく解説しているのでそちらに譲ります。
たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！
ただし、Google Analyticsを導入している場合、アナリティクスコードのキャッシュの有効期限が2時間になっており、これは変更できず、なおかつ物言いが付きますがこれは諦めましょう。その他、共有ボタンなどの外部Javascriptを読み込んでいる場合も言われます。
gzip圧縮
サーバにもよりますが、gzip圧縮に対応している場合はhtaccessに設定することで、gzipによるファイル配信が可能になります。当サイトではあまり変更しない、css, javascriptなどをgzipにしています。
さくらインターネットの場合WAF（Webアプリケーションファイアーウォール）を有効にしているとgzipで配信ができなくなるので注意です。
Javascript・CSSの読み込み順の最適化
これが一番厄介で、コーディングの手間もかかります。
jsの読み込みは<head>タグ内ではなく、</body>直前にしています。注意したいのがjQueryなどのライブラリ系は先に読み込まないとうまく動作しなくなる可能性があります。特にWordPressではプラグインとの兼ね合いもあるので注意が必要です。このサイトではwp_enqueue_script関数を使って管理しています。管理の仕方に関しては以下のページに詳しく書いてあります。
functions.phpでJSやCSSを一元管理する| WordPressテックラボ | [Smart]
Googleからはファーストビュー部分のCSSは直接HTMLに書け、とアドバイスされます。このサイトの主なファーストビューはナビゲーションとロゴマークなので、そこの部分を<head>タグ内に<style>タグで書きました。
ファーストビュー以外のCSSについてはgoogleのアドバイスのCSS の配信を最適化する にあるように、jsによって動的に生成し、DOMが読み込んでからCSSを読み込んでいます。この方法だと、<head>タグの前に<link>が生成されますが、最近はCSSの<link>を必ずしも<head>タグ内に入れなくても良いらしいです。
Allow pingback/prefetch/stylesheet links in body
キャッシュ系プラグインの導入
最後にWordPressキャッシュ系プラグインを導入しました。このサイトに入れているのはW3 Total Cacheです。先にも書きましたが、システムに介入するプラグインですので、導入にはご注意ください。
その他
その他、CSSの記述の見直し（冗長な記述を最適化）とさくらインターネットいわくPHPのバージョンを7にした方が早いらしいのでバージョンアップしました。
ユーザビリティとしての表示速度
ここではGoogle Speed Insightsの高得点を目標にしましたが、第一義的にユーザビリティとして、表示速度を早い方が良いです。ただ、デザイン的に上記（特にCSS読み込みなど）対策がうまくいかない場合や大して効果が出ないもあります。もし、最速を目指すとなるとデザイン段階から速度を考慮した構成にする必要があります。
最速を目指すにはできるだけ、シンプルなデザインの方がいいですね。