機能が強力すぎて他のキャッシュプラグインや高速化プラグイン、遅延読み込み機能が必要無くなると評判が良い、WordPress用表示速度改善有料プラグイン「WP Rocket」のインストール方法や設定方法、PageSpeed Insightsのパフォーマンススコアなどを解説していきます。
記事内の目次
他の高速化機能には戻れない超強力有料プラグインWP Rocketのレビュー
不要になった高速化プラグインの数々
WordPressの高速化とPageSpeed Insightsのパフォーマンススコア改善のために、様々な高速化プラグインやキャッシュプラグインなどを導入してきましたが、パフォーマンススコアが上がっても、有効化する度に表示崩れによるCLS悪化やレンダリングの遅延、他のプラグインとの干渉などに見舞われてきました。
無料の範囲内でワードプレスの高速化をするのであれば、以下のプラグインでウェブサイトの表示が安定し、PageSpeed Insightsでもパフォーマンススコアの向上が見られました。
CSS、JavaScript、画像を最適化するAutoptimize
モバイルページで発生したハンバーガーメニューの不具合やCLSの悪化が、エックスサーバーのXPageSpeedで設定できるJavaScriptの遅延読み込みが主な原因だと判明して導入をしたプラグインがAutoptimizeです。
CSSとJavaScriptの圧縮と遅延読み込み、画像の最適化と遅延読み込みをする事で、ウェブサイトの表示速度を改善する事が出来る、無料プラグインの中では最も強力で安定しているプラグインでした。
GoogleアドセンスやYouTube埋め込みプレーヤー、Googleマップなどが特に足を引っ張ていましたが、それでもPageSpeed Insightsのスコアはモバイルで58点から71点まで向上させる事が出来ました。
XPageSpeedでは無効化されていた関連記事や人気記事表示プラグインの画像も遅延読み込みを有効化出来ていたので、設定次第では最も安定して強力に高速化が出来るプラグインだったと思います。
ウェブサイトの表示速度を高速化してユーザの直帰率を下げる事は、Google検索の上位表示に欠かせない指標の一つとなりますが、ソースコードを圧縮、遅延読み込みをしてWordPressサイトの読み込みを早くするプラグインのAutoptimizeをご紹介します。 Autoptimizeの設定方法!CSS...
JavaScriptの読み込みを遅らせて高速化が可能なFlying Scripts
PageSpeed Insightsで「使用していないJavaScriptの削減」に表示されていたGoogleマップやアドセンス広告、GooglaアナリティクスGA4などを意図的に遅延読み込みさせて、主にFCPとLCPの改善を図る事が出来たプラグインがFlying Scriptsです。
主にアドセンスなどの第三者のコード埋め込んだ際に、一緒に読み込まれるJavaScriptがウェブサイトの表示速度を低下させている事から、意図的に読み込みを数秒間停止させて、表示速度を改善させる事が出来ました。
ウェブページのリンクを開いた際に、設定をしたJavaScriptが数秒間読み込まれない事から、ページのファーストビューを視認できる状態になるまでの時間を大幅に短縮させる事が出来たのですが、アドセンス広告が設定した秒数分表示されなくなる事で、上部に設置した広告の収益が低下してしまうデメリットもありました。
PageSpeed Insightsでサイトスピードを確認すると「使用していないJavaScriptの削減」でGoogleマップやアドセンスの自動広告が読み込み速度を遅くしているのが分かります。その対策としてJavascriptを読み飛ばして速度を劇的に改善するWordPressプラグイン「Flyi...
YouTube埋め込みプレーヤーの表示速度を改善させるWP-YouTube Lyte
YouTube埋め込みプレーヤーが多い当ウェブサイトで、表示速度の改善に大きな役割を果たしていたプラグインがWP-YouTube Lyteです。
架空の埋め込みプレーヤーとサムネイルを表示し、クリック後にYouTubeの埋め込みプレーヤーを表示するウェブページ軽量化プラグインでしたが、設定時に使用するYoutube Data APIとプレーヤーの表示方法(主に再生ボタン)の使用方法は、Googleが認めている使い方ではないらしい。
余計な事をしなければそのまま使い続ける事は出来ますが、クオーター増量のリクエストなんかしてしまうとBANされます。(リクエストBAN後の解除時に確認済み)
その代わり、YouTube埋め込みプレーヤーを複数表示させているウェブページの表示速度改善機能は強力で、サムネイルのキャッシュ機能とプレーヤー後読み機能を組み合わせればPageSpeed Insightsのパフォーマンススコアが大幅に向上し、99点や満点のスコアを叩き出す事が出来ました。
Googleにさえ黙って使っていれば、とても強力に機能してYouTubeの表示速度を大幅に改善させるプラグインがWP-YouTube Lyteです。
GoogleアドセンスなどのJavaScriptを使用して表示をするコンテンツに次いで、ウェブサイトの表示を遅くなってしまう要因となっているYouTubeの埋め込みプレーヤーのサムネイルをキャッシュして高速化してしまうプラグインWP YouTube Lyteを導入しました。 YouTubeのサムネ...
WP Rocketが超強力すぎて他の高速化プラグインが必要無くなる!
WordPress向けキャッシュプラグイン「WP Rocket」は、表示速度を高速化するプラグインの中では最強と謳われていますが、デメリットがあるとすれば年額支払いの有料版である事しかないでしょう。
元が取れなければ1年間だけ使用して解約するか、導入後の14日間で不具合が発覚すればクーリングオフをする選択肢しかないのですが、導入しなくても良い理由があるとすれば無料の高速化プラグインでも同じ機能を導入する事が出来る事です。
実際にWP Rocketをインストールしてみると、今まで使用していたAutoptimizeとFlying Scripts、WP-YouTube Lyteが必要なくなり、さらにPageSpeed Insightsで消える事が無かった「レンダリングを妨げるリソースの除外」や「使用していない JavaScript の削減」などの項目がほとんど合格になってしまいました。
トヨタ90系ヴォクシーハイブリッドにプレミアムホーンを取り付ける説明ページは、300KB前後のWebP画像10枚とYouTube動画埋め込みプレーヤーを本文に表示し、WPアソシエイトポストやGoogleアドセンスもウィジェットや本文に表示しているの非常に重いページだったのですが、ファーストビューに表示されるアイキャッチ画像以外はほぼ合格という結果になりました。
WP Rocketが使い物にならなくても、記事の広告収入で元を取れば良いかな?ぐらいで考えていましたが、インストールと設定を終えてPageSpeed Insightsのスコアを見た後の第一声は「なんだこれ!本当に?」でした(笑)
アドセンスとアナリティクスをどこから読み込んでいるんだろう?って謎警告が出ていますが、パフォーマンスの監査ではほとんどの項目で合格し、WordPressテーマのTCD GENSENの仕様でwidthとheightが入らなかった一部の画像要素にサイズを指定するコードを自動的に入れてくれる機能のおかげで、CLSも改善されていました。
エックスサーバーのXPageSpeedでは、ウィジェットに表示する記事ランキングプラグインの画像で遅延読み込みが出来ず、Autoptimizeではwidthとheightが入らない画像に遅延読み込みを適用できない問題もありましたが、AutoptimizeにFlying ScriptsとWP-YouTube Lyteの高速化機能を組み合わせて、さらに安定動作とCLS改善機能を取り込んでしまったぐらい高性能なプラグインがWP Rocketなのです。
特に不具合が発生しやすいJavaScriptの圧縮高速化で目立ったトラブルが起きなかった事は凄いと思いましたが、正直な所、安定動作と高速化を両立できていてWP Rocketに勝るキャッシュプラグインは他に無さそうなので、とりあえず1年間は様子を見て継続利用をしていこうかと思っています。
WP Rocketの購入と年間契約
WordPressのキャッシュプラグインWP Rocketは、有料版しか設定がないプラグインなので、管理画面の新規プラグインを追加の検索一覧には表示されず、WP Rocket公式ウェブサイトからしかダウンロードできません。
公式ウェブサイトを表示したら、WP Rocketを購入と表示されているアイコンをクリックして以下の画像のようなプラン選択画面を表示します。
WP Rocketの3つのプラン
WP Rocketは、1つのウェブサイトにインストール可能なSingleプラン、最大3つのウェブサイトにインストール可能なPlusプラン、無制限のウェブサイトにインストール可能なInfiniteプランが用意されています。
WordPressサイト制作業者はInfiniteプランになるかと思いますが、個人運営や少ないウェブサイトを運営している事業者はPlusプランかSingleプランになると思います。
1サイトとしてカウントされるのは、サブドメインとサブディレクトリを含む1つのトップドメインの事で、当ウェブサイトのhttps://article.japan-videography.jpと英語版ウェブサイトのhttps://en.japan-videography.comは、国内版ビジネス用ウェブサイトのhttps://japan-videography.comに含まれる1つのサイトとしてカウントされています。
サブドメインとサブディレクトリでマルチサイトを運営していても、同じトップレベルドメインを使用しているのであればSingleプランで大丈夫です。
また、example.comとexample-2.comのように、違うドメインを取得して運営している場合は1つのドメインの配下にないので、PlusかInfiniteプランになります。
WP ROCKET Documentation: How many sites is my license key vaid for?
WP Rocketの購入方法
プランを選択したらオーダー画面でクレジットカード払いかPayPal支払いを選択できます。
登録するEメールアドレスとFirst nameに名前、Last nameに姓を入力し、Country/RegionはJapanを選択します。
Credit Card払いであれば左側にチェックを入れてクレジット番号を入力してPlace Orderをクリック、PayPal払いであれば右側を選択して下のPayPalボタンをクリックします。
海外向けにも事業を行っている場合はドル貯金もできるPayPalアカウントを持っておくのがオススメです。
海外の通貨で貯金と支払いも出来るようになるので、WP Rocketの購入と継続利用は円安でも円高でも関係なくなります。
PayPal残高または引き落とし用に登録しているクレジットカードを選択して、同意して今すぐ支払うをクリックします。
支払い手続き完了したら購入完了画面に移りますので、Download WP Rocketをクリックして、WP Rocketプラグイン本体をPCにダウンロードします。
WP Rocketのインストールとライセンス認証方法
購入完了画面が表示されると同時に届くEメールには購入時のEメールアドレスとパスワードが記載されていますが、どちらもインストール後のライセンス認証時に使用するので誤って消してしまわないように気を付けて下さい。
WordPressの管理画面を開き、プラグイン→新規プラグインを追加で、先程ダウンロードしたWP Rocketプラグイン本体を選択して、今すぐインストールをクリックし、インストールが正常に完了したら有効化をクリックします。
WP Rocketの公式ウェブサイトのアカウントページに先にログインしていたからなのか、プラグイン本体に認証情報が入っていたのかは分かりませんが、WP Rocketのダッシュボードを開いたら何故かライセンス認証が出来ておりました。
Eメールアドレスとパスワードが、認証時のEメールアドレスとAPIキーになるっぽいので、VIEW MY ACOUNTと表示されていない時や入力画面が表示されたら認証情報を入力してください。
Rocket Analyticsは匿名データを開発チームと共有する設定なので、共有したくない場合はオフでも良いですが、オンにしておくと特定条件で不具合が発生した際の早期修正に役立つかと思います。
またRocket CDNは、グローバルサイトを運営している場合や、アクセス数が多くてサーバーの負荷が高くなっている大規模サイトを運営している時じゃないと意味が無いので、通常は使用する必要が無いと思います。
WP Rocketの設定方法
TCD GENSENの場合は全ての項目にチェックを入れていてもトップページのYouTube動画自動再生スライダー以外では不具合が出なかったため、WP Rocketの高速化設定を全て有効化しておりますが、念のため一つずつ順番に有効化と設定の保存をして、その都度デスクトップとモバイルの両方でウェブサイトが正常に表示されているか確認をした方が確実です。
また、先にインストールしている高速化プラグインやキャッシュプラグイン、サーバーの高速化設定は全て無効にし、WP Rocketの機能と競合しないようにしておく必要もあります。
File OptimizationのCSS File機能説明
File OptimizationのCSSファイルの圧縮と最適化は、コードの行間を詰めて未使用のCSSを削除する設定内容で、基本的に全て有効にしても不具合が出にくい設定項目です。
- Minify CSS Files
Minify CSS Filesは、CSS読み込み時に必要が無い空白やコメントを削除してファイルサイズを縮小する機能です。
有効化して特定の場所で不具合が発生した場合は、Excluded CSS Filesに除外するCSSのURLをします。 - Optimize CSS delivery
CSS 配信の最適化により、Web サイトのレンダリングをブロックする CSS が削除されます。
未使用のCSSを削除するREMOVE UNUSED CSS(RUCSS)または、CSSを非同期で読み込むLOAD CSS ASYNCHRONOUSLYのどちらかをクリックして有効化しますが、最適なパフォーマンスが得られるREMOVE UNUSED CSS(RUCSS)を使用する事が推奨されています。
表示に不具合がある場合は、削除しない CSS ファイル名、ID、またはクラスを指定をCSSセーフリストに入力し、それでも不具合が解消されない場合は、CSSの非同期読み込み設定を使用するか配信の最適化を無効化します。
File OptimizationのJavaScript File機能説明
File OptimizationのJavaScript FileはJavaScriptのファイルサイズ圧縮と遅延読み込みをする設定内容ですが、特に遅延読み込みは表示されない不具合が発生する事もあるため、一つずつ有効にしながらモバイルとデスクトップで表示の確認をしながら設定をする必要があります。
TCD GENSENの場合はトップページの動画自動再生機能で非表示になる不具合が発生しましたが、デベロッパーツールで確認をしながら不具合箇所をチェックし、除外の設定をする知識は必要かと思います。
- Minify JavaScript Files
Minify JavaScript は空白とコメントを削除してファイル サイズを縮小します。 - Combine JavaScript files
JavaScript ファイルを結合すると、サイトの内部、サードパーティ、インライン JS が結合され、HTTP リクエストが削減されます。サイトで HTTP/2 を使用している場合は推奨されません。
また、互換性と最良の結果を得るために、JavaScript 実行の遅延が有効になっている場合、このオプションは無効になります。不具合が発生した場合は、Excluded JavaScript Filesに縮小と連結から除外する JavaScript ファイルの URL を入力して指定します。 - Load JavaScript deferred
JavaScript を遅延読み込みすると、サイト上のレンダリングをブロックする JS が排除され、読み込み時間が短縮されます。 - One-click exclusions
遅延 JavaScript 実行を使用すると、スライダー、ヘッダー、メニューなど、すぐに表示する必要があるビューポート内の要素の読み込みが遅れる場合があります。
すぐに表示する必要がある場合は、遅延させたくないファイルにチェックを入れます。それ以外に除外したいファイルがある場合は、Excluded JavaScript Filesに一行ずつ、実行の遅延から除外するインライン ファイルまたは JavaScript ファイルを識別できる URL またはキーワードを指定します。
これらの設定が完了したらSAVE CHANGESをクリックして設定を保存します。
Mediaの機能説明
File OptimizationのMediaは、画像やiframe、YouTube埋め込みプレーヤーの遅延読み込みとプレビューへの差し替えを行う設定です。
遅延読み込み機能はWordPress5.5で標準搭載された機能ですが、非同期デコードとWP Rocket 3.17で実装された自動遅延レンダリングで高速化をしているっぽくて、実際にページ表示速度はとても早いです。
- LazyLoad
画像、iframe、ビデオがビューポートに入ったとき(または入ろうとしているとき)のみ読み込まれるため、実際の読み込み時間と体感的な読み込み時間が改善され、HTTP リクエストの数が減ります。
Enable for imagesで画像、Enable for CSS background imagesで背景画像、Replace YouTube iframe with preview imageで埋め込みプレーヤーをプレビュー画像に置き換えます。
また、遅延読み込みから除外したい項目がある場合は、Excluded images or iframesに除外する画像または iframe コードのキーワード (画像ファイル名、CSS ファイル名、CSS クラス、ドメインなど) を入力して指定します。 - Image Dimensions
画像に不足している幅と高さの属性を追加して、レイアウトのずれを防ぎ、訪問者の読みやすさとCLSを向上させます。
PRELOADの機能説明
Preloadは先に読み込む必要があるURLを指定してLCPの改善を図る機能です。
ページ後方にあるコンテンツを指定しても意味が無いので、なるべく表示を早くしたいアドセンス広告のURLを指定するのがオススメです。
- Preload Cache
プリロードを有効にすると、WP Rocket は自動的にサイトマップを検出し、すべての URL をデータベースに保存します。また、プラグインはキャッシュが常にプリロードされるようにします。
これを有効にしたい場合は、Active Preloadingにチェックを入れ、プリロードから除外したいURLがあればExclude URLsに除外する URL を入力します。 - Preload Links
リンクのプリロードは、ユーザーがリンクの上にマウスを置いたときにページをダウンロードすることで、体感的な読み込み時間を改善します。
有効にしたい場合は、Enable link Preloadingにチェックを入れます。 - Prefetch DNS Requests
DNS プリフェッチにより、特にモバイル ネットワークで外部ファイルの読み込みが速くなります
URLs to prefetchプリフェッチする外部ホストを指定し、http:を除いた//から始まる外部ホストのドメインを入力します。
ファーストビューに表示されるアドセンス広告を早めに表示させたいので、アドセンス広告関連のみ入力をしました。 - Preload Fonts
ブラウザが CSS ファイル内のフォントを検出できるようにすることで、パフォーマンスが向上します。
Fonts to preloadにプリロードしたいフォントファイルのURLを1行ずつ指定して入力します。フォントは、独自のドメイン、または CDN タブで指定したドメインでホストされている必要があります。
Advanced Rulesの機能説明
- Cache Lifespan
指定された有効期間よりも古いキャッシュ ファイルは削除し、有効期間の期限が切れた後にキャッシュが自動的に再構築されるように、プリロードを有効にします。
グローバル キャッシュがクリアされるまでの時間を指定し(0 = 無制限)、定期的に発生する問題に気付いた場合は、有効期間を 10 時間以下に短縮します。 - Never Cache URL(s)
カスタム ログイン/ログアウト URL などの機密ページはキャッシュから除外する必要があるため、キャッシュしないページまたは投稿の URL を指定します (1 行に 1 つずつ) - Never Cache Cookies
訪問者のブラウザで設定された場合、ページがキャッシュされないようにする Cookie の ID 全体または一部を1 行に 1 つずつ指定します。 - Never Cache User Agent(s)
キャッシュされたページを表示しないユーザー エージェント文字列を指定します (1 行に 1 つずつ) - Always Purge URL(s)
投稿またはページを更新するたびにキャッシュから常に消去する URL を指定します (1 行に 1 つずつ) - Cache Query String(s)
クエリ文字列のキャッシュを使用すると、特定の GET パラメータのキャッシュを強制できます。キャッシュするクエリ文字列を指定します (1 行に 1 つずつ)
Databaseの機能説明
Databeseはデータベースの中身をクリーンアップする設定ですが、正直な所はWP Optimizeの方が高性能だと思うので、定期的にWP Optimizeプラグインの有効化をして清掃が終わったら無効化する使い方が良いかと思います。
- Post Cleanup
投稿の修正と下書きを完全に削除します。修正や下書きを保持する必要がある場合は、このオプションを使用しないでください。
リビジョン、投稿の下書き、ゴミ箱に入った投稿にそれぞれチェックを入れて完全な削除を行います。 - Comments Cleanup
スパムコメントやゴミ箱に入れたコメントを完全に削除します。 - Transients Cleanup
Transientとは、プラグインやテーマが繰り返し生成するために多くのサーバーリソースを必要とするキャッシュデータを一時的に保存する方法です。
古くなったり過剰になったキャッシュを削除する一時的なオプションになっているため、完全に削除してもプラグインで必要になったキャッシュは自動的に再生成されます。 - Database Cleanup
データベーステーブルのオーバーヘッドを削減します。 - Automatic Cleanup
自動でクリーンアップを設定する項目で、毎日・毎週・毎月の頻度から設定をできます。
DataBaseでクリーンアップが可能な機能は、WP-Optimizeを使用して定期的な手動削除とデータベースの最適化をした方が良いと思います。
CDNの機能説明
コンテンツデリバリーネットワークは、グローバルサイトとアクセス数が多くてサーバーのCPUとメモリーの使用量が限界に達しているサイトを運営している時に導入をするのが良いでしょう。
CDNはコンテンツデリバリーネットワークの略で、Webコンテンツを迅速に、効率よくユーザーに配信するためのネットワークです。
アクセス数の多い大規模サイトや世界各国向けにグローバル展開している多言語サイトを運営している場合は、キャッシュサーバーがオリジンサーバーに代わって配信をする事で負荷の軽減と配信の効率化が図れますが、キャッシュサーバーが目的の国に無い場合や、負荷がそんなにかかっていない小規模から中規模のサイトは導入するメリットがありません。
CDNの使用を推奨する記事を見かけますが、Cloudflareを使用した経験上ではオリジンサーバーと同じ国からのアクセスであれば遅くなります。
CDNを使用する場合は、静的ファイル(CSS、JS、画像)のすべての URL は、指定した CNAME に書き換えられますが、Cloudflare や Sucuri などのサービスはアドオンで設定をするので、CDNの有効化とCDN CNAMEへの入力をする必要はありません。
Heartbeatの機能説明
Heartbeatは、2PMやYOASOBIの曲でもなく、WordPress 3.6で導入されたHeartbeat APIの事です。
記事編集中にPCが落ちてしまったり誤ってブラウザバックをしてしまっても、編集中の記事がサーバーに残っていた経験があるかと思いますが、その他にも編集中の情報を他の投稿者にも共有するために定期的にAJAXコールを使用してサーバーとの通信を行っています。
この通信をする頻度を減らす事でサーバーのリソースを減らし、負荷を軽減をさせる事が出来ます。
制限無し、アクティビティ低減、無効化の3つから選択できますが、アクティビティを減らすと、Heartbeat の頻度が 1 分ごとに 1 ヒットから、2 分ごとに 1 ヒットに変わります。
Add-onsの機能説明
One-click Rocket Add-onsは、設定を必要とせずに利用可能なオプションを拡張する機能で、この画面からオプションを「オン」に切り替えて有効にします。
- User Cache
ログインしている WordPress ユーザーごとに専用のキャッシュ ファイル セットを作成する必要がある場合は、このアドオンを有効にする必要があります。
ユーザー キャッシュは、Web サイトにユーザー固有のコンテンツや制限されたコンテンツがある場合に最適です。 - Varnish
Varnish がサーバー上で実行されている場合は、このアドオンを有効にする必要があります。
Varnish キャッシュは、WP Rocket がキャッシュをクリアするたびに消去され、コンテンツが常に最新の状態になります。 - WebP Compatibility
WebP 画像のブラウザ互換性を向上します。
WP Rocket は WebP 画像を提供するために個別のキャッシュ ファイルを作成します。 - Cloudflare
このアドオンに Cloudflare アカウントを統合します。
アカウントのメール アドレス、グローバル API キー、ドメインを入力すると、Cloudflare キャッシュのクリアや WP Rocket での最適な設定の有効化などのオプションを使用できます。 - Sucuri
このアドオンで Sucuri キャッシュを同期します。
WP Rocket のキャッシュがクリアされたときに Sucuri キャッシュをクリアするには、API キーを入力します。
Image Optimizationの機能説明
Imagifyをインストールして、すべての画像を自動的に最適化し、ウェブサイトの貴重な時間を節約しながら時間を節約します。
無料プラグインでも画像の最適化プラグインはありますが、プラグインを使用しない方が画像の読み込みが早かったので、面倒でもサイズを圧縮したWebPやAVIF形式でアップロードした画像に置き換えるのがオススメです。
Toolsの機能説明
Toolsでは設定のインポートやエクスポート、プラグインのロールバックをする事ができます。
プラグインの挙動がおかしくなった場合にロールバックをしたり、再インストールをする際に設定内容を保存したり読み込みをする事ができます。
WP Rocketのまとめ
様々な高速化プラグインを使用してきた中で、最も安定して高速化できる最強のプラグインがWP Rocketであると思いますが、強力にウェブサイトの表示速度を改善させられるとしても、大きな表示崩れや不具合が発生してしまうようなプラグインではなく、簡単に設定が行えました。
念のためアクセス数が少ない時間帯に、高速化の効果が高い順番から一つずつ設定を有効化しながらウェブサイトの表示を確認していくのがオススメですが、TCD GENSENの場合はモバイル表示時のトップページYouTube自動再生機能の表示エラーのみで済みました。
GENSENは比較的WP Rocketとの相性が良いワードプレステーマではありましたが、特に高速化機能を標準搭載しているテーマによっては不具合が発生しやすいとの報告もあるので、慎重に設定をしていくのが良いと思います。
この記事へのコメントはありません。