ヒカルです(^-^)
ワードプレスサイトの高速化はレーシングカー同様「速く走りたいなら重たいものを削る」のは鉄則、日ごろから心がけているつもりなのですが、運用サイトの１つがいつのまに重い状態になっていました。
これは初心者だけでなく、ワードプレスサイト構築になれた人でもうっかりそうなってしまっていたパターンは結構あると思います。
そう、この記事では普段ページスピードが遅くなるようなワードプレスサイト構築はしていなかったはずなのに、なお高速化からかけ離れた状態になっていたときの対策をお伝えしています。
「いろんなウエブサイトの高速化の方法を見て試したけれどどれも効果がない」と思った方は、ここでご紹介している対策をお試しになってみてはいかがでしょうか。
いつのまにか、サイトは重たくなっている
あるWEBマーケティング会社のお取引先お担当者から
「グーグル広告に出稿しているLP結構重たくなってました。スマホユーザーの離脱を防ぐためにも高速化するのをおすすめします。」
と言われ、スマホの実機でページを表示させてみるとワードプレスサイトの表示が確かにもたもたしていました。
ああ、なんて憂鬱なサイトの鈍足化。。と言いたいところですが頑張りました。
高速化に知っておきたい事
私が試したサイト高速化の方法をお伝えする前に、高速化の前に知っておきたい事からお伝えします。
そもそも高速化って何なのか？その仕組みを簡単に把握しておこう
インターネットサイトがさまざまなディバイス（モバイルやパソコンなど）で表示されるまでには、①ブラウザ、②サーバー、③データベースの３つを経て表示されています。
この３つの過程を下のように行き来して私たちはウエブサイトを閲覧できるようになっているんですよね。
①ブラウザ
↓↑ファイルを指定・提示
②サーバー
↓↑ワードプレスプログラムがデータベースを探す・提示
③データベース
３つのプロセスの中でサイト表示を遅くさせる要因があると、「いつまでたってもサイトが表示されない」といったユーザビリティの損失が発生しやすくなります。
端的に言うとサイトの離脱で「ユーザーに相手にされないサイトになる」のです。
今のユーザーは本当にせっかちですから３秒も待ってくれず、離脱してゆくでしょう。
ウエブサイトの高速化はサイト評価にもつながり現在の運営に必須項目、具体的には以下３つをメインにして高速化対策を実行していきます。
- 通信の回数を減らせないか？
- 通信量を抑制できないか？
- データを送る速度の向上の余地はないか？
ちょっとこれだけではわかりにくいですよね。
具体的な高速化対策をお伝えするまえに、知っておきたいポイントを３つ挙げておきます。
一度に１個づつ試して、都度表示を確認
ウエブサイトの高速化のための方法は、一度に１個づつ行って都度表示を確認するのがおすすめです。
高速化のための方法はいくつかあるのですが、「この方法を試したらこれだけ高速化できた」と判断しやすくなるからです。
逆に複数の高速化方法を一度に実行してしまえば、「どの対策が高速化に貢献しているのか」がわからなくなったり、どれが速度の低下を招いているのかを特定できなくなったりするからです。
できるだけ確実・安全な方法を選択する
ウエブサイト運営者のスキルや知識もさまざま、そして高速化のためによく利用されるプラグインは扱いを誤るとエラーが起こる場合もあります。
特にキャッシュ系のプラグインは400番・500番エラーが吐き出されるなどの障害報告が後を絶ちませんから、自分のワードプレスと互換性があるプラグインを選ぶなどして、確実で安全な方法を選ぶのがよさそうですね。
今から何のためにどんな作業をしようとしているのかを明確にする
後述するグーグル提供のページスピードインサイトは、グーグル独特な言い回しが使われています。
またワードプレスプラグインの中には初心者には不可解な言葉が並ぶ場合が多いです。
見慣れない分からない言葉がある場合は検索で調べて意味を理解、英語表記されている場合はオンライン上の翻訳ツールを使うなどして「高速化をする上で何のためにどんな作業をしようとしているのか明確化」するのが重要です。
そうでないと行き当たりばったりの施策になって高速化もままならないからです。
サイトの高速化はできるだけ最新の情報とアイテムをそろえた方が無難な理由
私がワードプレスサイトの高速化のためにさまざまなサイトを拝見して試してみたところ、数年前のコンテンツの内容が現在高速化に効果を発揮しないものもありました。
以下は「ワードプレス高速化」で調べると１番上にヒットしたバズ部の高速化対策５つ(2016年６月６日の記事）
- 画像サイズの最適化にEWWW Image Optimize：後述料金システムに懸念あり、代替プラグインを選択
- 画像の遅延読み込みにlazy load:同類プラグインlazy loaderの方が効果あり
- ソースの最適化にhead cleaner：最終更新が３年前のプラグインでリスクあり
- キャッシュ化にW3 Total Cache：ほとんど変化なし
- CDNサービスにcloiud flareを導入：2018年に大規模サーバーダウン事件が起こったらしく、リスクあり
グーグルによって上位表示されているからといって効果を発揮するわけでもなく、今から約３年前古いコンテンツで効果を発揮しないと理解するしかなさそうですね。
新しい情報やツールを利用して高速化するほうが無難だと思います。
つまりおすすめされている対策が自分のワードプレスサイトで効果を発揮するかは、やってみるまでわからないのです。
2019年版・ワードプレスサイトの高速化のための8個の対策
ワードプレスサイトの高速化のために試した対策は８つ。
グーグルページスピードインサイトで表示速度のチェック
ワードプレスで構築したサイトの高速化を目指している人はグーグル提供のページスピードインサイトをご存じのはず。
枠にURLを打ち込むと、ウエブサイトの表示が遅延している原因を探ってくれる便利なツールですよね。
私の場合グーグル広告を運用しているサイトで下記のような危機的な状態が起きてました。
- モバイル：27
- PC：72
え？
モバイルで見た時のサイトは「遅すぎて見ない方がマシ」といった扱いを受けるレベルでしょうか(^-^;。
私もそんなウエブサイトに遭遇したら「遅いな」って思いますし、他のサイトで済ませるかもしれません。
グーグルページスピードインサイトが指摘していた「改善できる指標」は以下の通り。
- 次世代フォーマットでの画像配置：画像の圧縮
- 画像の遅延読み込み
- レンダリングを妨げるリソースの除外：CSSとJSのインライン化による最適化
- hhtmlやCSSの縮小
特に画像についてはかなり酷評されています。
グーグル広告のためのLP記事でこのスコアが出ていたので躊躇してしまいます。
LP記事は画像の豊富さ勝負のところがありますし、圧縮して画質が落ちたり、画像を減らすなど収益に響くのが一番避けたいところですから。
画像の圧縮：Compress JPEG & PNG imagesを使用
ワードプレスでサイトを運用しているならば、画像の圧縮はプラグインを利用するのが便利。
画像圧縮のプラグインとしてよく挙がるのが以下の２つですね。
- Compress JPEG & PNG images
- EWWW Image Optimizer
私が利用したのが”画質が低下しないと評価の高いCompress JPEG & PNG images”です。
余計に画質を落として二度手間以上になった経験があり、しかもユーザーにきれいな画像を見てもらえないだなんて本末転倒ですから。
インストール方法は割愛します。
Compress JPEG & PNG imagesはAPIを利用して画像を圧縮するプラグインになっており、リンクになっている「API dashboard」でAPIキーが発行され、APIの発行で初めて画像圧縮がスタートできます。
Compress JPEG & PNG imagesの設定は結構シンプル。
はじめの設定「New image uploads」は画像を新規に追加したときの圧縮法をどうするか３つ選択肢があります。
- 追加されるとバックグラウンドで圧縮
- アップロードする間に圧縮
- 自動的に圧縮をしない
自動的に圧縮されていると本当に圧縮されているのか不安になる人は、３つ目を選び「メディアライブラリで圧縮する」といった方法を選ぶのがよさそうですね^^
次「Select image size to be compressed」はどの大きさの画像をどのくらい小さくするか？を設定します。
デフォルトでは全てにチェックマークが入っています。
thumbnail 、medium 、medium large 、large、 st thumbnail100～400はワードプレスで自動的に生成される画像ですので、これらは無視してかまわないでしょう。
はじめのoriginal imageの「オリジナル画像を上書き圧縮」にチェックを入れたらそれで十分だと思います。
そして最後の「Original image」の設定で「ピクセルで幅と高さを指定してオリジナル画像を圧縮」するようになっています。
Compress JPEG & PNG imagesの設定は以上です。
といった感じで画像圧縮を試みましたが、そもそも幣サイトはそんなに画像を大きくしてませんので、画像圧縮による高速化の効果としては「それほどでもない」という実感で終わっています。
▶Compress JPEG & PNG imagesで画像圧縮後のページスピードインサイトの変化は△～×
- モバイル：27→30
- PC→72→80
この場合、「画像圧縮プラグインが効果を発揮しなかった」と考えるのではなく、「他に問題がある、だからスコアがあまり改善されない」とするべきかなあと思います。
画像の遅延読み込み：Lazy Loaderを使用
ワードプレスサイトの高速化を邪魔する要因として、「ファーストビューでページ全ての画像を読み込もうとするから負荷がかかって表示が遅くなる」といった点もよく指摘されます。
グーグルページスピードインサイトの改善策としては「ユーザーがページをスクロールすると同時に画像を読み込むようにしてはどうか？」といったように言われており、これらのプラグインがおすすめとして挙げらえています。
- lazy loader
- lasy load
私は一つ目のlazy loaderを試しました。
画像の遅延読み込みに関するlazy loaderの設定は以下の通り。※意訳しています
■ワードプレスプラグインlazy loaderの「何についてどう遅延読み込み」するか？の設定
- iframe
- 画像とiflameをサポートするブラウザで遅延読み込み
- 背景画像、スクリプト、スタイル、ビデオ
- 動画や音声
- img要素にwidthやhightが指定されている場合に、読み込み途中でコンテンツを飛ばされるのを防ぐ
- 空欄を表示させてしまった時に「今何か表示させようとしている」といったヒントを提示する
- 投稿ごとにプラグインを有効無効にするか選択する
幣ウエブサイトはわりと画像を使用していますので、この遅延読み込みプラグインはありがたいなと思ったのですが、
▶画像の遅延読み込みプラグインlazy load使用後のページスピードインサイトの変化は△
- モバイル：27→29
- PC：72→85
グーグルページスピードインサイトが指摘している課題点の２大要因は画像の圧縮と画像の遅延読み込みだったので、２つのプラグインを試してちょっとだけ落胆してしまいました。
根作尽きる？と思いながらも眠って頭を修復するのも大事です(これもoptimizeに重要）。
CSS・JS・htmlの圧縮と遅延読み込み：Fast Velocity Minifyを使用
ワードプレスサイトの高速化を妨げている要因として、私はよくcss・JS・htmlが圧縮されていない、遅延読み込みされていない、といった指摘を受けることが多いです。
ページスピードインサイトが挙げる改善策としてはCSSやJavaScriptのインライン化（遅延読み込み）にワードプレスプラグインとして以下がおススメされています。
- Fast Velocity Minify
- Autoptimize
私が試したのがfast velocity minifyで、プラグインでは一番高速化を実感できました。
fast velocity minifyの設定は39項目ありましたので、ページスピードインサイトで指摘されやすい以下の項目をピックアップして設定方法のおすすめをお伝えします。
■fast velocity minifyの設定：かなり小回り利いてます
- HTMLの縮小を無効に(デフォルトは有効)
- ヘッダークリーンアップ（ジェネレータータグの削除など）
【SSL】
- SSL利用がない場合httpにする
- SSL利用している場合httpsにする
【フォント】
- 絵文字の削除を停止(デフォルトは有効)
- グーグルフォントを削除
- グーグルフォントCSSをインライン化
【CSS】
- CSSの縮小化を無効にする
- CSSファイルの読み込みを保持
- フッター内のCSSを遅延読み込みする
- ヘッダーとフッター内のCSSの遅延読み込みのいずれも行う
【java script、Jquery】
- JavaScriptの遅延読み込みを無効にする
- JavaScriptの最小化を無効にする
- JQueryの遅延読み込みを実行
HTMLやCSSの縮小化、”重要度の低いCSS・フッダーのCSS・JSやJQuery”の遅延読み込み、これらは基本的機能として、ヘッダーのクリンナップ、余計なフォントの削除も実行してくれるfast velocity minifyは重宝しました。
▶CSS・JS・htmlの圧縮や遅延読み込みプラグインfast velocity minify使用後のページスピードの変化◎+α
- モバイル：27→59
- PC：72→90
＊
高速化で試した順序通りにお伝えしてきましたが、ちょっと引っ張ってしまったかもしれません。
と思われた方もビックリ！な結果をお見せします。
次のレンタルサーバーによる高速化が一番効果的でした。
レンタルサーバーの設定で高速化：◎＋α
私はレンタルサーバーはエックスサーバーを使っています。
エックスサーバーはサーバー管理メニューに「高速化」があるんですよね。
これで高速化を実行すると以下のように。
▶エックスサーバーの高速化機能をフル活用：◎+α
お！(*^^)v
- モバイル：27→80
- PC：72→99
この変化を見ると今まで試したワードプレスプラグイン達は影を潜めてしまう感じがしてなりません！
エックスサーバーの高速化の内容は以下の通り。
Xアクセラレータ
Xアクセラレータは以下２通り高速化できます。
- Vir1：CSS・JavaScriptなど変更されないファイル
- Vir2：Vir1＋PJPファイル
※ただし、Vir2はPHP7.2 以上のバージョンである必要があります。
サーバーキャッシュ設定
エックスサーバーの高速化メニュー「サーバーキャッシュ設定」は、「すべてのファイルをキャッシュして高速化とアクセスUP」が望める機能です。
これはデフォルトではOFFになっています。
こんな高機能をOFFにしていた私はいったい何だったんでしょうか・・・(^-^; 設定ONに切り替えるだけですからホント簡単ですよ。
このサーバーキャッシュ設定では.httaccessが以下のように様変わりします。
サーバーキャッシュ後の.httaccesssの一部
196行に及んでました
私は.httaccessを編集するのはリダイレクトの際くらいで、あとは
と考えるほうなので、レンタルサーバーがこんな形で編集を代行・キャッシュ化してくれるならそんなに楽な話もないと思えます。
ほとんどこのエックスサーバーの高速化機能サーバーキャッシュのおかげで「ボテボテなモバイルスコア27が80にアップした」といって過言でなかったです。
ブラウザキャッシュ
ブラウザキャッシュについては「閲覧者が同じ記事に再アクセスした際に、キャッシュファイルが利用され、高速化される」といった機能になっています。
後述するように、ワードプレスのキャッシュ系プラグインは入れていたのですが、それでも「まさかのモバイルページスピード27」が出ていたのです。
レンタルサーバー側でこれを代行してくれるなら、余計なプラグインを気休め程度にインストールしたままにせずに済みますから気が楽です。
<head>や<body>タグ内の余計なコードを削除
ワードプレスサイトの最適化・収益化のためにいろんなツールがありますよね。
例えばヒートマップツール実装や広告配信のために付与されるコード、を<head>~</head>や<body></body>といったタグの中に入れる場合が多くなっています。
これらはサイトの最適化・収益化のために不可欠なコードは、不要なものは<head>~</head>や<body></body>内から削除した方が高速化のためには役立ちます。
▶余計なコードを<head>や<body>タグ内から削除した：◎
- モバイル：80→88
- PC：99から変化なし
ページスピードインサイトのモバイルのスコアは8上がりました。
モバイルサイトで90近いスコアが出るとひとまず合格だなと言えそうです。
ヘッダーやボディタグという場所に「いらないコードをそのままにしておくのは高速化にいいはずがない」ですからね。
なお、コードはどこからどこまでを削除すればいいか、配布元サイトを参考にして間違いないように削除したいものです。
スライダーや動画の貼り付けが高速化を邪魔しなかったと判明、そのままのコンテンツに
動画など動きをつけるコンテンツは一般的に高速化にはマイナスです。
それでもなお「動きのあるコンテンツの方がユーザーに遡及できる場合」、やはり動画などコンテンツに含めたいと思います。
今回の高速化では、「スライダーや動画の貼り付けをした場合とそうでない場合」とで計測してみたら、以下は全く変わっていませんでした。
- モバイル：89から変化なし
- PC：99から変化なし
具体的にはifrlameなどの動画のタグや、スライダーで使用するコードを一時的にコンテンツから除外、ページスピードインサイトで計測、問題ないと分かって元に戻してみたのです。
動画やスライダーなど動きのあるコンテンツは読み込み時の遅延につながらなかったという事になります。
エックスサーバーの高速化には動きのあるコンテンツのシステムとなるJQueryや、iflameに関するキャッシュ化のためのコードも書かれていますので、それで効果が出ていものと思われます。
余計なプラグインの削除
締めくくりは、効果がイマイチ感じられなかったワードプレスプラグインを削除して終了。
高速化のためのプラグインは種類によって干渉しあう場合が多く、400番・500番エラーの原因になりますので、不要なものは削除しておくのが無難だと思います。
削除してみて、残すプラグイン同士の相性を確認するために再度ページスピードインサイトを試しました。
他のサイトで「キャッシュ系プラグインを複数組み合わせて高速化している」、と解説している場合も散見されるのですが、高確率で干渉しあってサイトにエラーが起こりやすくなるのでご注意です。
前述しましたように、１つ試して動作確認を行うようにして、「どの高速化作業でどんな挙動になったか」を把握できるようにしておきたいですね。
高速化のための対策小まとめ
ワードプレスサイトの高速化のために有効だと思えた方法は以下のとおり(上から順に効果が高かった方法)
- レンタルサーバーの高速化機能をフル稼働
- CSS・JS・htmlの圧縮と遅延読み込み：Fast Velocity Minify
- <head>や<body>内の余計なコードの削除
- 画像の遅延読み込みプラグインlazy laoderは気休めで入れたまま
画像の圧縮プラグインCompress JPEG & PNG imagesは効果はイマイチだったので無効化→削除
なお、幣サイトではこの方法で上手くいきましたが、サイトの状態はそれぞれです。
個々のサイトに最適な高速化の方法を、上でお伝えしてきた通り１つ１つ試していただければと思います。
高速化の効果を感じられなかった方法
高速化の効果を感じられなかった方法もあります。
不要なリビジョンの削除
ワードプレスでサイトを構築していると、自動的にリビジョンが生成される場合があります。
この自動リビジョンがウエブサイトの高速化を妨げる要因になると知り、リビジョン削除プラグインとして知られる「WP-Optimize - Clean, Compress, Cache」を試してみました。
「自動リビジョンを削除する機能」の設定は以下の通り。
幣サイトの場合結果としては（それほど自動リビジョンのボリュームががなかったのか）ページスピードインサイトでのスコアは変わらなかったので、このプラグインも削除行きとなりました。
ただ、何度も投稿の更新を行って自動リビジョンがたまっているような場合は試してみるのも良いと思います！
それだけ高速化は収益に直結しますし、ご自身でやって納得できればいいと思うからです^^
キャッシュ系プラグイン：W3 Total Cache
「ワードプレスサイトの高速化といったら、キャッシュ系プラグインの導入に決まってる」と私はタカを括っていました。
しかーし…
問題となっていた「モバイルのページスピードインサイトスコア27」のサイトは、そもそもキャッシュ系プラグインWP total cacheを入れていたんです。
このプラグインの設定項目は約40個ほど、ウエブサイト運営上級者によく使われているものですが、幣サイトには効果を全く示しませんでした。
他のワードプレスキャッシュ系プラグインを試してみましたが、なお悪夢の「モバイルのページスピードインサイトスコア27」は微動だにしなかったのです。
まとめ：ウエブサイトの高速化は、試してみるまで結果はわからない
ワードプレスサイトの高速化のために久々に躍起になって試してみました。
とどのつまりウエブサイトそれぞれなので、どんな高速化の方法が効果を発揮するかはわかりません。
あるウエブサイトで「この高速化の方法は効果があった」と伝えられていても、自分のサイトに当てはまるかどうかはわからないということ。
ただ、闇雲に高速化の方法を試すのではなく、ページスピードインサイトの改善点のアドバイスなどを参考にして貴重なウエブサイトの運営時間を確保したいところです。
ご質問があれば以下で登録して何でも聞いてくださいね(^-^) 上で登録して下さった方にはECサイト初心者が「まず５万円稼ぐためのノウハウをまとめた無料プレゼント」を贈呈しています(^-^)
ご質問があればご遠慮なくどうぞ。