こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード（ページ表示速度）とは、ユーザーがサイトを訪問したときにサイトが表示される速さのこと。

ユーザビリティやSEOにも影響を与える重要な要素で、サイトスピードが1秒から5秒まで遅くなると、直帰率が90%増加するというデータもあります。速ければ速いに越したことはありません。

ですが「サイトスピードが遅いのはわかってるけど、実際にどんな対策をしたらいいのか……。」と悩んでいる方も多いのかなと思います。

ということで今回は、WordPressサイト・ブログのスピード改善をするために僕が実施した施策を12個紹介します。また実際にどれくらい改善したのか、施策ごとにスコア結果をまとめてみました。

スピード改善に役立つプラグインを活用しているので、初心者の方でも実施可能な施策ばかりです。これからWordPressのサイトスピードを改善したい方は、ぜひ1つの事例として参考にいただけますと幸いです。

そもそもサイトスピードが遅いと何が問題なのか？

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%まで影響することがあります。

https://www.thinkwithgoogle.com

サイトスピードが遅いと、直帰・離脱に繋がり、コンテンツを読んでもらえない可能性を高め、ひいてはアフィリエイトや広告のクリック率、CVRの低下にも影響します。

そうした背景もあり、Googleが2018年1月に「スピードアップデート」を実施し、ページの表示速度が検索エンジンのランキングに影響が出ると発表されました。サイトスピードが遅いサイトは、SEOでも不利になるのです。

そもそもどれくらいのスピードであればいいのか？

もちろんサイトスピードは速ければ速い方がベストです。現実的には1〜2秒以内くらいが理想とされています。

サイトスピードにはページの読み込みが完了するまでの「ロード時間」と、ユーザーが感じる「表示速度」があります。どちらかというとユーザビリティへの影響が大きいのは表示速度の方で、特に最初のファーストビューが表示されるまでの時間がユーザーの直帰率などに大きな重要を与えているようです。

参考までにGoogle公式サイトでは、直帰率とロード時間の関係を示す以下のデータが紹介されています（※データはモバイルページのもの）。

Photo by https://www.thinkwithgoogle.com

ちなみに最速で一時期有名になったサイトは、著名人の阿部寛さんの公式サイトです。爆速過ぎて感動しますね……（笑）。
阿部寛さんの公式サイト

サイトスピード改善の背景と改善前のデータ

僕が現在利用しているWordpressの人気テーマ「ストーク」は、機能やデザインに優れていますが表示速度が遅いという難点があります。

そもそもモバイル版サイトの流入がPC版と比較し極端に少なく、実際に平均順位も低いので、どうしてかなと思っていましたが、1つの要因としてサイトスピードも影響してそうだなと。ユーザー行動による場合はしょうがないのですが、改善できる部分は極力改善しておきたいところ。

参考にGoogleが提供するサイトスピード分析のツール
PageSpeed Insightsで、「https://tekito-style.me/columns/webdesign-school-merit」の記事をチェックしてみると……

スコア低……（泣）。

デスクトップとスマフォのスコアに約3倍の開きが……。そもそもPC版も44スコアということでかなり低いです。モバイル版に至ってはもはや壊滅的ですね。できればスコア90以上は目指したいところ。悪くても80は行きたいですねー。これは改善しがいがあるな。

モバイル版

デスクトップ版

指摘されている改善できそうな項目は、下記のような感じですね。やはり重い画像データ周りが多いです。

参考までに下記のサイトスピード計測ツールhttps://gtmetrix.com/でも調べてみました。

フルロードに9.8秒もかかっていますね……。

実際にスピード改善をやってみた！施策とその結果をまとめていきます

ということで実際にサイトスピード改善で効果がありそうな施策を実施してみました。結果の検証には、
PageSpeed Insightsのスコアを利用します。

参考までにテストを実施した時に環境条件は下記になります。

またテーマによっては、導入するとエラーやバグが発生するプラグインがあります。テスト前にかならず確認しておきましょう。
参考：アルバトロス・ハミングバード・ストークテーマと相性の悪いプラグイン

※ 実施する前に、万が一に備えて必ずバックアップを取っておきましょう！バックアップについては以下のプラグインを参考にしてみてください ↓↓

関連記事バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2022.02.22

1. 余計なWordpressプラグインを削除する

まずは簡単にすぐできるところから。プラグインは多用すると動作が重くなったりするので、不要なプラグインはどんどん削除しましょう。

また自分で実装できそうなものはテーマを編集するなど、できればプラグインを使わないで実現する方法を模索するのも手です。プラグインを導入する場合も、同じ機能ならできる限り動作が軽いプラグインを選びましょう。

今回は不要なWordpressプラグインを7個前後削除しました。

サイトスピード スコア結果

モバイルが微妙にスコアが上がり、PCは10くらい下がりました……。まぁこれくらいは誤差の範囲ということで次に進みます。

2. WordPressに溜まったゴミデータの削除

WordPressに溜まった不要なデータを削除することも、サイトスピードにプラスになる場合があります。リビジョン（記事の下書きや更新前データ）やゴミ箱のデータや、使っていないタグなど。

余分なリビジョンが溜まるとデータベースを圧迫し、サイトスピードに悪影響を与えます。

今回はリビジョンデータの削除・管理でおすすめなWordPressプラグイン「Optimize Database after Deleting Revisions」を活用してみました！

設定方法や使い方の詳細についてはこちらから ↓↓

関連記事リビジョン削除のWordPressプラグインOptimize Database after Deleting Revisionsの使い方まとめ

2020.04.20

こちらのプラグインで、57記事の645ものリビジョンデータを削除してくれました。

サイトスピード スコア結果

デスクトップ版

モバイル版は先程とスコアが変わりませんが、PC版がめっちゃ早くなりましたね。読み込み速度が体感的にも早くなりました！

しかし何回か計測するとPCが40くらいに戻ったりで、何が正しいのやら……。怯まず先に進めます。

3. 画像の負担を軽量化・最適化する

今回一番サイトスピードのネックになっていそうなのが、画像周りでした。ということでまずは画像の軽量化・最適化をしていきましょう。これでどれくらい改善できるか、楽しみなところです。

今回は「EWWW Image Optimizer」を利用していきます。EWWW Image Optimizerは、画像を軽量化・最適化できるWordPressプラグイン。

photo by：wordpress公式サイト

新規で投稿される画像はもちろん、過去に投稿した画像も自動で一括圧縮してくれます。画像に保存されている不要なメタデータを削除したりと便利なプラグインなのです。

設定方法や使い方の詳細についてはこちらから ↓↓

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

結果、以下の圧縮・最適化に成功しました。

これまで割とこまめに1枚1枚リサイズして圧縮していたのですが、まだまだリサイズできたようですね……。

サイトスピード スコア結果

モバイル版

デスクトップ版

スマフォ版は初めて20台へ！うーむ劇的には変わらないですね。ただ、PC版は安定してスコアが60代になってきました！

gtmetrixでも見て見ると、やや改善が見られました。

ロード時間が9.8s → 9.0sとちょいと早くなっている感があります。

4. PHPのバージョンを最新に

WordPressサイトはPHPという言語で動作しており、PHPのバージョンを最新のものにしておくとサイトスピードが改善できたり、セキュリティ面でもより安全にサイト運営ができます。最新バージョンであるPHP7は、PHP5に比べ2倍以上のパフォーマンス改善を見込めるようです。

ただし、場合によっては不具合が起きるケースもあるので慎重に作業を進めましょう。現状のバージョンがPHP 5.6.40でしたので、これをPHP 7.3へ変更します。

PHPのバージョンアップ方法の詳細はこちらの記事から ↓↓

関連記事PHP Compatibility Checkerの使い方・設定方法まとめ！PHPバージョンUPで必須のプラグイン

2020.04.20

各主要サーバーごとのバージョン確認方法は、下記公式サイトをご確認ください。

サイトスピード スコア結果

うーむ、思った以上の効果は見込めなかったですね。むしろ数値が下がっている……。そもそもサーバーが最新のモジュール版ではなく、従来のCGI版なのもありますが、いったんこのまま進めていきましょう。

ただgtmetrix上では、ロードタイムが8.7sと、ようやく9秒を切りましたね。

ちなみに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対応の詳細はこちらの記事から ↓↓

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

サイトスピード スコア結果

合格項目が12と、着実に増えてますね！

モバイルのスコアは微増し、PC版スコアもついに70台に！

それにしても、モバイルはまだまだですね……。

gtmetrix.comでは、フルロード時間が4秒台に！！最初は9.8sだったので、ここまでで6秒早くなりました！！

6. 画像の遅延読み込み

