WordPressを速度改善・高速化する方法まとめ【初心者向け】
こんにちは。Lostmortal (@lostmortalmusic) です。
ブログを運営するならページの表示速度には気を使いたいところです。Wordpress ならプラグインを利用して初心者でも比較的簡単に速度改善が出来るので、その具体的な方法を紹介します。
ページの表示速度は速い方が良い
WordPress に限った話ではないですが、ページの表示速度が速いに越したことはなく、表示速度が遅いとユーザーの離脱に繋がりやすくなるなど、基本的に良いことがありません。
ブログなど WEB サイトを運用するのであれば、見る人が快適に閲覧できるように表示速度には気を使うべきです。
その辺りの詳しい話はこちらの記事に書いています。
今回は WordPress の速度改善にフォーカスして初心者でも簡単に対応できる項目を紹介していきます。というか WordPress ってデフォルトで重いですよね…。
画像最適化
WEB ページの総ファイルサイズの中でも特に大きなウエイトを占めるのが画像です。画像のファイルサイズを少しでも小さくすることは、ページの読み込み負荷を削減する上で非常に有効な手段です。
そこで登場するのが画像最適化という項目です。
これは、画像ファイルの中身のデータ構成を整頓することで、ピクセルサイズや画質を変えずに限界までファイルサイズを小さくすることを言います。
というか、WEB サイトの表示に使う画像は基本的に全て最適化されたファイルであるべきです。
しかしそんな事どうやってやるの？という点ですが、Wordpress ならプラグインを入れておくだけでOKです。
EWWW Image Optimizer というプラグインを入れておけば、Wordpress に画像をアップした際に自動で最適化をしてくれます。
自分でやる際は、Kraken.io などの WEB サービスを使うと良いでしょう。画面にドラッグ＆ドロップするだけで最適化してくれます。
Lazyload（遅延読み込み）
上述の通り画像最適化はとても有効なのですが、それでもページの読み込み容量を圧迫するのは画像なんです。あとは Youtube や Twitter やインスタなどの埋め込みですね。
これらの要素を、ページがスクロールされて要素が表示される瞬間にロードする仕様にしてしまうことで、ページそのもののローディングはかなり負荷を減らせて速くなるんです。
これを Lazyload や遅延読み込みと言います。
Google 先生は必ずやったほうが良いというレベルで推奨している施策ですが、これ、自分で実装するとなると Javascript の知識が必要で結構大変です。
しかし WordPress ならプラグインを入れるだけで対応出来ます。便利ですね。
HTML・CSS・JSの圧縮
HTML、CSS、JS（Javascript）…これらは WEB ページの表示を司る言語ファイルですが、これらも画像最適化の時と同じように、一番ファイルサイズが小さい状態にして公開したいですよね。
具体的にはこれらのファイルの場合は、記述から余白や改行などを取り除いて1行表示にしてしまう事を意味します。
ただ、そうすると当然コードの表示は↓こんな風になりますので、人間が編集するのはほぼほぼ不可能な状態になります。
そこで我々エンジニア勢は、タスクランナーやバンドラーといった類のツールを駆使して、人間が見れる状態のコードを編集したら自動で圧縮仕様に書き出してくれるような仕組みを構築したりするのですが……何を言ってるんだという話ですよね。
大丈夫です。Autoptimize というプラグインを利用すれば、設定しておくだけで WordPress 上で勝手にやってくれます。設定は「○○コードの最適化」という所にチェックを入れるだけです。
レンダリングブロックの回避
何やら専門的な言葉が出てきましたが、ざっくり言うと、<head></head>タグ内に書かれている Javascript や CSS ファイルの読み込みを減らしましょうという話です。
<head>タグというものはその名の通り？、HTML ファイルの頭の方、ページの表示要素よりも上の方に記述します。そして、ブラウザは HTML ファイルを上から順番に読んでいきます。
また、Javascript や CSS といった外部ファイルの読み込み記述は、そのファイルの読み込みが終わるまで、以降の要素のローディングをブロックするという性質があります。
つまり、この<head>タグ内に外部ファイルの読み込みが色々あると、そのぶんページのロードが遅くなってしまうんですよ。
なので、初期画面表示に必ずしも必要のない要素は、<head>タグ内から取り除いて、</body>直前などページの下の方にお引越ししたほうが良いですよ、必要な要素でもあまり重くなければHTML ファイル内にインラインで書いたほうが良いですよ、という事です。
HTML の知識がない人にとっては何を言っているのかチンプンカンプンな話ですね？
大丈夫です。こちらも Autoptimize プラグインで対応可能です。やり方は、「Aggregate JS(CSS)-files?」という項目にチェックを入れるだけです。
キャッシュ
キャッシュを直訳するとゴミですが、大事なものです。
ユーザーが閲覧したページの情報（画像ファイルやソースコードなど）を、ブラウザやサーバーで記録しておきます。そして2回目以降にアクセスがあった際に、その記録から情報を返すことで、アクセスの際に本来生じる処理を省略できる、というのがキャッシュの仕組みです。
うまく使えると非常に効果が高く、キャッシュ戦略という項目だけ専門チームが1つ作れてしまうくらい奥の深い分野ではあるのですが、これも WordPress ならプラグインを入れておけばOKです。
初心者だと「キャッシュプラグインを入れたらサイトが真っ白になる問題」に悩まされることがあるようですが、WP Fastest Cache というプラグインであれば設定はチェックボックスにチェックを入れていくだけなので、致命的な失敗をすることはまず無いです。
よほど大規模サイトでもない限り機能的にもこれで十二分です。
CDN
キャッシュの一種ですが、CDN (Contents Delivery Network, コンテンツデリバリーネットワーク) というサービスを利用します。
CDN は世界各地にサーバーがあるのですが、キャッシュを CDN 上に置いておき、アクセスがあった際に最も近くの CDN からキャッシュを返すことで、元のサイトのサーバーよりも速く処理できるし、元サーバーへの負荷も軽減できる、という仕組みです。
CDN プラットフォームは Cloudflare というサービスが最も有名で設定も簡単です。Cloudflare に運用サイトのドメインを登録して、ドメイン管理サイトに Cloudflare のネームサーバーを登録すればOKです。
管理用のプラグインもあります。
転送ファイル圧縮
サーバーがファイルの送受信を行う際に、HTML、CSS、JS、画像などのデータを圧縮してファイル容量を削減することが出来ます。
一般的には Gzip という形式に圧縮することが多いですが、これは上記の WP Fastest Cache に設定項目があるのでチェックを入れるだけで対応できます。
また同じく上記の Cloudflare を使えば、Brotli というより上位互換の形式に圧縮する設定ができます。
まとめ
WEB の速度改善というもの自体は、こだわっていくともっとかなり色々とやれることがありますが、それは結構専門的な話になってきます。
一般の人がそんな専門的な知識をいきなり理解するのはさすがに現実的ではないですが、今回紹介したように WordPress であれば、プラグインを使うだけで紹介したくらいのことは簡単に対応できてしまいます。
WordPress を運用している方であれば WEB に全く詳しくなくてもプラグインを入れることくらいは出来るかと思いますので、是非試してみてください。