重いサイトはユーザーもGoogleも避ける
WordPressはアクセスがあった際にシステムが動作しWebサイトを表示する動的サイトのため、システムが無くHTMLファイルを表示するだけの静的サイトに比べ、表示速度が遅くなりやすいです。
また記事中の画像の量やアクセス数の増加などにも比例して重くなり、運用のし方も積もり積もって表示速度に影響します。
Googleはインターネットユーザーがページの表示速度を重視していることを把握しており、2018年7月よりページの読み込み速度を検索ランキングの指標にすることを発表しています。
WordPressサイトであってもGoogleに「速い！」と認められる対策を紹介します。
WordPressが遅くなる原因を潰して高速化する
Googleがチェックする速度の指標はGoogleが公開している「PageSpeed Insights」で測ることができます。
サイトのURLを送信するだけで表示速度やソースが分析され、改善点を詳しく提案してくれます。
主な提案は以下になり、これらを一つずつ潰して高速化します。
- HTMLを縮小する
- CSSを縮小する
- JavaScriptを縮小する
- 画像を最適化する
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
- サーバー側で対応が必要なもの
- 圧縮を有効にする
- サーバーの応答時間を改善する
- ブラウザのキャッシュを活用する
リソース（HTML、CSS、JavaScript）を圧縮する
PageSpeed Insightsでは「HTMLを縮小する」「CSSを縮小する」「JavaScriptを縮小する」と個別に挙げられますが、対策は共通しています。 ホワイトスペース（改行、スペース）を除去してソースコードを圧縮します。
ソースコードは人が読みやすくするために改行やスペースを入れますが、それらもファイルサイズに含まれます。サイト表示時にホワイトスペースは不要なので除去します。
WordPressプラグイン「Autoptimize」で簡単に対応できます。
Autoptimizeの設定
「Autoptimize」をインストール・有効化したら「設定」→「Autoptimize」を開きます。
「HTML コードを最適化」と「CSS コードを最適化」にチェックを付け「変更を保存してキャッシュを削除」をクリックします。以上でHTMLとCSSの最適化が完了します。
なおAutoptimizeでのJavaScriptの最適化は推奨しません。WordPress本体のJavaScriptとテーマやプラグインのJavaScriptが干渉しエラーを起こす可能性が高く、サイトの表示が崩れたり正しく機能しなくなることがあります。
エラーが出ないよう対応する労力は甚大で、ここを妥協しても80点以上のスコアを出せるためHTMLとCSSの対応のみで問題ありません。
画像を最適化する
画像のファイルサイズを削減します。
- 画像は適切な多きさか（縦横ピクセルサイズ）
- 画像に適したファイルフォーマットを使っているか（jpg、gif、png）
以上を考慮したうえで、さらにWordPressプラグイン「EWWW Image Optimizer」でファイルサイズを削減できます。
「EWWW Image Optimizer」の設定方法は以下の記事で紹介していますので参考にしてください。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
HTMLコード内のJavaScript/CSSの読み込み方を調整します。
「Internet Explorer」や「Google Chrome」などインターネットブラウザーは、HTMLの<head>タグ内のファイル読み込みが完了するまでページの描画が止まります。これはレンダリングブロックと呼ばれ、一つ一つは0.1秒未満の一瞬ですが積み重なれば表示が遅くなります。
WordPressはテーマやプラグインのJavaScript/CSSを<head>タグ内で多数読み込むため、レンダリングブロックの対策が必要です。
CSSのレンダリングブロック対策
上記リソースの圧縮でも利用したWordPressプラグイン「Autoptimize」で対応できます。
「設定」→「Autoptimize」を開き、画面右上の「高度な設定を表示」をクリックします。
画面下側「その他オプション」の「連結されたスクリプト / CSS を静的ファイルとして保存」にチェックが付いていることを確認してください。
以上の設定はデフォルトのため、CSSの最適化を行うだけで複数のCSSファイルが１つに結合されます。
CSSファイルの読み込みが１回まで軽減され十分速くなるのですが、PageSpeed Insightsで診断するとその１回を指摘するため、Autoptimizeの設定でゼロにすることも可能です。しかしデータ転送量が増えるなどデメリットと、環境により実測は遅くなる可能性もあるなど考慮すべき点が多いため、今回は割愛します。
JavaScriptのレンダリングブロック対策
テーマのfunctions.phpを利用したカスタマイズで対応します。
function move_scripts(){
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'move_scripts' );
参考： https://ja.wordpress.org/plugins/speed-up-javascript-to-footer/
functions.phpへ以上のコードを適用することで、WordPressがHTMLに書き出しているJavaScriptの大半を<head>タグから出してフッターへ移せます。テーマやプラグインによっては強制的に<head>タグへ書き出す場合もありますが、動かすとエラーの原因になるため手を触れず妥協しても問題ありません。
サーバー側で対応が必要なもの
WordPress側では対応できずサーバーエンジニアやサーバー事業者側の対応が必要な項目です。専用サーバー、VPSなどでなければ手が出せませんが、参考までに紹介します。
圧縮を有効にする
WebサーバーからWebサイトコンテンツをgzip圧縮し軽量化した状態で配信するよう、Webサーバーの設定で対応します。データサイズが減るため表示速度が高速化します。
サーバーの応答時間を改善する
サーバーの応答時間が0.2秒を超えると「遅い」と診断されます。サーバーのハードウェア性能、サーバーOS、ミドルウェア、設定など様々な要因からなるため下記Googleの提案をもとにボトルネックを調査しつつ改善します。
ブラウザのキャッシュを活用する
画像やJavaScript/CSSなど更新頻度の低いファイルをキャッシュできるよう、Webサーバーのレスポンスヘッダにキャッシュ情報を設定します。ユーザー側でキャッシュを持つため表示速度が高速化します。
まとめ
PageSpeed Insightsへの対策を紹介しましたが、WordPressはテーマやプラグインなど多数の要因からPageSpeed Insightsの診断スコアを100点にすること、提案を全てクリアすることは困難です。
Good: ページには、パフォーマンスに関するおすすめの方法が最大限適用されており、最適化の余地がほとんどありません。ページのスコアは 80 以上になります。 https://developers.google.com/speed/docs/insights/about
Googleも以上のように公言しており、80点を目安に対応しましょう。
90点より上へ突き詰めるほど高難易度かつ低効果で費用対効果が低くなってきます。
高速化されたサイトはユーザーにとって快適なサイトになり、PVや利用率の向上に繋がります。Googleは内容も踏まえて快適なサイトを「良いサイト」と認識し検索上位に上げます。
高速で快適なサイト作りは現実の空間作りと通じます。お客様にとって快適なサイトを提供するため参考にしていただければと思います。