画像データは重いため、全てを一気に読む込むと表示スピードに影響します。そこで画像を遅延読み込み（Lazy Load）させることで、画像を読み込むタイミングを調整しサイトの表示速度を改善できます。

「BJ Lazy Load」というプラグインを活用することで、簡単に導入できます。ただし遅延読み込みされる画像データが、適切にGoogleのbotにクロールされるように微調整が必要です。

プラグインの設定方法については下記記事をご確認くださいませ。

関連記事画像の遅延読み込みをするWPプラグインBJ Lazy Loadの使い方・設定方法まとめ

2020.04.20

サイトスピード スコア結果

PCはちょい下がってますが、モバイル版のスコアが上がってますね〜！まだまだではありますが……。

7. JavaScriptをフッターで読み込む

サイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。サイトのヘッダーに挿入しているリソースを、フッターで読み込ませることでレンダリング速度を改善できる可能性があります。

PageSpeed Insightsで下記のよう指摘される項目ですね。

「レンダリングを妨げるリソースの除外」
「ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。」

by：PageSpeed Insights

プラグインを使わずソースコードを自分で調整するのが良いのですが、自分でいじれない場合は「Scripts-To-Footer」というプラグインがおすすめです。

レンダリングブロックを排除してくれますが、JSの読み込みを遅らすことで動作エラーや計測エラーが起こる場合があります。jQueryなどが多用されていたり、計測ツールを色々導入している場合には注意してみてください。

プラグインの詳細はこちらから↓

関連記事Scripts-To-Footerの使い方・設定方法まとめ！JSをフッターに一括移動できるプラグイン

2020.04.20

サイトスピード スコア結果

結果はあまり前後で変わらず……。しかしレンダリングを妨げるリソースの除外が、1.47s → 1.25 sに変わっているので、やや減ってますね。計測ツールも整理と削除を今後検討してみます。

gtmetrixでもそこまで変化はありませんでした。

8. CSSやJSなどの軽量化

画像ファイルの最適化の他にも、HTMLやCSS、Javascriptなどのリソースを最適化することで、スピード改善で一定の効果が見込めます。「Autoptimize」というプラグインを使えば、主要なリソースを簡単に軽量化・圧縮してくれるのでとても便利です。

こんな感じで、ぽちぽち設定項目にチェックを入れるだけでOKです。プラグイン使い方は下記記事をご参考ください。

関連記事Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】

2020.04.20

サイトスピード スコア結果

モバイル版の数値がこれまで見たことない数字に……！なかなか上がらなかった数値なので、まだ50も超えてませんが嬉しい限り。

PC版もスコアがついに80台へ！

モバイル版は「レンダリングを妨げるリソースの除外」が、1.25ss → 0.64ssまで下がっています。

あとは「サーバー応答時間の短縮（TTFB）」を改善していけばいいのですかね。あとモジュール内の画像が悪さをしているようので、ここも調整の必要そうです。

ちなみにgtmetrixでは大きな変化がありませんでしたね。

9. ブラウザのキャッシュを活用する

ブラウザのキャッシュを活用すると、HTMLやCSS、画像などのリソースをブラウザが一時保存（ブラウザキャッシュ）してくれます。そうすることで、ユーザーが同じページを再訪問した時に表示スピードを上げることができます。

ブラウザキャッシュを有効化するためには、プラグインは不要です。サーバー内にある「.htaccess」というファイルに特定のコードを追記します。FTPソフトを使う必要があるのですが、そこまで難しくはないです。

詳細な設定方法はこちらからご確認ください。 ↓↓

関連記事プラグイン不要！ブラウザキャッシュを設定しWordPressのサイトスピードを改善する方法

2019.11.30

サイトスピード スコア結果

モバイル版のスコアがようやく50台に！

合格項目も14まで増えていますね。デスクトップ版もスコアが70〜80で安定してきましたね（合格項目11）。

gtmetrixで確認してみるとスピードスコアは変わっていませんが、フルロード時間が3秒台になっていました！またYSlow Scoreも初めてBに。

10. サーバーのキャッシュ改善

ブラウザではなく、サーバー上のキャッシュを改善することでも、サイトスピードを改善することが可能です。ややこしいのですが、サーバー上で事前にページを生成しキャッシュとして保存しておくことで、表示速度を改善します。

「WP Fastest Cache」というプラグインが、設定も簡単で動作も比較的安定しているのでおすすめです。

またサーバーキャッシュ周りのプラグインはトラブルが発生する可能性が高いので、事前にバックアップを必ず取るようにしましょう……！

実際に僕もモバイルサイトなのに、PCのコンテンツが表示されるなど不具合がありました。お使いのWordPressテーマによっては、事前にバグやエラーの発生事例がないか、導入前にリサーチをしてみてください。

プラグインの設定方法は以下から ↓↓

関連記事WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】

2020.04.20

サイトスピード スコア結果

デスクトップサイトは、念願の90台スコアをついに拝めることに……！導入後、PC・SPともに「サーバーの応答時間が遅い（TTFB）」という指摘は解消されたましたね。PCに関してはもう広告の画像が重いくらいしか指摘されない感じです。ほとんどマックス値まで持ってこれました。

モバイル版も改善はしていますが、PCと比較し思ったよりは伸びず……。8割くらいいきたいところですが、なかなか難しいですね……。

gtmetrix.comでは、フルロード時間が、3秒前半台に！かなり早くなりましたね。

11. 余計なウィジットや広告を取り除く

ここからは微調整の施策になります。サイト上で不要なもの、機能していないものは思い切って外すことでスピード改善に繋がる可能性もあります。ですので不要なものは削除してみました。

PageSpeed Insightsの注意事項を見ると、アドセンスなどで配信されている広告画像がWebpに対応していないので、それが遅くなっている要因のようです。これはコントロールできないので仕方ないですが、効果の薄いアドセンス広告などがある方は削除した方が良さげ。

インプレッションが少ない上に、収益も少ない広告は今回改めて整理し、サイトから削除してアーカイブしました。

僕は使っていませんがその他注意すべきものとしては、

・Facebook いいねBox
・Twitterのタイムライン

などもプラグインで表示しているサイトもありますが、読み込み動作が重くなる要因なので、テストでいったん外してみることをおすすめします。

また僕が使っているテーマ「Stork」のスライダー付き記事一覧（pickup記事）機能や、テキストのフェードインなどアニメーション機能についても今回検討してみました。スライダーはTOPページだけなので悩みましたが、スライドさせていた余分な記事の数を11記事から6個記事へ整理。フェードインアニメーションはオフにしています。

サイトスピード スコア結果

結果、サイトスピードスコアへの影響はほとんど変わらず…… といった結果でした。特に重いウィジットや埋め込みなどは使っていなかったので、もし使っている方は試してみてください！

12. 個別の画像調整

こちらも微調整。「適切なサイズの画像」の指摘を確認してみると、テーマのモジュール内の画像と、サイトロゴ画像、プロフィール画像など、特定の画像が最適化されておらず、スピードへ悪影響しているようでした。

画像最適化プラグインの対象から抜け漏れていたようなので、Th_markersとイメージオプティムを使い、1枚1枚リサイズと圧縮を行い再アップロード。

こんな感じまで、画像サイズを落とせました。

同一の画像はすべて差し替えます。差し替えには一括置換ツールの「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週間近くかかってしまいました。けっこう疲れた（笑）。

基本的に初心者の方でも取り組める施策ばかりです。動作環境によってテスト結果も異なるかと思うので、ぜひ参考にテストしてみてくださいませ。

今回の結果をまとめると、検証前後で下記のように改善できました。

PC版はスコア90超えを達成！モバイル版はまだまだ改善の余地があるので、今後も追加で実施し、改善に繋がった施策は随時更新していきたいと思います。

最後までお読みいただき、誠にありがとうございました！

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード改善で一定の成果を見込める施策として、キャッシュ改善があります。サーバー上で事前にページを生成し、キャッシュとして保存しておくことで、表示速度を改善することができます。

WordPressサイトの場合は、プラグインで導入することができます。おすすめなプラグインが「WP Fastest Cache」。設定方法がシンプルなので、初心者でも比較的簡単に使うことができます。

キャッシュ系のプラグインはW3 Total CacheやWP Super Cacheなど色々あるのですが、比較的バグ報告が少なく（現状僕が使っているテーマ「Stork」との相性も加味し）、また簡単に使えるということでWP Fastest Cacheを選定しました。

ということで今回はWP Fastest Cacheの使い方や注意点などを解説していくので、キャッシュ改善を検討している方はぜひチェックしてみてください。

WP Fastest Cacheの導入方法

まずはWP Fastest Cacheの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

まずバックアップを必ず取る

キャッシュ系のプラグインは、導入するとデザインが崩れたりPCとSPの切り分けができなくなったりと、様々なトラブルが発生する可能性があります。

