About

WordPressの高速化のテクニック

WordPressの高速化のテクニック

目次

はじめに

WordPressの高速化をするために出来る事を書いています。詳しく手法までは知識のみでしか知らなかったりします。その知識も曖昧だったりします。いつもどんな事して高速化を図っているかなと思ったので書いてみました。よく使っているWebサービスとかプラグインがあればリンクを載せています。また最近知ったもの、知っているものの試せていないもの等も書いています。

フロントエンド編

ここでいうフロントエンドは主に、HTML/CSS/JavaScriptの事やそれに関係するもの(画像など)を指します✨ また、基本的な部分も出てきますが再確認なども含めて書いていきます！

画像の圧縮

一般的なサイトでファイルサイズを大きく占めるのが画像です。jpg や png, svg などの画像を使用していると思いますので、それらを圧縮することでサイト自体の軽量化を図ることが可能です。圧縮には様々なサービスやプラグイン、タスクランナーなどを使用して行えます。簡単に画像圧縮は可能ですが、注意しなければならない点は画像を圧縮した段階でその画像は劣化しています。ビジュアル重視などの場合はデザイナーやクライアントと画像の比較を行った上で行うのがいいと思います。

Webサービスやプラグイン等

画像の遅延ロード

ダミー用の超軽量な画像に置き換え、その後本来表示させる画像を後からロードする事でWordPressサイトのパフォーマンスを向上することができます。WordPressでは超便利なプラグインがあるので、簡単に適用させることができます。GoogleBotなどにはダミー画像が認識されるのでしょうか？そこまでは詳しくないです。。

プラグイン

SVGの使用

最近では一般的に使われるようになりましたが、可能な限りSVGを使用した方がサイト高速化を図ることができます。理由としては、ベクター画像の為どのデバイスでも綺麗に表示されることとデバイス毎に画像が必要なく、一つのSVGで済むことです。またグローバルナビなどでアイコンを複数使用する場合はSVGのグループ化をしインラインでHTML上に埋め込んで置くと、どこでも定義したSVGを呼び出せます。

Webサービス

  • IcoMoon - 欲しいSVGのみのセットなどを作れたり。各アイコンバンドルは要ライセンスチェック。

CSSの圧縮

これも定番のテクニック。最近ではSCSSなどで書き出したCSSファイルは意外と大きなファイルサイズになります。これを圧縮して一行のCSSにすることで軽量化を図ることができます。かなりサイズダウンするので、必ずしておきましょう！

HTMLにCSSを埋め込む

管理が大変になりますが、HTMLに <style></style> で埋め込むのも軽量化の一つのテクニックです。WordPressではファイルのパーツ化でなんとか実現は可能ですが僕はしたことはないです🙄 更新の時大変だと思いますが、SCSSなどを上手く使えば管理はできそうですね。

CSSのコンポーネント化

これは最近HTTP2(バックエンド編で後述)が一般化してきたので、出てきた軽量化テクニック。HTTP2になったことで、一度に読み込める外部ファイルの読み込み制限が実質なくなったので必要なCSSファイル(コンポーネント毎)を読み込ませるがレンダリングブロックや読み込み順序などの知識が必要になるので、現状考えてはないです。

JavaScriptファイルの圧縮

これも、CSSと同様で圧縮する事でファイルサイズを軽減できます。ReactやVue.jsなどとWordPressを組み合わせて使っている場合は、是非とも圧縮化しておいた方がいいと思います。WordPressの場合デフォルトでjQueryが読み込まれるのですが、プラグインを色々と使っている場合jQueryの最新版などでは上手く動作しない事もあるのでチェックした上でjQueryの最新版かつ圧縮されたものを使うとパフォーマンスはさらに向上します。

バックエンド編

WordPressの内部やPHP、さらにサーバーサイドで出来る事を列挙します。バックエンド側の方が効果は大きい反面、注意しなければサイト自体が表示されなくなったりエラーで止まる可能性も十分に考えられます。

WordPress Transients API

WordPressに用意されている機能で、文字列や配列、さらにはオブジェクトなどを一時的に保存する機能です。データは有効期限が設定出来て、その時間が来ると消える仕組みです。データはWordPressの wp_options テーブルに保存されます。簡単に取得、削除が出来るので上手く活用するとWordPressのパフォーマンス向上が可能です。

