みなさんこんにちは。パフォーマンスに関する記事がたまってきたため、SEO対策のひとつであるWebサイトの高速化についてまとめました。WordPressのSEO対策にバッチリです。さらに項目に重要度を追記したので、好きな項目から取り組んでもらっても大丈夫です。一緒にサイトの高速化を目指しましょう。
本ページは以下のような方々にオススメです。
- WordPressで構築したWebサイトの応答が遅くて困っている
- SEO対策としてWordPressのサイトを高速化したいが何から手をつけていいか分からない
- WP Rocketなどの高速化プラグインを利用しているが、イマイチ理解できていないため、知識をより深めたい
内容は適宜追加したり、別記事に切り出す可能性があります。ご了承ください。
それではWeb高速化の旅へ出発しましょう。Webサイトの高速化の鍵は大きく分けて３つです。
- キャッシュを活用する
- 通信量を削減する
- コンピュータの処理量を上げる
※ W3 Total Cacheというプラグインに沿って説明をします。ほかのプラグインでも同様の機能があると思われるので代替可能です。が、この記事では本プラグインの設定に従います。個人的に最もシンプルで気に入っています。
まずは計測をする
まずはそもそもWebサイトが遅いかどうかを計測する必要があります。計測方法は以下の記事にまとめています。
ここからは実際の作業になります。以下、お試しするときにバックアップをとっておくことを強くお勧めします。筆者では保証ができないので…！なかでも最初に紹介するキャッシュは繊細なので、ここが動かなくなった！となる場合が稀にあります。他のプラグインと競合することもあるあるですね。個別の事案については書ききれませんが、一つずつオンオフしながらチェックしていくことがお勧めです。
高速化の鍵1: キャッシュを活用する
Webサイトを高速化するのに、最も重要なのはキャッシュを活用することです。これにつきます。Webの高速化はキャッシュに始まりキャッシュに終わります。キャッシュくらい知ってるよー！と思われるかもしれませんが、あらゆる観点にキャッシュを対策済みとするならば、すでにLighthouseで高得点を狙えるのではないかと思います。念のため、キャッシュについて解説していきましょう。キャッシュとはファイルに素早くアクセスできるように一時的に高速な場所に退避する役割を持つものです。例えるならば、普段は本棚に本を保管するのですが、よく読む本は普段使いの机の中に保管するようなイメージです。そうすればよく読む本はすぐに取り出すことができますよね。これをキャッシュすると言います。そのキャッシュを上手に使うことがWebサイトを早くするためには必要です。それではキャッシュを活用した高速化をはじめましょう。
重要度⭐️⭐️⭐️ CDNを利用する
重要度 ⭐️⭐️ ページキャッシュを利用する
重要度 ⭐️⭐️ データベースキャッシュを利用する
重要度 ⭐️⭐️ ブラウザキャッシュを利用する
重要度 ⭐️⭐️ オペコードキャッシュを利用する
高速化の鍵2: 通信量を削減する
さてキャッシュの観点が解決されたら、次は分かりやすく通信量そのものを減らしていきましょう。ブラウザはWordPressに対してHTML, CSS, JavaScript, 画像などのファイルを要求します。このファイルのサイズを削減できればブラウザとWordPressの間で通信量を減らすことができます。
重要度 ⭐️⭐️⭐️ CSSやJavaScriptのMinify
重要度 ⭐️⭐️⭐️ 画像サイズの削減
重要度 ⭐️⭐️ 画像の遅延読み込み
重要度 ⭐️⭐️ gzip圧縮
重要度 ⭐️ 動的コンテンツをへらす
動的コンテンツとは変化する可能性があるエリアのことを指します。例えば記事は投稿すれば記事一覧のエリアが変わりますし、コメントエリアはユーザがコメントをすれば、画面が変わりますよね。これらはキャッシュしにくい箇所になるためボトルネックになりがちです。動的コンテンツがまったくないサイトは、そもそも静的サイトにできるのでデータベースサーバなど不要になり、阿部寛さんのページと同じ構造できます。それは早くなるわけです。動的コンテンツを削るというのは、ある種のトレードオフです。例に挙げたコメント機能を削るとなれば、パフォーマンスのために読者とのコミュニーションの機会を削るということになります。ユーザ体験を鑑みた上でどちらを選択するかは管理人のあなたが決めることです。コミュニケーションはTwitterのDMに集約して、ブログからコメント欄はなくしちゃおう！などの戦略もアリですし、コメント欄は大事だから無くさないという選択もアリです。
重要度 ⭐️ アフィリエイトなどの広告を減らす
これは消せないよ！という方がほとんどですが、ページを遅くする理由のひとつであることは理解しておくといいと思います。これはSNSアイコンと同じく、広告があるページにアクセスするたびにAmazonやGoogleにアクセスして広告内容を取得しています。外部のサイトなのでどうしても処理速度は遅くなり、全体のページ表示を遅延させることになります。アフィリエイトなどをやめるということはできないと思うので仕方がない部分です。実際のところ、SNSアイコンや広告は非同期に読み込まれる、つまりWebページのコンテンツを先に表示して、後からパーツがローディングされるという仕組みなので、見た目上は遅く感じることはあまりないかもしれません。ただしパフォーマンス、とりわけSEO観点ではマイナス方向に影響をもたらします。どちらかというと、同じ内容でも広告があるサイトとないサイトでは、広告がないサイトのほうが優先されると言われれば直感的に理解できると思います。
重要度 ⭐️不要なWordPressプラグインを削除する
プラグインが遅いというのは、WordPress特有の事象です。使わないプラグインは削除しましょう。人によっては一番効果がある施策かもしれません。そもそも利用しないコードが動作すると遅くなることは当然です。プラグインはWordPressの肝となる機能ですが、むやみに増やすとパフォーマンスに影響を与えます。プラグインが多い場合はまず棚卸しを実施すると良いでしょう。
高速化の鍵3: コンピュータの処理量を上げる
重要度 ⭐️⭐️⭐️ サーバーのスペックを上げる
さてWebサイトを改善するときにそ最も最初に思いつくのがサーバーのスペックを上げることではないでしょうか？当然お金をかければ、どんなサーバーも増強することもできます。メモリの増強、CPUの増強、ディスク容量の増量…あたりですね。
これは説明不要でイメージしやすいと思います。しかしこれは全く効果がない場合もあるので注意すべきです。そもそもCPUやメモリに起因するパフォーマンス問題でなければ、意味をなさないです。例えば画像サイズが大きく通信に時間がかかって表示が遅いという問題に対して、CPUやメモリを増強しても大した効果は対して得られません。CPUやメモリは余裕があって十分だけども、画像の転送に時間がかかって遅いという状況だからですね。
逆にメモリ等が足りなくて激重になっている場合には効果テキメンです。今すぐ対応しましょう。自分のサイトがどうなのかの診断は一般論で切り抜くことが難しいので外部の専門家が必要でしょう。ちなみに筆者はプラグインを入れるとメモリが枯渇し、スワッピング(メモリをディスクに退避させる処理)が頻発することから、メモリ増強は実施しています。WordPressの特徴としてプラグインがありますが、これがとにかくメモリを食うんですよね…。
これまで紹介したサーバのスペックについての上記の確認方法ですが、サーバスペックについては各種サーバを借りているホスティングサイト、またWordPressにはサイトヘルスという機能があるのでアプリケーションに割り当てられているメモリなどの設定は確認することができます（センシティブ情報を含むのでページを隠しております。各自確認をしてみてください）
重要度 ⭐️⭐️ ソフトウェアのバージョンを上げる
※ パフォーマンス観点での重要度を示しています。セキュリティ対策において最新バージョンに保つことは最重要項目の一つです。
重要度 ⭐️ ユーザの端末のスペックを上げる
時代を重ねるごとに端末のスペックは向上しています。iPhone 7からiPhone 13に機種変更した人がいれば、その人の端末のパワーは上がっていますよね。PCも同様です。下がる人はあまりいないでしょう。読者の端末のパワーが上がれば当然ですが、ブラウザがより高速に動き、あなたのサイトをより高速に見れるようになる、ということです。誤差程度かもしれませんが。この問題に対して、私たちができる対策は何もありません。あなたのサイトの読者に高性能PCやスマホを渡すならば別ですけれど…
ガラケーやiPhone3GでWebサイトを開くと表示が遅くてびっくりします。これはそもそも端末が弱いんですね。端末のCPU/GPU強化、ブラウザアプリのアップデートなどで勝手に進んでいきます。コントロール不可ですが、サイトが遅い！とメッセージしてくれユーザのなかには、このような状況があるということを理解しておきましょう。
まとめ
おつかれさまでした！いかがだったでしょうか。本記事を書きたくてこのサイトを作ったまであります。
SEOの観点の一つであるWebサイトの高速化ですが、サイトによって特性があるので効果があるような深い設定、チューニングは異なります。多くのWebサイトでは最大まで突き詰めれば高速化の余地は大いにありますが、もはや一般論の話というよりは個別最適化の領域になってきます。そのときは管理人が実施するよりも、自社のエンジニアや他のパフォーマンス専門の会社に依頼することが必要になり、お金を相当積む必要があるでしょう。
Webサイトの高速化はクリエイティブで非常に楽しいです。筆者はWebに限らず高速化が大好きで、例えば応答速度が２秒→１秒になれば50%の削減！世界から1秒を節約したぞ！と勝手に感極まってます(気持ち悪いですね)。以上です。おつかれさまでした。
それでは次の記事でお会いしましょう👋