環境やテーマなどによって何が起こるか予測しづらいので、設定する前に必ずバックアップを取りましょう！

バックアップには「UpdraftPlus」というプラグインがおすすめです。無料で簡単にバックアップデータを作成することが可能です。

関連記事バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2022.02.22

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「WP Fastest Cache」で検索。「いますぐインストール」をクリックし、有効化します。

画像のチーターは、速くなるからってことでしょうか？（笑）

インストールされてるか確認

インストールを完了すると、管理画面のサイドバーに「WP Fastest Cache」が追加されていればOKです。クリックして詳細を確認しましょう。

基本的にデフォルトで全ての設定項目がアンチェック状態なので、インストールしても設定しないと起動はしません。キャッシュ系のプラグインはトラブルが多いので安心ですね。

WP Fastest Cacheの使い方

WP Fastest Cacheは多機能ですが、必要な項目をチェックするだけなので簡単に設定できます。確認していきましょう。

1. 日本語設定に変更

WP Fastest Cacheデフォルトでは言語が英語になっていますが、日本語表示も可能です。初心者にはありがたいですね！

先に「日本語」へ変更し、「変更を保存」しておきましょう。

2. 詳細設定

必要な項目をチェックするだけでOKです。

キャッシュ

こちらは有効にしないとプラグインそのものが機能しません。必ずチェックをつけましょう。

Preload（プレロード）

指定した項目のキャッシュを、自動で事前に作成してくれる機能です。クリックすると、詳細設定ができます。

よくユーザーが使うであろう下記の項目は、チェックしておくことをおすすめします。

ログインユーザー

チェックすると、ログインユーザー（サイト管理者）に対してキャッシュを表示しなくなります。

サイト管理者の場合、キャッシュが残るとテーマなどをカスタマイズしたときに変更内容の確認がしにくくなります。ですのでチェックすることをおすすめします。

モバイル

モバイルの項目はいったんチェックしておきましょう。テーマによってはスマフォ版のデザインが崩れたり、PCとスマフォ版の切り替えができなくなったりと多々エラーが発生するようです。

テーマが僕と同じStorkの場合、不具合が発生する事例を確認しています。実際に僕もこの項目にチェックをつけないでスマフォ版を確認したら、PC版のサイドバーがSP版で表示されるエラーが発生していました。

ですので、この項目にチェックを入れ、モバイルユーザーにはキャッシュを表示しないようにしています。

Googleが提供するサイトスピード計測ツール「PageSpeed Insights」で提案される改善項目で、スマフォ版の「サーバー応答時間の短縮（TTFB）」がもともと未解決でしたが、「モバイル」の項目を外すと合格できました。

しかしエラーが発生するのでこの項目にチェックをつけると、やはり「サーバー応答時間の短縮（TTFB）」の指摘が再度されるように……。スマフォのサイトスピードを改善したいので悩ましいですが、こればかりは仕方ないですね。

もしチェックを外し、モバイルユーザーに対してキャッシュを表示したい場合は、有効後に必ずPC版とスマフォ版それぞれにエラーやバグが発生していないか隈なく確認することとおすすめします。

問題が起きたときは、「モバイル」をチェックして解除できますよ。

新しい投稿

「新しい投稿」はチェックしておきましょう（Clear All CasheでOK）。新規投稿する時に、指定した項目のキャッシュを削除することができます。

記事を投稿する度に古いキャッシュを削除し、新規キャッシュに入れ替えることで、定期的にキャッシュ状況を最新状態に保つことができます（記事更新頻度によりますが）。

Update Post

こちらは「新しい投稿」とは違い、記事を更新した場合にキャッシュを削除できる機能です。合わせてチェックしておきましょう。

ファイル圧縮・最適化

ファイル圧縮・最適化の項目は、他の専用プラグインで管理しているため今回チェックしませんでした。

もしファイル圧縮が必要であればチェックしましょう。

参考までに、僕がファイル圧縮・最適化で使っているのは、「Autoptimize」というプラグインです。

関連記事Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】

2020.04.20

Gzip圧縮

この項目も必要に応じてチェックしておきましょう。サイトリソースをサーバー上で圧縮することで、転送量を減らし高速化してくれます。

他のプラグインで設定している場合はチェックは不要です。

ブラウザキャッシュ

サーバー上ではなく、ブラウザ上でのキャッシュを生成してくれます。僕は.htaccessファイルに直接設定を記述しているので、今回はチェックを外します。

ブラウザキャッシュは、プラグインを利用しなくても比較的簡単に設定できます。キャッシュの設定も細かく指定できるので、以下記事もぜひ参考にしてみてくださいね。

関連記事プラグイン不要！ブラウザキャッシュを設定しWordPressのサイトスピードを改善する方法

2019.11.30

ファイルを直接いじりたくない、現状他のプラグインでブラウザキャッシュを何も設定していない方は、こちらで簡易的に管理してもいいかなとは思います。

3. キャッシュの削除方法

上記の設定で、記事を投稿・更新した場合に定期的にキャッシュが削除・更新されるようになりましたが、「キャッシュの削除」タブから手動・もしくは自動更新で削除することもできます。

キャッシュを削除

キャッシュファルダ内の全てのキャシュを削除します。

キャッシュと圧縮されたCSS/JSファイルを削除

テーマのコードを変更するなどで、CSS/JSファイルを変更した場合はこちらをチェックしましょう。

Timeout Rules

「Add New Rule」をクリックすると、キャッシュを自動削除する頻度の調整が可能です。必要に応じて設定しておきましょう。

WP Fastest Cacheを有効活用しよう！

ここまでWP Fastest Cacheの使い方を紹介してきましたが、かなり簡単に設定できるのでぜひキャッシュ改善のプラグインとしておすすめしたいところです。

実際にPC版は「サーバーの応答時間が遅い（TTFB）」が解消され、サイトスピードスコアが70後半から90台へ上昇しました！

色々サイトスピード改善で試行錯誤していたのですが、キャッシュ周りで思った以上に改善できましたね。スマフォ版もスコア40前半から50台に改善したので、10前後のスコア改善に。スマフォはまだかなり改善の余地があるので、引き続き調整していきます……。

PCに関しては、広告で表示される画像が重いくらいしかもう指摘されない感じですね。

サイトスピードについては、キャッシュもそうですが画像周りの施策でもサイトスピードをかなり改善できたので、以下の記事もぜひチェックしてみてくださいね。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

関連記事画像の遅延読み込みをするWPプラグインBJ Lazy Loadの使い方・設定方法まとめ

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

そこで便利なプラグインが「BJ Lazy Load」。導入することで簡単に遅延読み込み機能を実装できます。。

今回はBJ Lazy Loadの使い方や注意点などを解説していくので、遅延読み込み機能を検討している方はぜひチェックしてみてください。

BJ Lazy Loadってどんなプラグイン？

photo by：WordPress公式サイト

BJ Lazy Loadは画像の遅延読み込みを簡単に実装できるWordPressプラグイン。画面に画像を表示するタイミングで画像データを読み込む設定ができます。一気に画像データを読み込む必要がなくなるので、サイトの表示スピード改善が期待できます。

Googleが提供するサイトスピード計測ツール「PageSpeed Insights」で提案される改善項目で、「オフスクリーン画像の遅延読み込み」と出るのがそれです。

また遅延読み込み対策ができるプラグインは、以下のように色々と種類があります。

• Lazy Load
• BJ Lazy Load
• a3 Lazy Load
• Lazy Load by WP Rocket
• Lazy Load Optimizer

ただしプラグインによっては、利用しているテーマと相性が悪い場合があります。現在僕が使っているテーマ「ストーク」だと正常に動作しないと指摘されているプラグインもあったので、今回は事前にリサーチし問題なさそうな「BJ Lazy Load」を選定しました。

BJ Lazy Loadで遅延読み込み設定できる項目

BJ Lazy Loadでは、以下の要素の遅延読み込み対応が可能です。コンテンツ内の画像データ以外にも、サムネイルや重くなりがちなiframeタグの遅延読み込みも可能です。

• コンテンツ
• テキストウィジェット
• 投稿サムネイル
• グラバター
• 画像
• iframe

BJ Lazy Load

BJ Lazy Loadの導入方法

BJ Lazy Loadの導入方法を確認していきましょう！他のWordPressプラグインと手順は同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「BJ Lazy Load」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「BJ Lazy Load」が追加されていればOKです。クリックして詳細を確認しましょう。

BJ Lazy Loadの使い方・設定方法

BJ Lazy Loadの使い方や設定方法はかなりシンプルです。一つ一つ確認していきましょう。

基本設定