最近だと、WordPressにREST API機能がコアに実装されたのでReactやVue.jsなどのシングルページアプリケーションで使用するJSONデータなどをこのTransients APIで保存させるなどの使い方など色々活用出来る場面は多いと思います👍

HTTPS/HTTP2

最近ではLet's Encryptの登場により一気にSSL化の敷居が低くなりました。SSL化にすることでHTTP2を使うことができます。HTTP2が登場するまではHTTP1.1という規格の通信を行っていました。これの特徴は一つのファイルの読み込み(リクエスト)につき、一つのコネクションを持たせる事。また多くのブラウザで同時接続出来るコネクションの数は大体6個/ドメイン毎となっていました。

新しいHTTP2はどう変わったかと言うと、コネクションは一つだけどその中にストリームと呼ばれる独立した仮想コネクションみたいなものがあります。これによって実質読み込み制限はなくなりました。またそれぞれのストリームには読み込みの優先度をつけることが出来ます(この辺りはまだあんまり詳しくない)

SEOの観点からもSSL導入は必須になった今、HTTP2を使わない手はないでしょう。WordPress以外のサイトでもパフォーマンスは向上します🚀

Let's Encrypt

PHP7

5.6+ / 7+ が現状サポートされていますが、PHP7は5.xの時に比べて大幅にパフォーマンス改善が行われたので、最新バージョンにアップグレードすることでパフォーマンスの向上を測ることが可能です。WordPress以外のPHPアプリケーションを使用していない、またはPHP7にしても影響が出ないのであればアップグレードしましょう。

APCu + Opcache

PHP5.5以降からはこのAPCuと言うものが使えます。APCuはPHPでメモリ上にデータの読み込み/書き込みを行うもので、OpcacheはPHPのオペコードと呼ばれる実行までの中間コードをキャッシュする仕組みです。 これらを使用するには、Webサーバーに対しインストール権限が無いと出来ないのでVPSなどの場合にはインストールして有効化しましょう。

有効にするだけで自動で色々やってくれるみたいなので、PHP自体のパフォーマンスは結構向上します🚀

プラグイン

キャッシュ周り

個人的には、他のパフォーマンス向上をした上でそれでも重い場合の最後の手段と考えています。今まで色んなサイトをWordPressで作って来ましたが大体何か問題が起きるのがキャッシュ系のプラグインを入れた後です。有効化直後のバグは大体が設定ミスが多いです。あとはデータが更新されない、サイトの修正が反映されないなどキャッシュが効いてるせいで起こる事がよくあるので、クライアントさんにはちゃんと伝えておくべきです。

色々と述べてしまいましたが、キャッシュの力は絶大です。劇的にパフォーマンスは向上します。すごい。本当に強い。 ページキャッシュやデータベースキャッシュ辺りがWordPressには効果的ですね✨

キャッシュ系プラグイン

サーバー

キャッシュも強力ではありますが、そもそものサーバー自体の処理能力が低い場合はサーバー自体の引っ越しをすることで変わると思います。
またApacheからNginxにWEBサーバーを変更することでもパフォーマンスが改善出来るかもしれません。Apache/Nginxはそれぞれメリット/デメリットがあるのでサイトの構造などを考えた上で決めていくといいと思います。

WordPress専用OS

KUSANAGIなど専用OSでWordPressに特化したパッケージの導入もパフォーマンスの改善が行えます。使ったことは無いですがフルチューニングが施されているのでめちゃくちゃ早いと思います

KUSANAGI

まとめ

WordPressサイトの高速化もかなり多岐に渡ると思いますが、やっぱり最終的にはサーバーサイドでの処理が大幅にサイト速度を爆速に出来るとは思いますのでこの辺りは色々と試して知見を貯めていきたいですね🙌

Change Log

2019/09/21 - サムネイル画像を追加

Author

Michinobu Nishimoto

記事を書いてる人: 日本とカナダのWeb制作会社で数年間の経験を積んだ後、カナダのスタートアップでフロントエンドエンジニアとしてWebアプリケーションの開発をしている。

詳しくはこちら

See Also