Googleでの検索結果に影響があるとされる「ページの表示速度」。気にしてますか？？
私は最近まであまり気にしていませんでした。でもページの表示速度が速い方が検索結果で上位表示される可能性が高まるのでは？ということであればやらない手はありませんね。
WordPressやブログのように動的サイト（ページへのアクセスがあってからデータをページに呼び出していくタイプのサイト）は、ページを表示するまでにいろいろな動作が加わりますから基本的にはhtmlで作成した静的サイトと比べて表示速度が劣る欠点があります。
とはいえ便利さには代えられない訳ですから、WordPressを使った上でどうやったら改善できるのか？？を研究してみました。今回はページの表示速度の分析方法と私が試して効果があったこと、なかったことについて紹介していきたいと思います。
とはいえ、サーバーの仕様やサイトの内容、使っているテーマやプラグインによって全く違う結果となることもあるでしょうから参考程度に読んでもらえたら幸いです。
ページの表示速度を計るには
ページの表示速度を計測するツールとして有名なのは、Googleが提供しているブラウザから計測ページを開いて行う「PageSpeed Insights」、ブラウザに拡張機能として追加して使う「YSlow」、この２つのデータを一括表示できる「GTmetrix」、そして独自のツールとして「Pingdom」などがあります。
目安ですからどのツールを使うかは自由ですが、検索エンジンが提供しているものはチェックしておきたいところですね。おすすめは最大の検索エンジンであるGoogleが提供する「PageSpeed Insights」とデベロッパーツールのようにページがどのように表示されているかを時系列で表示できる「Pingdom」です。一度自身のサイトの表示速度をチェックしてみてください。
スコア１００は存在するのか？？
WordPressのようにデータのやり取りでページを表示するものや、画像などを使ったもの、外部の何かを参照して表示するものなどがあることで、どんどんページの表示速度は落ちて行きます。検証はしていませんが、多分htmlで1文字程度の表示しかしないようなページだったら可能かもしれませんが、サーバーの状態も関係するので１００は多分あり得ないと思います。
どの位のスコアが妥当か？
Google様が検索順位の決定をする要素に「ページの表示速度」があることは、Googleそのものが前述した「PageSpeed Insights」を提供していることや、Googleの解説ページなどからも容易に想像が付きます。でもそればかりを気にしてサイト作りをしているわけにもいきませんし、図表や画像を一切を使わずに作ったサイトがいくら高評価されても、見る人が増えることはないと思います（何かの解説系のサイトはこうのが多いですね、ちょっと寂しい）。
それに、Googleの解説ページには、見る人により分かりやすく作られているページが評価されるという記述もあることから、一見相反する要素をある程度のレベルで突き詰めていく必要があると思います。
ちなみに「PageSpeed Insights」で計測した当サイトの平均スコアは「５４」。恐らく決して速いサイトではないと思います。でもある程度検索経由でのアクセスはいただいていますし、表示速度も個人的にはこれくらいかな？と思っているのでこれ以上素っ気ない感じにはしないと心に決めて運用しています。
この記事やサイト内の他の記事をご覧になって「表示が遅いなぁ」と思われた方は、プラグインを極限まで削減する、テーマは「Simplicity2」でなくもっと速いものを選ぶ・・・など改善を図ってください（私は現状やるつもりはありません）。
逆に、このサイト程度の速度で十分！！という方はここから紹介する内容を読んで対策いただくことで、このサイト程度の速度は出せるのではないかと思います。
ページの表示速度改善の方法と検証
前述したツールで解析するのは入力したURLのみ。つまりトップページを入力すればトップページのみの分析結果が表示されます。これでは
- たくさんあるページの分析が面倒
- 全体でのページスピードが解析できない
- 表示の速いページ・遅いページが分からず、漠然とした分析しかできない
といった不都合が出てきます。トップページはポータルサイトでもない限りあまりアクセスされないと思いますし、何よりページの評価はページごとの表示速度が絡んでくるわけですから、改善は「どのページ」の「どの部分」を特定して行うことが重要だと思いますから、手動でやるのはちょっと大変ですね。
そこでWordPressの必殺技「プラグイン」を使います。使用してみて面白かったのは
というプラグイン。文字通り「Google Pagespeed Insights」ですべてのページの表示速度や改善点を表示してくれる便利なプラグインです。これを使えば前述したような不都合は解消されます。
表示速度改善で効果のあったもの、なかったもの
サイトの速度改善についてはいろいろなサイトで本当にたくさんの方法が紹介されています。では闇雲にやれば効果的なのか？というとそうでもないようです。あくまでも「Simplicity2」というテーマを使って行った対策、このサイトで表示するコンテンツの話ですから参考にしていただければ結構です。
私がテストした限りで効果のなかったものについては効果は確認できませんでしたと表示しています
Simplicity2でできること
Simplicity2テーマにはより高速化するためのオプションのいくつかがあらかじめ用意されています。有効化したら必ず行うようにしましょう。
最も効果的だったのは次の２つでした
ソーシャルボタンの変更
SNSへ投稿したりフォローしたりしてもらうためのボタンです。たくさん表示してもあまりシェアしてもらえない場合が多いですから不要なものは非表示にすることと、シェアボタンのタイプを（高速）となっているものへ変更するだけで結構表示が速くなりました。
画像の遅延読み込み（Lazy Load）
インストール時にはオフになっている機能です。カスタマイザーの「画像」から有効にできます。特に外部の画像などを使ったページでは効果てきめんでした。
Lazy Loadに関してはSimplicity2のようにテーマで制御しているものもあれば、プラグインで追加する必要のあるものもありますから、一度確認してみてくださいね。
画像の圧縮
圧縮と書きましたが正確には「使うサイズにする」ことと「画像の精度を下げる」ことです。WordPressのほとんどのテーマでは画像は自動的に縮小（拡大）されることがほとんどなので気にしない人も多いのですが、撮影した画像をそのままアップロードしてそのまま表示させると結構な大きさのページになってしまいます。
ページの大きさ（ページを表示するためのファイルの大きさ）が大きければそれだけ読み込みに時間がかかるので、当然遅くなるということですね。ただこれだけではなく、転送量が大幅に増加したり、ページ表示のためにより大きな力が必要になったりするのでサーバーへ負担をかけることにもなります。
防ぐ方法としては
などのプラグインを使ってアップロード時に自動で画像の大きさやクオリティが適正になるようにします。
ただし、画像サイズに関しては、サイトの横幅に合わせればいいものの、精度を下げることで当然画像が粗い感じになります。きれいな画像を掲載することを目的としたサイトでは画像サイズのみを変更するようにしましょう（上のプラグインでは両方の要素を個別に設定できます）
最適化プラグイン
コードを縮小したり、ヘッダーにあるコードをフッターへ移動して遅延読み込みさせるプラグインがありますが、下手をするとサイトが壊れてしまったり、表示がおかしくなるものが多数あり、経験上ですがプラグインをアンインストールしても完全に元に戻り切らないものもあったりするのであまりお勧めしません（あまり目に見えて効果的でもありませんでした）。
ページスピードを上げるためにGoogleからも提案されているのは
- CSS＆JSファイルなどの静的リソースからクエリ文字列を削除する
- GZIP圧縮を有効にする（圧縮テキスト、html、javascript、css、xmlなど）
- Vary：Accept-Encodingヘッダーを追加し、Setはキャッシュの有効期限を切る（ブラウザキャッシュを活用する）。
つまり、不要なコードは削除して、コードを圧縮できるところは圧縮して、見る人のブラウザにキャッシュ（一度見たサイトを一定時間保存する）するように設定することです。これをすべてかなえてくれるのが「WP Performance Score Booster」というプラグイン。
設定も有効／無効の切り替えだけなので簡単です。
キャッシュ系のプラグイン
効果は確認できませんでした
ページの表示速度を改善するには、アクセスされたときにWordPressがページを表示するプロセスを簡略化すること。ということで実にたくさんのキャッシュ系プラグインがありますね。
これらのほとんどは一定時間別の場所へ表示したページのhtmlをコピーしておいておき、アクセスされるとそれを表示するというものです（まあこれをキャッシュというのですが・・・）。つまりキャッシュ機能が最大限に活かされるのは「キャッシュされている時間内にたくさん同じページへのアクセスがある場合」になります。
従って、１つのページにたくさんのアクセスがあるサイトでは非常に効果的ですが、そうでないページが多い場合（ほとんどのサイトがそうだと思います）には、通常の表示に加え、アクセスされる→キャッシュを作るというプラグインの作業が追加されるのであまり効果的ではありません。実際に私のサイトでもほとんど効果はありませんでした。
ただ、キャッシュされているものが表示されるときにはページ表示のためにたくさんのデータのやり取りをする必要がないのでサーバーの負荷が減るという効果はありますので、サーバーの性能が低い場合にはより効果があるのかもしれません。
また、キャッシュ機能を追加するプラグインのほとんどが
- .htaccessファイルに必要な情報を追記する
- wp-config.phpへ必要な情報を追記する
- キャッシュするためにたくさんのディスク容量が必要
など他のプラグインとはちょっと違ったことをするものなので、やってみてダメだったら削除・・・でサイトにアクセスできなくなったりするトラブルが発生する可能性があります（私は経験し、復旧しましたが、どうしてもゴミファイルは残ってしまいますね）ので使用に関しては特に慎重になった方がいいと思います。
また、
- 他のプラグインが動作しなくなったり、コンフリクト（競合）が発生してアクセスできなくなる
- レスポンシブテーマでパソコン用表示は正常でもモバイル用表示ができなくなる
- キャッシュをクリアするかプラグインを停止しないとCSSの変更が即時反映されないものもある
といった不具合が発生することもありますのでやはり慎重に選んだり使用を検討した方がいいと思います（プラグイン公式ページでは書いてないことが多いです）。
速度が遅くなる原因はサイト内部だけにあらず
実際に改善＆検証していくうちにあることに気づきます。これって自分のサイトのせいじゃなくない？？ってことです。ページの表示速度が遅くなる原因が分かりましたのでいくつか紹介しておきます。
広告表示
最終的に遅くなる原因として特定したのがこれでした。何をどうしてもスコアが上がらなくて、いろいろな提案を見たらほとんどが広告を表示する際にいろいろな情報を取得したり、その中でリダイレクトを繰り返したり、実際に表示する元となるサーバーの応答が遅かったりしました。
私が使う限りで遅いと判断できたのは「忍者Admax」と「楽天モーションウィジェット」でした。
サイトの表示が遅いなぁと思ったら、一度広告表示をすべて外してみると、下手人が何なのかがはっきり分かります。
また、Google Adsenseではページ表示のたびにアドセンスのサーバーと通信する「同期」と一定期間は再接続しない「非同期」がありますから、特に問題なければ「非同期」にすることで速度がアップします。ちなみに私のサイトで今まで同期だったものを非同期にしましたが特に収益に影響はないようです。
外部のリンク参照
外部リンクをカード表示しているような場合には、内容を読み込むまでに時間がかかります。Simplicity2では独自キャッシュ機能のあるリンクカードが作れますが、それでも「キャッシュは有効か？」の判断をして、無効なら外部のサイトへ情報を取りに行って・・・という動作が加わるわけですから、少なからずページの表示速度に影響があります。
外部の画像をURL挿入
外部のサイトにある画像をリンク付きで挿入するメディアの「URLから挿入」機能。法律的な話ですが、外部のサイトにある画像を勝手にパソコンへ保存し、通常にアップロードして使うことはれっきとした「著作権法違反」です。これを避けるために画像のリンク先を元のサイトにしつつ、あくまでもリンクとして画像を挿入するようにできるこの機能ですが、当然ながら相手サーバーの状況やそのサイトのアクセス状況により表示までの速度にかなり影響があります。
当サイトのスコアが低いページはこの３つがあるものや、１つの項目が複数あるものがほとんどでした。
最後に
サイトの表示速度はチェック時のサイトの状態やサーバーの状態、サーバーと解析ツール間の通信速度などに左右されることが多いので、確定値を得ることはできませんので定期的にチェックするのと同時に実際に自分のサイトを見てみてどう？というのを計るのが一番だと思います。
その中で改善できるものは改善して、SEO対策としてではなく、快適にサイトを見てもらうにはどうするか？を基準に考えると余分なものが極力排除され、かつ見やすいサイトができると思います。
ちなみに当サイトはテーマ「Simplicity2」の子テーマを使ってCSSなど結構カスタマイズしてしまっていますが、これをデフォルトに戻してもあまり速度に影響はありませんでした。