基本的に全ての項目に「YES」で問題ないです。下記の項目にLazy loadが実装されます。

• Apply to content（記事内の画像）
• Apply to text widgets（ウィジットの画像）
• Apply to post thumbnails（サムネイル画像）
• Apply to gravatars（アバター画像）
• Lazy load images（画像の遅延読み込み）
• Lazy load iframes（iframeタグの遅延読み込み）

追加設定

もう少し細かい設定もできるので、確認していきましょう。

Placeholder Image URL

画像が表示されるまで、仮の画像を表示する設定ができます。特に設定しなくてもOKかなと思います。必要であれば、仮画像のURLを設定しておきましょう。

Skip images with classes

特定のクラスが付与されている画像を、遅延読み込みの対象から除外できます。

例えば僕の使っているテーマstorkでは、ファーストビューで表示される画像やロゴ画像の読み込みが遅くなると、体感的に表示される速度が遅くなり微妙な感じになりました。ですのでそこだけ「no-bj-lazy」というクラスを割り当てて、遅延読み込みを解除しています。

遅延解除のために新規でクラスを追加するだけでなく、既存のクラスも指定できるので便利ですね。

Threshold

画像を読み込ませるタイミングを指定することができます（単位はピクセル）。例えば100とかに設定すると、画像が表示される100px手前で読み込みが開始されるので、かなり直前で読み込まれることになります。

逆に1,000とかだと、画像が表示されるずっと前に読み込まれることになります（あまりLazy Loadの意味がなくなる）。

デフォルトだと200ですが、早く画面をスクロールすると画像表示の挙動が遅く感じるので、僕は500に設定しています。

ある程度ゆとりをもたせて先に読み込ませた方が、自然な挙動でストレスなく画像の表示ができますよ。

Use low-res preview image

実際の画像が完全に読み込まれるまでに、同一画像で画質が低いものを先に表示できる設定。まず低画質の画像を読み込んで、高画質の画像を読み込む感じですね。

僕は特に設定していませんが、必要であれば調整してみてください。またこの設定を有効化する以前アップロードされた画像は、画像サイズを再生成する必要があります。

Google botのクロール対応

遅延読み込みを実装した場合、懸念されるのがSEOへのマイナスな影響が発生する可能性があること。

遅延読み込みの設定をした場合、遅延読み込みされる画像データが適切にGoogleのbotにクロールされない場合があります。つまり画像データがコンテンツ内にあるとGoogleに正しく認識されないということです。

一応サーチコンソールで確認してみましたが、BJ Lazy Load導入後何やらエラーが発生していました。ライブテストで画像のレンダリングも上手くできていませんでした。

ですのでクロールエラーを回避し、遅延読み込みする画像をクロールされるために、プラグインのソースコードを少し調整する必要があります。

BJ Lazy Loadの編集

WordPress管理画面のサイドバー「プラグイン」欄から、「プラグインエディター」 を選択します。

今回編集するプラグイン「BJ Lazy Load」を選択し、incフォルダをクリック。

incフォルダ内に「class.bjll.php」というファイルがあるので、45行目にあるコードを下記の用に変更します。

	/* We do not touch the feeds */
	if ( is_feed() ) {
		return;
	}

	/* We do not touch the feeds */
	if ( is_feed() || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')) {
		return;
	}

変更できたら「ファイルを更新」ボタンをクリックし保存します。

管理画面で変更できない場合は、FTPソフトで編集

WordPressの管理画面上では、プラグインの変更許可が下りない場合があります。そのときはFTPソフトで同様の変更をすればOKです！

上記のパスにアクセスし、「class.bjll.php」ファイルを同様に発見したらダウンロードします。

テキストエディタで同様にソースコードを編集し保存、その後アップロードして上書き保存すれば完了ですね！

再度サーチコンソールで確認してみると、問題なくクロールできていました！画像のレンダリングもできているようです。良かった〜！

BJ Lazy Loadを有効活用しよう！

BJ Lazy Loadを活用して遅延読み込み機能を実装してきましたが、いかがでしょうか？プラグインの操作・設定自体は難しくないのですが、少しコードの調整が必要ではあります。

実際にPageSpeed Insightsで再度サイトスピードの検証をしてみると、「オフスクリーン画像の遅延読み込み」の項目が合格し、スマフォ版サイトのスコアが20くらい上がりました！体感的にも表示速度が早くなっているので、プラグインを導入した甲斐はありましたね。

それでは！

画像の最適化対策については、以下のWordPressプラグインも参考にしてみてくださいね。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

そこで便利なプラグインが「Autoptimize」。主要なリソースを簡単に軽量化・圧縮してくれるツールです。

今回はAutoptimizeの使い方や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

Autoptimizeってどんなプラグイン？

photo by：公式サイト

Autoptimizeは、CSSやJSなどのリソースを軽量・最適化してくれるプラグイン。

改行やスペースを削除してくれたり、複数のファイルを結合して圧縮してくれたりと、これ1つで便利な機能を備えています。利用は無料です。

実際に僕も使ってみて、Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で計測しました。するとスマフォ版の「レンダリングを妨げるリソースの除外」の項目が、

改修前：1.25ss → 改修度：0.64ss

まで下がったので、導入した効果は結構あったかなと思います。

Autoptimize

Autoptimizeの導入方法

Autoptimizeの導入方法を見ていきましょう！他のWordPressプラグインと同じ導入手順です。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Autoptimize」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「Autoptimize」が追加されています。クリックし詳細の設定欄を確認しましょう。

Autoptimizeの使い方・設定方法

Autoptimizeの使い方、設定方法を確認していきましょう。

JS,CSS & HTMLタブ

まずはメインの設定事項となる、「JS,CSS & HTML」タブから確認します。

JavaScript オプション

ここではJavaScriptの設定が可能です。基本的に以下の2つの項目を選択すればOKです。

これでJSコードから改行をなくして圧縮するなど、ファイルサイズを最適化してくれます。

上記の項目については、もしJSコードを最適化することでJSが動かなくなるなどエラーが発生した場合はチェックしてみましょう。

ただしhead内にJSコードを全て移動すると読み込みが遅くなるので、基本的にはおすすめしません。エラーを起こしているJSファイルに関しては、FTPソフトなどを使って個別にheadに移動するなど調整をしましょう。

CSS オプション

CSSについては下記の項目をチェックするだけでOK。

他の要素を実行する場合は、動作やパファーマンスが実際に改善されるか、環境によっても異なるかと思うので個別に確認してみてください。

HTML オプション

HTMLは下記の1項目をチェック。

もしコメントをHTMLファイルにそのまま残したい場合は、「HTML コメントを残す」を選択します。

その他オプション

下記の2項目をチェックします。

サイトにログイン機能があれば、「ログイン中のユーザーも最適化しますか ?」も合わせてチェックしてみてください（特に機能がなければ不要）。

すべての内容に問題なければ、「変更を保存してキャッシュを削除」します。

Imagesタブ

Imagesタブについては特に設定する必要はありません。Lazy-load（画像の遅延読み込み）もAutoptimizeで実装できるみたいですね。

もし他にLazy-load系のプラグインを使っている方は、チェックすると動作に問題が生じる可能性があります。僕は他のプラグインで実装しているので今回はスルー。

追加タブ

追加タブに移り、下記項目にチェックします。

フォントや絵文字のリソースもサイトスピードにやや影響するので、最適化しておくといいでしょう。

ただフォントに関しては、一度ブラウザのデフォルトのフォント > Googleフォントの順で読み込まれる場合、やや切り替える時の動作がぎこちなくなる時があります。気になる方はチェックを外すといいかなと思います。

さらに最適化！タブ

こちらについては有料機能やより硬度な機能になるので、特に設定しなくてOKです。

Autoptimizeでリソースを最適化しよう！

Autoptimizeはリソースの軽量化・最適化するのに、簡単で便利なプラグインです。WordPressのサイトスピード改善を進めている方は、ぜひ試してみてくださいね！

サイトスピード改善で重要な画像の最適化については下記記事も参考にしてみてください ↓↓

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

ブログやサイトのデザインについて悩んでいる方は、Webデザインスクールで学ぶのも選択肢の1つですよ ↓↓

関連記事Webデザインスクール・専門学校に通うメリット・デメリットを経験者が比較してみた

2023.09.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

サイトスピード改善でもっともネックになるのが画像。画像データは基本的に重いので、圧縮するなどできる限り軽量化することが望ましいです。

そこでぜひ試してみたかったのが、画像のWebP（ウェッピー）対応をすること。WebPはGoogleが開発・推奨している最新の画像形式で、画像の軽量化を期待できます。

