サイトスピード（ページ表示速度）とは、ユーザーがサイトを訪問したときにサイトが表示される速さのこと。
ユーザビリティやSEOにも影響を与える重要な要素で、サイトスピードが1秒から5秒まで遅くなると、直帰率が90%増加するというデータもあります。速ければ速いに越したことはありません。
ですが「サイトスピードが遅いのはわかってるけど、実際にどんな対策をしたらいいのか……。」と悩んでいる方も多いのかなと思います。
ということで今回は、WordPressサイト・ブログのスピード改善をするために僕が実施した施策を12個紹介します。また実際にどれくらい改善したのか、施策ごとにスコア結果をまとめてみました。
スピード改善に役立つプラグインを活用しているので、初心者の方でも実施可能な施策ばかりです。これからWordPressのサイトスピードを改善したい方は、ぜひ1つの事例として参考にいただけますと幸いです。
Contents
そもそもサイトスピードが遅いと何が問題なのか？
Photo by https://www.thinkwithgoogle.com
Webサイトでユーザーがイライラする要因として最も割合が高いのが、サイトスピードであると言われています。
Googleが示したデータでは、54%の人がサイトのロード時間が長いとフラストレーションが溜まり、モバイルサイトの場合3秒以上ロード時間がかかると半分以上の人がそのページの閲覧を止めます。
The average mobile webpage takes 15.3 seconds to fully load, and more than half of visits are abandoned if a mobile website takes more than three seconds to load.4 In retail, we see that a one-second delay in mobile load times can impact conversions by up to 20%.
平均的なモバイルWebページは完全にロードするのに15.3秒かかり、モバイルWebサイトでロードするのに3秒以上かかる場合、訪問者の半分以上が閲覧を放棄します。また小売業では、モバイルサイトのロード時間が1秒遅延すると、コンバージョンに最大20%まで影響することがあります。
サイトスピードが遅いと、直帰・離脱に繋がり、コンテンツを読んでもらえない可能性を高め、ひいてはアフィリエイトや広告のクリック率、CVRの低下にも影響します。
そうした背景もあり、Googleが2018年1月に「スピードアップデート」を実施し、ページの表示速度が検索エンジンのランキングに影響が出ると発表されました。サイトスピードが遅いサイトは、SEOでも不利になるのです。
そもそもどれくらいのスピードであればいいのか？
もちろんサイトスピードは速ければ速い方がベストです。現実的には1〜2秒以内くらいが理想とされています。
サイトスピードにはページの読み込みが完了するまでの「ロード時間」と、ユーザーが感じる「表示速度」があります。どちらかというとユーザビリティへの影響が大きいのは表示速度の方で、特に最初のファーストビューが表示されるまでの時間がユーザーの直帰率などに大きな重要を与えているようです。
参考までにGoogle公式サイトでは、直帰率とロード時間の関係を示す以下のデータが紹介されています（※データはモバイルページのもの）。
Photo by https://www.thinkwithgoogle.com
ロード時間が1 → 5秒になると…… 直帰率が90%増加
ちなみに最速で一時期有名になったサイトは、著名人の阿部寛さんの公式サイトです。爆速過ぎて感動しますね……（笑）。
阿部寛さんの公式サイト
サイトスピード改善の背景と改善前のデータ
僕が現在利用しているWordpressの人気テーマ「ストーク」
は、機能やデザインに優れていますが表示速度が遅いという難点があります。
そもそもモバイル版サイトの流入がPC版と比較し極端に少なく、実際に平均順位も低いので、どうしてかなと思っていましたが、1つの要因としてサイトスピードも影響してそうだなと。ユーザー行動による場合はしょうがないのですが、改善できる部分は極力改善しておきたいところ。
参考にGoogleが提供するサイトスピード分析のツール
PageSpeed Insightsで、「https://tekito-style.me/columns/webdesign-school-merit」の記事をチェックしてみると……
デスクトップ：44
デスクトップとスマフォのスコアに約3倍の開きが……。そもそもPC版も44スコアということでかなり低いです。モバイル版に至ってはもはや壊滅的ですね。できればスコア90以上は目指したいところ。悪くても80は行きたいですねー。これは改善しがいがあるな。
モバイル版
デスクトップ版
指摘されている改善できそうな項目は、下記のような感じですね。やはり重い画像データ周りが多いです。
- 画像サイズ
- 画像フォーマット
- 画像の遅延読み込み
- サーバーの応答時間
- レンダリングを妨げるリソース
参考までに下記のサイトスピード計測ツールhttps://gtmetrix.com/でも調べてみました。
（Relative Score / The average PageSpeed score is 72%）
・YSlow Score (63%) D
（The average YSlow score is 71%）
・Fully Loaded Time：9.8s
（Relative Fully Loaded Time The average Fully Loaded Time is 6.8s）
・Total Page Size 5.06MB
（The average Total Page Size is 3.25MB）
・Requests 104
（The average number of Requests is 90）
フルロードに9.8秒もかかっていますね……。
実際にスピード改善をやってみた！施策とその結果をまとめていきます
ということで実際にサイトスピード改善で効果がありそうな施策を実施してみました。結果の検証には、
PageSpeed Insightsのスコアを利用します。
参考までにテストを実施した時に環境条件は下記になります。
・プラン：スタンダードプラン
・テーマ：ストーク
・WordPressバージョン：5.2.2
・PHPバージョン：PHP 5.6.40 (CGI版)
またテーマによっては、導入するとエラーやバグが発生するプラグインがあります。テスト前にかならず確認しておきましょう。
参考：アルバトロス・ハミングバード・ストークテーマと相性の悪いプラグイン
※ 実施する前に、万が一に備えて必ずバックアップを取っておきましょう！バックアップについては以下のプラグインを参考にしてみてください ↓↓
1. 余計なWordpressプラグインを削除する
まずは簡単にすぐできるところから。プラグインは多用すると動作が重くなったりするので、不要なプラグインはどんどん削除しましょう。
また自分で実装できそうなものはテーマを編集するなど、できればプラグインを使わないで実現する方法を模索するのも手です。プラグインを導入する場合も、同じ機能ならできる限り動作が軽いプラグインを選びましょう。
今回は不要なWordpressプラグインを7個前後削除しました。
サイトスピード スコア結果
・デスクトップ：33
モバイルが微妙にスコアが上がり、PCは10くらい下がりました……。まぁこれくらいは誤差の範囲ということで次に進みます。
2. WordPressに溜まったゴミデータの削除
WordPressに溜まった不要なデータを削除することも、サイトスピードにプラスになる場合があります。リビジョン（記事の下書きや更新前データ）やゴミ箱のデータや、使っていないタグなど。
余分なリビジョンが溜まるとデータベースを圧迫し、サイトスピードに悪影響を与えます。
今回はリビジョンデータの削除・管理でおすすめなWordPressプラグイン「Optimize Database after Deleting Revisions」を活用してみました！
設定方法や使い方の詳細についてはこちらから ↓↓
こちらのプラグインで、57記事の645ものリビジョンデータを削除してくれました。
サイトスピード スコア結果
デスクトップ版
・デスクトップ：63
モバイル版は先程とスコアが変わりませんが、PC版がめっちゃ早くなりましたね。読み込み速度が体感的にも早くなりました！
しかし何回か計測するとPCが40くらいに戻ったりで、何が正しいのやら……。怯まず先に進めます。
3. 画像の負担を軽量化・最適化する
今回一番サイトスピードのネックになっていそうなのが、画像周りでした。ということでまずは画像の軽量化・最適化をしていきましょう。これでどれくらい改善できるか、楽しみなところです。
今回は「EWWW Image Optimizer」を利用していきます。EWWW Image Optimizerは、画像を軽量化・最適化できるWordPressプラグイン。
photo by：wordpress公式サイト
新規で投稿される画像はもちろん、過去に投稿した画像も自動で一括圧縮してくれます。画像に保存されている不要なメタデータを削除したりと便利なプラグインなのです。
設定方法や使い方の詳細についてはこちらから ↓↓
結果、以下の圧縮・最適化に成功しました。
- 圧縮：25%
- リサイズ：20%
- 削除結果：54.76 MB
これまで割とこまめに1枚1枚リサイズして圧縮していたのですが、まだまだリサイズできたようですね……。
サイトスピード スコア結果
モバイル版
デスクトップ版
・デスクトップ：63
スマフォ版は初めて20台へ！うーむ劇的には変わらないですね。ただ、PC版は安定してスコアが60代になってきました！
gtmetrixでも見て見ると、やや改善が見られました。
・Fully Loaded Time9.0s
ロード時間が9.8s → 9.0sとちょいと早くなっている感があります。
4. PHPのバージョンを最新に
WordPressサイトはPHPという言語で動作しており、PHPのバージョンを最新のものにしておくとサイトスピードが改善できたり、セキュリティ面でもより安全にサイト運営ができます。最新バージョンであるPHP7は、PHP5に比べ2倍以上のパフォーマンス改善を見込めるようです。
ただし、場合によっては不具合が起きるケースもあるので慎重に作業を進めましょう。現状のバージョンがPHP 5.6.40でしたので、これをPHP 7.3へ変更します。
PHPのバージョンアップ方法の詳細はこちらの記事から ↓↓
各主要サーバーごとのバージョン確認方法は、下記公式サイトをご確認ください。
サイトスピード スコア結果
・デスクトップ：53
うーむ、思った以上の効果は見込めなかったですね。むしろ数値が下がっている……。そもそもサーバーが最新のモジュール版ではなく、従来のCGI版なのもありますが、いったんこのまま進めていきましょう。
ただgtmetrix上では、ロードタイムが8.7sと、ようやく9秒を切りましたね。
Fully Loaded Time 8.7s
ちなみにPHPのバージョンもそうですが、WordPressも常に最新のバージョンに変更しておきましょう！
5. 最新の画像フォーマット「WebP」に対応する
WebP（ウェッピー）とは、Googleが開発した最新の静止画像フォーマット。WebPは従来の画像フォーマットより圧縮率が高く、導入すれば20〜30%近く軽量化することが可能です。
A new image format for the Web
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.（Web用の新しい画像形式
WebPでロスレス圧縮（可逆圧縮）された画像は、PNGと比較してファイルサイズが26％小さくなります。またWebPで非可逆圧縮された画像は、JPEGの場合、同等のSSIM品質指標の画像よりも25〜34％サイズが小さくなります。）
by：https://developers.google.com/speed/webp
ただしChrome、Edge、Firefox、Operaは対応していますが、AppleのSafariは未対応となっています。ですのでSafariとそれ以外のブラウザで画像フォーマットを切り替える処理をする必要があります。
先ほど紹介した画像圧縮・最適化のプラグイン「EWWW Image Optimizerを使えば、比較的簡単に対応可能です。
Webp対応の詳細はこちらの記事から ↓↓
サイトスピード スコア結果
・デスクトップ：75
合格項目が12と、着実に増えてますね！
モバイルのスコアは微増し、PC版スコアもついに70台に！
それにしても、モバイルはまだまだですね……。
・Fully Loaded Time：4.1s
gtmetrix.comでは、フルロード時間が4秒台に！！最初は9.8sだったので、ここまでで6秒早くなりました！！
6. 画像の遅延読み込み
画像データは重いため、全てを一気に読む込むと表示スピードに影響します。そこで画像を遅延読み込み（Lazy Load）させることで、画像を読み込むタイミングを調整しサイトの表示速度を改善できます。
「BJ Lazy Load」というプラグインを活用することで、簡単に導入できます。ただし遅延読み込みされる画像データが、適切にGoogleのbotにクロールされるように微調整が必要です。
プラグインの設定方法については下記記事をご確認くださいませ。
Native Lazyload
サイトスピード スコア結果
・デスクトップ：64
PCはちょい下がってますが、モバイル版のスコアが上がってますね〜！まだまだではありますが……。
Fully Loaded Time：7.1s
7. JavaScriptをフッターで読み込む
サイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。サイトのヘッダーに挿入しているリソースを、フッターで読み込ませることでレンダリング速度を改善できる可能性があります。
PageSpeed Insightsで下記のよう指摘される項目ですね。
「レンダリングを妨げるリソースの除外」
「ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。」
プラグインを使わずソースコードを自分で調整するのが良いのですが、自分でいじれない場合は「Scripts-To-Footer」というプラグインがおすすめです。
レンダリングブロックを排除してくれますが、JSの読み込みを遅らすことで動作エラーや計測エラーが起こる場合があります。jQueryなどが多用されていたり、計測ツールを色々導入している場合には注意してみてください。
プラグインの詳細はこちらから↓
サイトスピード スコア結果
・デスクトップ：70
結果はあまり前後で変わらず……。しかしレンダリングを妨げるリソースの除外が、1.47s → 1.25 sに変わっているので、やや減ってますね。計測ツールも整理と削除を今後検討してみます。
Fully Loaded Time：8.6s
gtmetrixでもそこまで変化はありませんでした。
8. CSSやJSなどの軽量化
画像ファイルの最適化の他にも、HTMLやCSS、Javascriptなどのリソースを最適化することで、スピード改善で一定の効果が見込めます。「Autoptimize」というプラグインを使えば、主要なリソースを簡単に軽量化・圧縮してくれるのでとても便利です。
こんな感じで、ぽちぽち設定項目にチェックを入れるだけでOKです。プラグイン使い方は下記記事をご参考ください。
サイトスピード スコア結果
・デスクトップ：80
モバイル版の数値がこれまで見たことない数字に……！なかなか上がらなかった数値なので、まだ50も超えてませんが嬉しい限り。
PC版もスコアがついに80台へ！
モバイル版は「レンダリングを妨げるリソースの除外」が、1.25ss → 0.64ssまで下がっています。
あとは「サーバー応答時間の短縮（TTFB）」を改善していけばいいのですかね。あとモジュール内の画像が悪さをしているようので、ここも調整の必要そうです。
Fully Loaded Time：8.0s
ちなみにgtmetrixでは大きな変化がありませんでしたね。
9. ブラウザのキャッシュを活用する
ブラウザのキャッシュを活用すると、HTMLやCSS、画像などのリソースをブラウザが一時保存（ブラウザキャッシュ）してくれます。そうすることで、ユーザーが同じページを再訪問した時に表示スピードを上げることができます。
ブラウザキャッシュを有効化するためには、プラグインは不要です。サーバー内にある「.htaccess」というファイルに特定のコードを追記します。FTPソフトを使う必要があるのですが、そこまで難しくはないです。
詳細な設定方法はこちらからご確認ください。 ↓↓
サイトスピード スコア結果
・デスクトップ：75
モバイル版のスコアがようやく50台に！
合格項目も14まで増えていますね。デスクトップ版もスコアが70〜80で安定してきましたね（合格項目11）。
YSlow Score（82%）B
Fully Loaded Time：3.9s
gtmetrixで確認してみるとスピードスコアは変わっていませんが、フルロード時間が3秒台になっていました！またYSlow Scoreも初めてBに。
10. サーバーのキャッシュ改善
ブラウザではなく、サーバー上のキャッシュを改善することでも、サイトスピードを改善することが可能です。ややこしいのですが、サーバー上で事前にページを生成しキャッシュとして保存しておくことで、表示速度を改善します。
「WP Fastest Cache」というプラグインが、設定も簡単で動作も比較的安定しているのでおすすめです。
またサーバーキャッシュ周りのプラグインはトラブルが発生する可能性が高いので、事前にバックアップを必ず取るようにしましょう……！
実際に僕もモバイルサイトなのに、PCのコンテンツが表示されるなど不具合がありました。お使いのWordPressテーマによっては、事前にバグやエラーの発生事例がないか、導入前にリサーチをしてみてください。
プラグインの設定方法は以下から ↓↓
サイトスピード スコア結果
・デスクトップ：92 合格した監査 (13)！！
デスクトップサイトは、念願の90台スコアをついに拝めることに……！導入後、PC・SPともに「サーバーの応答時間が遅い（TTFB）」という指摘は解消されたましたね。PCに関してはもう広告の画像が重いくらいしか指摘されない感じです。ほとんどマックス値まで持ってこれました。
モバイル版も改善はしていますが、PCと比較し思ったよりは伸びず……。8割くらいいきたいところですが、なかなか難しいですね……。
YSlow Score（82%）B
Fully Loaded Time：3.1s
gtmetrix.comでは、フルロード時間が、3秒前半台に！かなり早くなりましたね。
11. 余計なウィジットや広告を取り除く
ここからは微調整の施策になります。サイト上で不要なもの、機能していないものは思い切って外すことでスピード改善に繋がる可能性もあります。ですので不要なものは削除してみました。
- アドセンスなどでクリック率の低い広告
- 利用されていないウィジェット
- Youtube動画の埋め込み
- Google Mapの埋め込み
- テーマの不要なアニメーション
PageSpeed Insightsの注意事項を見ると、アドセンスなどで配信されている広告画像がWebpに対応していないので、それが遅くなっている要因のようです。これはコントロールできないので仕方ないですが、効果の薄いアドセンス広告などがある方は削除した方が良さげ。
インプレッションが少ない上に、収益も少ない広告は今回改めて整理し、サイトから削除してアーカイブしました。
僕は使っていませんがその他注意すべきものとしては、
・Facebook いいねBox
・Twitterのタイムライン
などもプラグインで表示しているサイトもありますが、読み込み動作が重くなる要因なので、テストでいったん外してみることをおすすめします。
また僕が使っているテーマ「Stork」のスライダー付き記事一覧（pickup記事）機能や、テキストのフェードインなどアニメーション機能についても今回検討してみました。スライダーはTOPページだけなので悩みましたが、スライドさせていた余分な記事の数を11記事から6個記事へ整理。フェードインアニメーションはオフにしています。
サイトスピード スコア結果
結果、サイトスピードスコアへの影響はほとんど変わらず…… といった結果でした。特に重いウィジットや埋め込みなどは使っていなかったので、もし使っている方は試してみてください！
12. 個別の画像調整
こちらも微調整。「適切なサイズの画像」の指摘を確認してみると、テーマのモジュール内の画像と、サイトロゴ画像、プロフィール画像など、特定の画像が最適化されておらず、スピードへ悪影響しているようでした。
画像最適化プラグインの対象から抜け漏れていたようなので、Th_markersとイメージオプティムを使い、1枚1枚リサイズと圧縮を行い再アップロード。
328px → 150pxへ
194 KB → 6KB
・プロフィール画像
72kb → 9kb
こんな感じまで、画像サイズを落とせました。
同一の画像はすべて差し替えます。差し替えには一括置換ツールの「search regex」を利用しました。
サイトスピード スコア結果
モバイル版については「画像の最適サイズ」については言及されなくなり、合格項目が14に。ただスピードはそこまで変わらず、といった結果となりました。
今回実施しなかったけど、今度検討する施策
今回のスピード改善施策としては実施しませんでしたが、今後検討し随時実施してみようと思っている施策をメモしておきます。検証でき次第、結果をレポートできればと思います！
CDNの利用
Cloud Flareなど、CDNの利用もサイトスピードの改善に繋がりそうです。CDNは簡単に言うと、Webサイトを複数の地域の複数のサーバーで共有するサービス。今回導入しようかと検討しましたが、色々と設定・リサーチなどが必要そうだったのでいったん保留にします。
途中で力尽きたので、また時間ある時にテストしてみます！
サーバーの性能改善・移転
僕が使っているのではさくらのレンタルサーバーなのですが、サーバーの応答時間を削減するために高速サーバーへ変える、高いプランへ切り替えることを検討しました。
さくらサーバーの場合、2018年4月以降に登録したユーザーは処理の早いモジュール版をデフォルトで使えるのですが、それ以前に登録したユーザーは従来のCGI版しか使えないんですよね（プレミアム、ビジネスプランは切り替え可能）。
※参考：さくらのレンタルサーバでWordPressサイトを高速に動かす方法。モジュール版PHPって何!?
ですので、さくらサーバーを同じプランか別のプランで再度契約し直すか、別のサーバーに切り替えるかしないといけません。
この際せっかくなので、別サーバーも使ってみようかなーとは思っています。GMOが提供している高性能レンタルサーバ「ConoHa WING(コノハウィング)
」や、安定感のある「エックスサーバー
」など。
サーバー移転となるので、ある程度準備した上で随時実施してみようかなと思います。ConoHaは最近よく名前を聞くので、ちょっと使ってみたいですね。
国内最速・高安定の高性能レンタルサーバー【ConoHa WING】
月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
AMP対応する
モバイル版のサイト改善施策として、AMP（Accelerated Mobile Pages）対応することも検討しています。Googleが推奨しているサイトコンテンツを高速で表示できる仕様なので、可能な限り導入すべきではあります。ただし色々と制約があったり調整が必要なので、導入するかどうかは検討中です。
現職で扱っているサービスがAMP対応をしていて、その開発ディレクションなどをしていたのですが、JSが自由に使えなかったり、ファイルサイズなどに制限があって表示したいコンテンツを表示できない、レイアウトが崩れたりなど、色々と悩ましい感じですね……。
AMP用のWordPressプラグインもあるので、テストで使ってみようかな。
「Google developers ブログ」にAMPに関してこんな記事もありました。AMP導入を検討している方は参考にしてみては？
AMP の誤解を払拭する
プラグインの再調整
今回サイトスピード改善で色々なプラグインを入れましたが、できる限りプラグインは入れないほうが処理に負荷がかかりません。その他のプラグインも含めて、自力で設定しプラグインを使わない方法はないか、自分でもできそうか含め改めて検討してみようかなと思います。
速度の早いテーマへ変更
本サイトはStorkを使っていますが、高速なテーマに変更するのも手段としてありかなと検討しています。色々とカスタマイズをしたので、テーマ切替時に色々と設定をし直す必要があり正直面倒くさいのですが……。
参考までに下記のテーマ「Godios」はクソ早いです（笑）。ページ遷移速度0秒というコピーがすごい。有料（4980円）ですが、使ってみる価値はありそう。
「Godios」デモサイト
最近Storkの新テーマ「STORK19
」が出たようなので、そちらも使ってみようか検討中です。Storkのデザインの良さはそのままに、機能追加と従来のもっさり感がなくなり、かなり高速になっていると評判ですね。
めっちゃ使ってみたいのですが、またカスタマイズし直さないといけないのか……と思うと腰が重くなります（笑）。1日じっくり時間取れたらやってみよう……。
WordPressテーマ「STORK19」
まとめ
ここまでWordPressのスピード改善について施策と結果をまとめてきましたが、いかがでしたでしょうか？スピード改善周りについて予備知識があまりなかったので、リサーチと施策の洗い出し、施策の実施と計測と結果のまとめなど、諸々1週間近くかかってしまいました。けっこう疲れた（笑）。
基本的に初心者の方でも取り組める施策ばかりです。動作環境によってテスト結果も異なるかと思うので、ぜひ参考にテストしてみてくださいませ。
今回の結果をまとめると、検証前後で下記のように改善できました。
モバイル：13 → 55
※フルロード時間：9.8s → 3.1s
PC版はスコア90超えを達成！モバイル版はまだまだ改善の余地があるので、今後も追加で実施し、改善に繋がった施策は随時更新していきたいと思います。
最後までお読みいただき、誠にありがとうございました！