WordPressサイトの場合ですと、プラグインを使えば比較的簡単にWebPに対応することができます。今回はWordPressサイトにおける画像のWebP化の設定方法や注意点などを解説していくので、サイトスピード改善を検討している方はぜひチェックしてみてください。

WebP（ウェッピー）ってどんな規格？

WebP（ウェッピー）はGoogleが開発し導入を推奨している静止画像フォーマット。拡張子はそのまま「◯◯◯.webp」となります。

JPEGなど従来の画像フォーマットと比較すると、2〜3割近く画像を軽量化することができます。

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

Googleが提供しているサイトスピード計測ツール「PageSpeed Insights」では、JPEG XR、JPEG 2000などと同様に利用することを推奨されています。

Google神が勧めるのであれば、できる限り導入を検討した方が良いでしょう！

WebPの対応ブラウザは？

WebPは新規の画像形式ということもあり、対応していないブラウザやバージョンがあるのが現状です。

Google ChromeやFirefox、Operaなどでは対応していますが、利用ユーザーの多いSafariや、IEではまだ未対応です（2019年9月現在）。

Photo by：WebP image format

未対応のブラウザではWebPの画像は表示されませんので、「WebPの選択的レスポンス」つまり画像の出し分け設定をする必要があります。例えばWebPに対応しているChromeではWebPを、対応していないSafariでは従来の画像形式であるJPGやPNGを表示するなど。

一見難しそうですが、WordPressサイトの場合はプラグインの導入と「.htaccess」のファイルを少し追記するたけで設定できます。

WebPの設定方法

WebPの設定方法は、WordPressの場合そこまで難しくありません。一つ一つ確認していきましょう！

1. EWWW Image Optimizerの導入

photo by：wordpress公式サイト

まず画像圧縮・最適化のプラグイン「EWWW Image Optimizer」をインストール・有効化します。導入方法は基本的に他のWordPressプラグインと同じです。

このプラグインを活用すると、画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、画像のWebP対応をする設定も可能です。とっても便利ですね。

EWWW Image Optimizerの詳細な使い方については、以下の記事を参考にしてみてください。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

2. EWWW Image Optimizerで設定

EWWW Image Optimizerを有効化したら、「WebP」タブを開きます。

にチェックし、「変更を保存」をクリック。

するとコードが表示されるので、これを「.htaccess」ファイルに追記します。

この時点では画像のWebP対応が完了していないので、画面右下に赤枠で「PNG」を表示されています。WebP対応が完了すると、これが緑の枠で「WebP」表記に変更される感じです。

3. 「.htaccess」ファイルへ追記

サーバー内の「.htaccess」ファイルを、FTPソフトなどを使い開きます。

対象となるWordPressサイトの下記ディレクトリまで移動します。

.htaccessファイルを見つけたら、ダウンロードします。

先頭に「.（ピリオド）」がつくのはUNIX系OSで不可視ファイルを意味するので、場合によってはダウンロードしてもファイルを確認できない場合があります。その場合は下記のキーを打つと、隠しファイルを表示することができます。

ちなみにWikipediaでは.htaccessファイルを下記で定義しています。

.htaccess（ドットエイチティーアクセス）とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。
wikipedia

BASIC認証やリダイレクトの設定など、簡単に言えばWebサーバの動作を制御する設定ファイルって感じですかね。記述をミスるとサイトが表示されなくなったりするので、あまり触れたくないファイルではあります……。

<ifmodule mod_rewrite.c="">
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</ifmodule>
<ifmodule mod_headers.c="">
Header append Vary Accept env=REDIRECT_accept
</ifmodule>
AddType image/webp .webp

ファイルの先頭などに先程のコードを記載し、完了したらFTPでサーバー上にアップし上書きします。

こちらのコードの改良版については色々サンプルがあるので、「WebPの選択的レスポンス」について色々調べてみると良いかもです。上記のコードでも問題なく動作はしますので、今回はこのまま進めます。

4. EWWW Image OptimizerでWebP化

EWWW Image Optimizerを有効化し、「.htaccess」ファイルへの追記が完了すれば、これからアップロードされる画像については全て自動的にWebPへ最適化されます。

しかし注意点としては、設定前にアップロードした画像については自動的にはWebPへ最適化されません。ですので手動で最適化する必要があります。といってもほぼワンクリックで完了です！

WordPressの管理画面から、メディア ＞ 一括最適化へ進めます。

「再最適化を強制」を選択し、「最適化されていない画像をスキャンする」をクリック。

続いて「最適化を開始」をクリック。

最適化が開始されていきます。これでこれまでアップロードされた画像を含めてWebp化してくれます！

最適化完了後、先程確認したEWWW Image Optimizerの設定画面の「WebP」タブを確認すると、画面右下に「WEBP」の表示を確認できます。

写真一覧でもWebP対応がされていることを確認できます。

これで無事画像のWebP化は完了です！！

WebPの反映を確認する方法

WebP対応が実際に動作しているのか実際に確認してみましょう。Google Chromeの検証ツールで確認可能です。

WebP対応したWordPressサイトを開き、デベロッパーツールを開きます。

を選択します。

Typeの項目を確認し、「webp」の表示が確認できればWebP化できています。

PageSpeed Insightsでも、「次世代フォーマットでの画像配信」の項目が合格できています！！

また実際にsafariやIEなどWebP対応していないブラウザでは、JPGやPNGなどのフォーマットで画像が表示されているのか（画像形式の出し分けができているのか）必ず実機で確認しておきましょう！

画像データはWebPで軽量化すべし！

ここまでWordPressサイトにおける、画像のWebP対応方法ついて紹介してきました。

サイトスピードを下げる主要因である画像データは、今回紹介したWebP対応するなどできる限り軽量化していきましょう。プラグインを活用すれば導入ハードルは低いですよ。

今回紹介したプラグイン「EWWW Image Optimizer」の使い方については、以下の記事も参考にしてみてくださいね。

関連記事画像圧縮・最適化プラグインEWWW Image Optimizerの使い方・設定方法まとめ

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

EWWW Image Optimizerは、画像を軽量化・最適化できるWordPressプラグイン。自動で一括圧縮などもしてくれるので、画像が重くてサイトスピードが遅くなっている人におすすめしたいプラグインです。

今回はEWWW Image Optimizerの使い方や注意点などを解説していくので、画像最適化のプラグインを探している方はぜひチェックしてみてください。

EWWW Image Optimizerってどんなプラグイン？

photo by：wordpress公式サイト

EWWW Image Optimizerは画像を最適化して表示速度を改善するプラグインです。画像圧縮はもちろん、画像に保存されている不要なメタデータを削除したり、最新の画像形式であるWebPへ対応する設定も可能です。

細かい設定をすることも可能ですが、基本的に導入後のデフォルト設定で問題ないので簡単。すでにアップロード済みの画像を一括で圧縮でき、新規で登録される画像については自動で圧縮してくれます。

本ブログもサイトスピードがかなり遅かったのですが、一番ネックになっていそうだったのが画像データ周り。Webページの情報で重いのは画像データがメインですからね。サイト閲覧に負荷のかかる重いデータはどんどん軽くしていくべしです！

EWWW Image Optimizer

EWWW Image Optimizerの導入方法

EWWW Image Optimizerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「EWWW Image Optimizer」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「EWWW Image Optimizer」が追加されていればOKです。クリックして詳細を確認しましょう。

EWWW Image Optimizerの使い方

EWWW Image Optimizerの使い方を確認していきましょう。基本的にはデフォルト設定のまま使えます。

1. 設定方法

まずは画像圧縮・最適化に関わる項目の設定をする必要があります。

basicタブ

basicタブでは画像最適化の基本設定を行うことができます。

まず「Remove Metadata」の項目をチェックします。写真にはレンズ焦点距離や露光量、撮影日時・場所などのメタデータが保存されているのですが、そうした余分なデータを削除することができます。画像を軽くする観点でも、個人情報を守る意味でも設定しておくことをおすすめします。

他の項目は基本デフォルトのままでOK！各画像の最適化レベルも「Pixel Perfect」で問題ないです。バックアップ元の設定は有料版のみ設定可能みたいです。

convertタブ

convertタブでは画像の形式を変換するときの設定ができます。画像形式を変換する必要は基本的にないので、特にいじる必要のないです。

ですが「コンバージョンリンクを非表示」の項目だけチェックしておきましょう。画像形式の変換を意図的あるいは間違ってできないようにする設定です。画像を複数人で管理する時にチェックしておくと安心です。

他の項目は基本デフォルトのままでOKです。

WebPタブ

WebP（ウェッピー）は、Googleが提供する最新の静止画フォーマット。既存の画像形式と比較して、約2〜3割サイズを小さくすることが可能です。

WebPタブでは画像をJPGやPNGから、WebPへ変換する設定ができます。WebPはChrome以外のブラウザでは現状対応していないので、設定する場合は色々と調整する必要があります。

WebPのブラウザごとの対応状況

特に設定する予定のない方は、デフォルトのまま放置でOKです。画像のWebP対応については下記の記事で別途解説しています↓

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

2. 既に投稿済みの画像を一括圧縮する方法

これからアップロードされる画像に関しては、上記で設定した方法で圧縮されますが、すでにアップロード済みの画像には反映されません。そのため既存の画像は別途圧縮する必要があります。

そこで便利な機能が「一括最適化」機能。既存の画像をまとめて一括で圧縮することが可能です。

管理画面の左メニュー「メディア」欄から「一括最適化」をクリックします。

「最適化されていない画像をスキャンする」を選択。

なんと8,000枚以上画像の圧縮ができそうとのこと。「最適化を開始」をクリックします。

どの画像が最適化されているのか、進行状況を確認できます。

トータルで所要時間3時間もかかりそう。しばし待ちましたが、実際は1時間半くらいで全ての画像のリサイズが完了しました。

最適化済みの項目数を確認すると、全ての最適化が完了したことが分かります。

どれくらい画像が最適化されたのか、結果も確認することができます。画像の25%が圧縮されたようです。

これまで画像は細めに1枚1枚リサイズと圧縮をしてからアップロードしていたのですが、それでもまだまだ圧縮できたようですね……。なるほど。

3. 新規投稿する画像を圧縮・最適化する方法

EWWW Image Optimizerを有効化していれば、今後新規で追加した画像は自動で最適化されます。ですので今後は一括圧縮することも不要な感じです！

アップロードされた画像がどれくらい圧縮されているのかは、管理画面の「メディア」>「ライブラリ」の画像一覧から確認することができます。

画像圧縮・最適化ならEWWW Image Optimizer

WordPressサイトの画像の圧縮・最適化なら、EWWW Image Optimizerはおすすめなプラグインです。簡単に設定・導入でき、自動で画像圧縮をしてくれるとても便利なプラグインです。

画像が重くてサイトスピードが低い方などは、ぜひ試してみてはいかがでしょうか？

追加で対策しておきたい、画像のWebP対応については下記記事で解説しています↓

関連記事WordPressサイトで画像をWebP（ウェッピー）対応し軽量化する方法

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

Optimize Database after Deleting Revisionsは、リビジョンデータの削除・管理でおすすめなWordPressプラグイン。

リビジョンとはWordPressに溜まった、記事の下書きや更新前データのこと。余分なリビジョンが溜まるとデータベースを圧迫し、サイトスピードにも悪影響を与えます。

今回はOptimize Database after Deleting Revisionsの使い方や注意点などを解説していくので、ぜひチェックしてみてください。

Optimize Database after Deleting Revisionsってどんなプラグイン？

Optimize Database after Deleting Revisionsは、WordPressに溜まったリビジョンデータを削除したり、保存件数を指定することができるプラグイン。他にもゴミ箱のデータや、使っていないタグを削除してくれたりと何かと便利なツールです。

リビジョンは投稿の編集画面を開いていると自動的に内容を保存をしてくれる、WordPressでデフォルトで搭載されている機能です。

「記事を更新したけどある特定時点での内容に戻したい！」という時に役立ちます。

しかし下書きデータが溜まるとその分データベースが重くなってしまうので、リビジョンは定期的にメンテナンスをするべきです。余分なリビジョンを減らせばその分データベースが軽くなり、サイトスピードの改善、ひいてはSEO面でもメリットがあります。

記事の下書きデータって、実際そんな何個もいらないですよね？？リビジョンを削除しないと知らないうちにどんどん増えていくので、効率的に管理すべきでしょう。

Optimize Database after Deleting Revisions

プラグインを使わずリビジョンを削除する方法もあるけど……

プラグインを使わなくても「wp-config.php」ファイルに特定の記述をすることで、リビジョンの保存件数や自動更新の間隔を任意の値に設定することが可能です。

しかしその場合は設定以前のリビジョンデータは残ったままとなってしまいます（設定した時点以降のリビジョンデータには反映される）。

リビジョンデータを削除するとなると、直接データベースを操作する必要があります。ですのでデータベースをいじるのに抵抗がある場合や、すでにある程度のコンテンツ数がある場合はプラグインを使って削除する方が安全で簡単な方法ではあります。

ワードプレス導入後すぐに設定するなら、wp-config.phpファイルを編集する方が余計にプラグインを使わないのでおすすめです。
参考：ワードプレスのリビジョンの停止や制限、自動保存の停止や設定の方法

Optimize Database after Deleting Revisionsの導入方法

Optimize Database after Deleting Revisionsの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Optimize Database after Deleting Revisions」で検索。「いますぐインストール」をクリックし、有効化します。

ツール欄からインストールされてるか確認

インストールを完了すると、管理画面左メニューのツール欄に「Optimize Database」が追加されていればOKです。クリックして詳細を確認しましょう。

Optimize Database after Deleting Revisionsの使い方

Optimize Database after Deleting Revisionsの使い方はかなりシンプルです。確認していきましょう。

1. 必ずバックアップを！

Optimize Database after Deleting Revisionsを使う前に、必ず事前にデータのバックアップを取っておきましょう！もし不具合が起きても前の環境に戻すことが可能です。

バックアップには下記のプラグインがおすすめです ↓

関連記事バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2022.02.22

2. リビジョンの削除設定

「Delete revisions for the following (custom) post type(s):」とあるので、チェックした項目のリビジョンが削除されます。

実際に設定した項目については、上記を参考にしてみてください。

保存するリビジョンの最大数もお好みで設定できますが、僕は5に設定しています。リビジョンを全く使わない人は0（つまりリビジョンを保存しない）も設定できますが、万が一の時に備えて数回程度は設定しておくといいかと思います。

また特定のテーマやプラグインを使っていると、それらの項目が生成するカスタム投稿タイプも表示されるようです。ですので上記項目はWordPressの動作環境によっても異なるかなと思います。

3. 不要データの削除とその他の設定

チェックすると不要なデータを削除することができます。僕は下記の項目にチェックを入れています。

必要な項目にチェックを入れ、「Save Settings」ボタンをクリックし設定を保存。「Go to Optimizer」をクリックし実行するだけです！

4. データベース最適化の実行

するとこちらの画面に移るので、詳細な結果を確認したい場合は「Optimize（detail）」、簡単に結果のサマリーが欲しい場合は「Optimize（Summary）」をクリックします。

最適化された結果が表示されました。57記事のリビジョンが削除されたようです。

ログも合わせて確認すると、57記事でトータル645ものリビジョンを削除してくれたみたいです。結構溜まっていたようなのでスッキリ。

データベースのサイズはあまり変わっていない？ようです。645ものリビジョンを削除したのに謎ですが……。
とにかく不要なデータは削除してもらえたようです。

リビジョン削除にはプラグインを有効活用しよう！

WordPressのリビジョンや不要データを削除しデータベースを最適化したいのであれば、Optimize Database after Deleting Revisionsは簡単に設定・実行できるおすすめなプラグインです。

ぜひWordPressでサイトを運営している方は参考にいただけると幸いです。
最後までお読みいただきありがとうございます！

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

ユーザーがページを閲覧した際に、HTMLやCSS、画像などのリソースをブラウザが一時保存（ブラウザキャッシュ）することで、同じページを再訪問した時に表示スピードを上げることができます。

WordPressプラグインを使わなくても、「.htaccess」というファイルを編集するだけでOKなので、そこまで難しくありません。

ということで今回は、.htaccessファイルを調整し、WordPressサイトのブラウザキャッシュを有効にする設定方法をご紹介していきます。

ブラウザキャッシュとは？

ブラウザキャッシュとは、ブラウザがユーザーの閲覧したページデータを一時的に保存してくれる機能です。HTMLやCSSなどでのデザイン情報やJavaScriptファイル、画像データなどが含まれます。

キャッシュはブラウザ経由で閲覧しているデバイスに保存されるため、同じページを訪問する度にサーバーから毎回同じデータを取得する必要がなくなります。サーバーとやりとりする回数が減るので、その分ページを表示するスピードを改善できるのです。

逆にページを表示するために必要なデータが多いほど、サーバーにリクエストする回数が多いほど表示スピードが下がります。

特に画像を良く使うサイトやページはサイトスピードが遅くなりがちなので、キャッシュを上手く活用し表示速度を上げることはユーザビリティ改善にとって重要です。ユーザビリティの高いサイトは、もちろんSEO面でもプラスに効きます。

ちなみにブラウザキャッシュの保存容量はブラウザごとに決まっていて、容量を超えると古いデータから削除されていきます。

またどのリソースをどれくらいの期間保存させるかはサイト側が設定できます。ですのでリソースによって保存期間が異なるケースもあります（HTMLデータは1週間、画像は1ヶ月保存されるなど）。

WordPressでブラウザキャッシュを設定する方法

ブラウザキャッシュを有効化するためには、サーバー内にある「.htaccess」というファイルを編集する必要があります。

WordPressサイトの場合プラグインを使うことで対応することも可能ですが、極力プラグインは使わない方がバグが発生する可能性を減らせますし、サイトが重くならないです。

ということで手順を確認していきましょう。

1. FTPで.htaccessをダウンロード

FTPソフトなどを使って、対象となるWordPressサイトの下記ディレクトリまで移動します。

.htaccessファイルを見つけたら、ダウンロードします。

先頭に「.（ピリオド）」がつくのはUNIX系OSで不可視ファイルを意味するので、場合によってはダウンロードしてもファイルを確認できない場合があります。その場合は下記のキーを打つと、隠しファイルを表示することができます。

ちなみにWikipediaでは.htaccessファイルを下記で定義しています。

.htaccess（ドットエイチティーアクセス）とは、Apacheを用いたWebサーバにおいて、ディレクトリ単位で設置及び設定を行える設定ファイルである。
wikipedia

BASIC認証やリダイレクトの設定など、簡単に言えばWebサーバの動作を制御する設定ファイルって感じですかね。記述をミスるとサイトが表示されなくなったりするので、あまり触れたくないファイルではあります……。

2. コードを修正する

.htaccessファイルに下記のコードを加え、FTPでサーバー上にアップし上書きします。

<ifmodule mod_expires.c="">
ExpiresActive On
ExpiresByType text/html "access plus 3 days"
ExpiresByType text/css "access plus 3 days"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType image/jpg "access plus 2 weeks"
ExpiresByType image/jpeg "access plus 2 weeks"
ExpiresByType image/png "access plus 2 weeks"
ExpiresByType image/gif "access plus 2 weeks"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType image/svg+xml "access plus 2 weeks"
</ifmodule>

できる限りファイルの上部に記述しましょう。

またimage/jpgやimage/pngなど、画像キャッシュの場合は対応する種類ごとに設定する必要があります。x-iconはファビコン、text/cssはCSSファイル、text/javascriptはJSファイルですね。

「access plus 2 weeks」はアクセス後2週間キャッシュを保持するという意味です。他にも

などの記述が可能です。

僕はサイトのデザインを割と頻繁に微調整するので、キャッシュの保持期間はCSSは3日だけにしています。逆にファビコンや記事中の画像などはほとんど変更しないので、1ヶ月保存する設定にしています。

ブラウザキャッシュを有効にした場合のデメリットの1つは、例えばサイトのデザインを更新した時にユーザー側のブラウザにキャッシュが残り、最新のデザインが反映されないケースがあることです。

ですのでキャッシュの保存期間は、どれくらいの頻度でリソースを更新する予定があるかに合わせ調整しましょう。

更新が反映されない時の対処法

もし自分のブラウザにキャッシュが残り、サイトのデザインなどを変更したのになかなか反映されない時は「スーパーリロード」をしてみましょう。

スーパーリロードすることで、キャッシュの有無に関わらず最新の状態をブラウザに反映させることができます。それでもキャッシュが残る場合は、ブラウザからキャッシュ自体を削除しましょう。

ブラウザキャッシュでWordPressサイトを高速に！

いかがでしたか？.htaccessファイルを調整することで、ブラウザキャッシュは簡単に設定することが可能です。また.htaccessを更新した後は、サイトの表示や挙動に異常が出ていないか必ず確認しておきましょう！

少しでもWordPressのサイトスピード改善につながれば幸いです。

合わせて知っておきたいサーバーキャッシュについて ↓↓

関連記事WP Fastest Cacheの使い方・設定方法【キャッシュ改善のおすすめプラグイン】

2020.04.20

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

WordPressのサイトスピード対策として、JavascriptやCSSなどのリソースの読み込みを遅らせる方法があります。

そこで便利なプラグインが「Scripts-To-Footer」。JavaScriptをフッターで読み込ませることで、サイトの表示速度を改善できます。

今回はScripts-To-Footerの使い方や注意点などを解説していくので、WordPressのサイトスピード改善を検討している方はチェックしてみてください。

Scripts-To-Footerってどんなプラグイン？

Scripts-To-Footerは名前の通り、Javascriptを一括でサイトフッター（bodyタグの直前）で読み込ませることができるWordPressプラグイン。レンダリングで重要度の高いソースコードを先に表示し、クリティカルでないJSを後で読み込むことでサイトの表示速度を改善できます。

レンダリングをブロックしているリソースの記述箇所を、プラグインを導入するだけでコードを修正せずにまとめて簡単に移動できます。

最近のワードプレステーマはデフォルトで上記対策をしていることも多いですが、プラグインや計測ツールなど色々導入していると、知らず知らずのうちにレンダリングの妨げになっていることも多いです。

利用するプラグインが多くなればそれだけサイトが重くなるので、できればScripts-To-Footerを利用せずに自分でソースコードを調整した方が良い感じではあります。ですが自分でソースコードをいじれない方や、プラグインを入れ変えるたびに管理するのが手間な方にとってはとても便利なプラグインでしょう。

Scripts To Footer

実際にPageSpeed Insightで確認してみると

Googleが提供するサイトスピード計測ができる「PageSpeed Insight」で確認してみると、下記の改善アドバイスを確認できました。

「レンダリングを妨げるリソースの除外」
ページの初回ペイントをリソースが阻害しています。クリティカルな JS や CSS はインラインで配信し、それ以外の JS やスタイルはすべて遅らせることをご検討ください。
PageSpeed Insight

指摘されたのは上記のようなファイルですね。JSを使っているプラグインや計測ツールの他に、子テーマのCSS、font-awesomeなど。

Googleさんから重要度の低いリソースは後で読み込め、と言われればそれに従うまでです……！

Scripts-To-Footerの導入方法

Scripts-To-Footerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「Scripts-To-Footer」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面の設定欄に「Scripts-To-Footer」が追加されていればOKです。クリックして詳細を確認しましょう。

Scripts-To-Footerの使い方

Scripts-To-Footerの使い方はかなりシンプルです。基本的にプラグインを導入したら、すぐにスクリプトをフッターに移動してくれます。

「Select which templates should not have scripts moved to the footer:」とあるので、JSをフッターに移動したくないページの場合はチェックを入れる感じですね。

ただし基本的にチェックをつけず、全てのページを対象にして良いかと思います。

ちなみに記事投稿・編集ページから、個別の記事ごとにプラグインのオン・オフも指定することが可能です。あまり利用機会はなさそうですが、固定ページをゴリゴリJSでいじる場合などでは使えるかも。

Scripts-To-Footerの注意事項

Scripts-To-FooterでJSを全てフッターに移動すると、予期しないエラーが起こるケースがあります。Javascriptをゴリゴリ使っているページで、JSの読み込みを遅らせるとサイトの挙動に影響でそうなページがあれば、上記した除外項目に個別にチェックをつけましょう！

またWordPressはjQueryが使われているプラグインやテーマが多いので、全てのスクリプトを後回しで読み込むとプログラムが動作しなくなることもあります。アニメーションが動かなくなったり、スクロールができなくなったり、ボタンが機能しなくなったり。

そうしたエラーが発生した場合は「Keep jQuery in the Header」にチェックをすれば、jQueryのみを移動対象から除外することができます。

実際に現在僕が使っているWordPressテーマ「stork」と相性が悪いようで、調べたところデザインが崩れたり、コンテンツが非表示になるブロガーさんもいたようです。

僕もプラグインを起動したら、TOPページの記事スライダーが消失しました（汗）。ですが「Keep jQuery in the Header」にチェックをつけたら正常に動作しましたよ！

Scripts-To-Footerを導入した後は、サイトのどこかでエラーが発生していないか、動作に問題ないかを必ずチェックしておくことをおすすめします。

Scripts-To-Footerを有効活用しよう！

サイトスピード対策で、さくっとJSをフッターに移動してレンダリング速度を上げたいのであれば、Scripts-To-Footerは簡単に導入できておすすめなプラグインです。

ただし導入後はサイト上でエラーが起きていないか、必ず確認しましょう。できればデータのバックアップも取っておくとより安心です。

バックアップについては下記のプラグイン「UpdraftPlus」がおすすめです↓

関連記事バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2022.02.22

またサイトスピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていくので、よかったら施策の参考にしてみてください。

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14

こんにちは！「Tekito style」を運営しているやすのり（@98nasi_nori）です。普段は都内でWebディレクター/マーケターなどをしています。

WordPressでサイト運営しているのであれば、対応しているPHPのバージョンはできる限り最新のものにしておきたいところ。ですがPHPのバージョンを変更するとなると、場合によっては不具合が起きるケースもあるので慎重に作業を進めるべきです。

そこで便利なプラグインが「PHP Compatibility Checker」。サイトで導入しているテーマやプラグインが、特定のPHPのバージョンに対応しているのか否かを判定してくれます。

今回はPHP Compatibility Checkerの使い方や注意点などを解説していくので、5から7系へ移行予定の方などPHPのバージョンアップデートを検討している方はぜひチェックしてみてください。

「PHP Compatibility Checker」ってどんなプラグイン？

photo by：WP Engine公式サイト

PHP Compatibility Checkerは、WP Engineが提供するWordPressプラグイン。WordPressサイトで導入しているテーマやプラグインが、切り替えたいPHPのバージョンに対応しているかチェックしてくれます。

現状のコードで問題がありそうな箇所を発見し、何が課題なのか簡単に内容をレポートしてくれます。

そもそもWordPressサイトはPHPという言語で動作しており、PHPのバージョンを最新のものにしておくとサイトスピードが改善できたり、セキュリティ面でもより安全に運営することができます。最新バージョンであるPHP7は、PHP5に比べ2倍以上のパフォーマンス改善を見込めるようです。

しかしもしPHPのバージョンを変更したくても、今使っているテーマやプラグインが変更する最新のPHPに対応していない場合、デザインが崩れたり挙動がおかしくなったり、最悪の場合サイトが正常に動作しなくなるケースもあります。古いバージョンのPHPで記述されたプログラムの一部が、最新のバージョン環境で動かなくなることがあるためです。

そこでPHP Compatibility Checkerを使えばその課題を事前に特定し、トラブルを未然に防ぐことが可能です。もちろんサイトによって条件が異なるので、100%の安全を保証するものではありません。ですがトラブルの芽を摘むためにも、できる限りの手は尽くしておくべきでしょう。

PHP Compatibility Checker

事前にサイトのPHPバージョンを確認する方法

現時点でどのバージョンなのか把握できていない方は、事前に必ず確認しておきましょう。WordPressのPHPバージョン設定は、レンタルサーバー会社がサーバー側で管理しています。

各主要サーバーごとのバージョン確認方法は、下記公式サイトをご確認ください。

実際にさくらサーバーで確認してみた

僕は現状さくらサーバーを主に使っているので、実際にさくらサーバーのPHPバージョンを確認してみました。

まずコントロールパネルにアクセスし、サイドバーにある「PHPのバージョン選択」します。

確認していると、PHP 5.6.40 （CGI版）でした。これを最新のPHP 7.3へ変更します。CGIからパフォーマンスの高いモジュール版へ移行したいところですが…… その話はまた今度に。

PHP Compatibility Checkerの導入方法

PHP Compatibility Checkerの導入方法を見ていきましょう！基本的に他のWordPressプラグインと同じです。

インストールと有効化

管理画面のメニュー「プラグイン」>「新規追加」から、「PHP Compatibility Checker」で検索。「いますぐインストール」をクリックし、有効化します。

設定欄からインストールされてるか確認

インストールを完了すると、管理画面のツール欄に「PHP Compatibility」が追加されていればOKです。クリックして詳細を確認しましょう。

PHP Compatibility Checkerの使い方

PHP Compatibility Checkerの使い方はかなりシンプルです。確認していきましょう。

既存のプラグインやテーマの互換性を調べる

現状WordPressで導入しているプラグインやテーマが、最新のPHPバージョンに対応しているのかを確認します。

まずPHPバージョン欄を、変更したい最新の「7.3」にチェックし、「有効化中のプラグインとテーマのみをスキャン」を選択します。

スキャンには割と時間がかかります。1プラグインにつき1〜2分ほど。僕は20分ほどかかりました。ですので有効化していないプラグインとテーマをチェックするのはやめておきましょう。

「互換性あり」と表示されたものは問題ありません！ 最新のPHPバージョンに対応しています。

プラグインのSearch Regexのみ「警告」が出ました……。

警告された内容を確認すると以下のような内容でした。

php.iniファイルの中の「safe_mode」の記述が、5.3のバージョンから非推奨になり、5.4から取り除かれた、ということらしいです。エラーメッセージを検索にかけると、同様の指摘を受けているケースが見られました。色々調べたところ変更しても時に大きな問題はなさそう（常時使っているプラグインでもない）だったので、今回はそのまま進めることに。

※PHPの公式サイト：セーフモード
※参考事例：INI directive ‘safe_mode’ is deprecated since PHP 5.3 and removed since PHP 5.4.

削除された関数が使われているプラグインの場合、最新のPHP環境で動作しなくなる可能性もありますので、エラー内容の意味や対処法が分からない場合はとにかくググりましょう！

レポート内容のダウンロードも可能

レポート内容は、テキストファイルで一括ダウンロードすることも可能です。チェックする項目が多い場合は使ってみてください。

警告やエラーが出た時の対処法

もし最新のPHPバージョンとの互換性について警告が出た場合は、主に下記の方法で対処します。

サイトで導入しているプラグインやテーマは、事前に最新のバージョンに更新しておきましょう。一度警告がでても、バージョンを更新すれば最新のPHPに対応しているケースも多いです。更新がもう数年されていないプラグインなどはそもそも使うのは控えたいところ……。

また警告がでているプラグインは、本当に必要なのか改めて精査しましょう。なくても問題なければ思い切って削除するか、他に同様の機能を備えた最新のPHPに対応しているプラグインに切り替えるのも選択肢です。

自分でプラグインやテーマのエラー箇所を修正する手段もありますが、開発の知見・スキルのある方以外は控えましょう。

PHP Compatibility Checkerの注意事項

PHP Compatibility CheckerのWordPress公式サイトでは、下記の注意事項を掲載しています。

このプラグインはできる限り多くの問題を正確に検出するよう作成していますが、100%確実な検出は非常に困難です。新しい PHP バージョンに移行する前に、総合テストの実施をお勧めします。
引用元：https://ja.wordpress.org/plugins/php-compatibility-checker/

このプラグインでは、下位互換で使用する未知のコード/パスを互換性無しと判定することがあります。誤判定の可能性があるプラグインは、プラグインのホワイトリストにまとめてあります。
引用元：https://ja.wordpress.org/plugins/php-compatibility-checker/

WordPressの動作環境はサイトによってそれぞれ異なります。PHP Compatibility Checkerといえども、さすがに100%の精度でエラーを検出することは難しいので、実行前に必ずデータのバックアップを取り、バージョンアップデートした後もエラーが発生していないかサイトを隈なくチェックすべきでしょう。

誤判定の可能性があるプラグインのホワイトリストも事前に目を通しておくことをおすすめします。
https://github.com/wpengine/phpcompat/wiki/Results

実際にさくらサーバーでPHPのバージョンアップをしてみた

ということで、PHPのバージョンアップを実際にしてみました！

必ずバックアップを！

バージョンアップの前に必ずデータのバックアップを取っておきましょう！バックアップについては以下のプラグイン「UpdraftPlus」がおすすめです！

関連記事バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2022.02.22

サーバーの管理画面から切り替え

さくらサーバーの管理画面へ移行し、バージョンを切り替えます。新しいバージョン欄をPHP 7.3でチェックし変更をクリックします。

すると、もうPHPが最新バージョンに切り替わってました！切り替え自体はかなり簡単でした。もちろん使っているサーバーによって異なりますので、改めて下記公式サイトをご確認くださいませ。

切り替え後はエラーが起きていないか、サイト全体を必ず確認しておきましょう！

PHP Compatibility Checkerを有効活用しよう！

PHPのバージョンを切り替えることで処理速度の改善が期待でき、セキュリティも高まりますので、まだ5系を使っている方はできる限り最新の7系に切り替えましょう！

PHP Compatibility Checkerを活用すれば、事前にPHPの互換性を確認でき問題が発生するのを回避できます。ただしエラーの特定が漏れる場合もあるので、必ず事前にバックアップを取っておくことをおすすめします。

また今回はサイトスピード改善の一環としてPHPのバージョン更新をしたのですが、スピード改善で実施した施策とスコアの検証結果については、下記の記事で全てまとめていきます。よかったら施策の参考にしてみてください。それでは！

関連記事WordPressのサイトスピード改善で実施した12の施策とスコア結果まとめ

2019.11.30

下記記事では、WordPressのおすすめプラグインを厳選して紹介しています ↓↓

関連記事おすすめ＆定番のWordPressプラグイン12選まとめ

2020.07.14