WordPress サイト用の WP-Rocket プラグインの設定方法

公開: 2018-07-23

ウェブサイトの最適化に関して言えば、WordPress でのキャッシュの役割を過小評価することはできません. キャッシングとは正確には何ですか? ウェブサイトを高速化できることはわかっていますが、それ以上の効果があるのでしょうか?

目次

  • キャッシングとは?
  • キャッシングの利点
  • WPロケット
  • WP-Rocket のインストール方法は?
  • WP-Rocket の設定方法は?
  • ダッシュボード
  • キャッシュ
    • モバイルキャッシュ
    • ログインユーザーキャッシュ
    • キャッシュの寿命
  • ファイルの最適化
    • 基本設定
    • CSS ファイル
    • JavaScript ファイル
  • メディア
    • 遅延ロード
    • 絵文字
    • 埋め込む
    • WebP の互換性
  • プリロード
    • プリロードキャッシュ
    • DNS 要求のプリフェッチ
    • プリロード フォント
  • データベース
  • ロケットCDN
  • CDN
    • CDN CNAME
    • CDN からファイルを除外する
  • アドオン
  • ワニス付きWP-ロケット
  • Cloudflare を使用した WP-Rocket
    • WP Rocket の Cloudflare アドオン
  • ツール
  • 結論
  • ボーナスのヒント
    • ホワイト ラベルのフットプリントを有効にする
    • Cloudflare の API キー フィールドを非表示にする

キャッシングとは?

キャッシングとは、コンテンツの静的バージョンを作成し、それを訪問者に提供するプロセスです。 通常、静的ページはブラウザですばやくレンダリングされます。 これにより、Web サイトのパフォーマンスが向上します。

WordPress に最適なキャッシュ プラグインのリストを次に示します。

このようにして、データベースとの間でやり取りされるクエリを回避し、サーバーの負荷を軽減できます。

キャッシングの利点

  • ウェブサイトの速度とパフォーマンスを向上させます
  • ホスティング サーバーの負荷を軽減するのに役立ちます
  • サーバーのメモリと I/O 操作を節約
  • より良いユーザーエクスペリエンスを提供

これを行う最も簡単な方法は、プラグインを使用することです。 いくつかの無料およびプレミアムの WordPress プラグインは、Web サイトでキャッシュを有効にするのに役立ちます。

この記事では、特に WP-Rocket プラグインについて説明します。

WPロケット

Jonathan Buttigieg と Jean-Baptiste Marchand-Arvier によって開発された WP-Rocket は、市場に出回っているすべての WordPress キャッシング ツールの中で最高の結果をもたらすプレミアム キャッシング プラグインです。

一般的に、WordPress のトップ キャッシング プラグインの 1 つと考えられていますが、100% プレミアムです。 プラグインは、負荷を軽減するために wp-cron を介してバックグラウンドでキャッシュします。 ただし、WP-Cron は、cron ジョブの実行を制御できるプラグインです。

ページをキャッシュに要求するときに、現在のユーザーのセッション Cookie を刺激することによって機能します。 パフォーマンス レベルの向上に加えて、より使いやすい設定領域が含まれています。

WP-Rocket のインストール方法は?

  • まず、 WP-Rocketプラグインを購入してダウンロードします。
  • WordPress ダッシュボードからプラグインをインストールするには、プラグインの zip ファイルから始める必要があります。
  • zip ファイルを通常どおりダウンロードし、インストールを続行します。
  • WordPress 管理パネル>>プラグイン>>新規追加>> プラグインのアップロードに移動します。
  • zip ファイルをアップロードします。

有効化したら、設定パネルに移動します。 アカウントに新しいウェブサイトが追加されたことを知らせる自動メールが届きます。

WP-Rocket の設定方法は?

プラグインを有効にします。

WP Rocket が有効になり、すでに機能しています。
WP Rocket が有効になり、すでに機能しています。

WP Rocket チームによると、有効にするだけでサイトの速度が向上します。 したがって、主にサイトが改善されているかどうかを確認してください。

ただし、サイトに合わせて構成できる設定は多数あります。 そうするために、

  • プラグイン パネルを開き、[ WP Rocket ] をクリックします。 次のことを求められます。チェックボックスをオンにする必要があります。

ダッシュボード

ダッシュボードには、マイ アカウント、マイ ステータスなどのセクションが表示されます。

WPロケットマイアカウント
WPロケットマイアカウント

私のステータスセクション:

  • ベータ テスターの場合は、ロケット テスターをオンにします。
  • 匿名データを開発チームと共有したい場合は、 Rocket Analyticsをオンにできます。

[変更を保存] をクリックします。

キャッシュ

このセクションには、モバイル キャッシュ、ユーザー キャッシュ、キャッシュの有効期間などの基本的なキャッシュ オプションが含まれます。

WPロケットキャッシュの設定
WPロケットキャッシュの設定

モバイルキャッシュ

  • サイトやブログでモバイル テーマを使用している場合は、モバイル キャッシュを有効にすることをお勧めします。 Web サイトが応答しない場合は、モバイル キャッシュを有効にしないこともお勧めします。
  • サイトに個別のモバイル テーマがある場合は、個別のモバイル キャッシュをオンにします。

ログインユーザーキャッシュ

ログインしてサイトにアクセスするユーザーがいる場合は、ログインしているユーザーのキャッシュを有効にします。 サイトに複数のユーザーがいる場合、それらに個別のキャッシュが提供されます。

キャッシュの寿命

都合に合わせてキャッシュの有効期間を設定してください。 キャッシュ ファイルは 24 時間後に自動的に削除されるため、デフォルトで 24 時間保持することをお勧めします。

注:この値を低く設定しすぎると、キャッシュが頻繁にクリアされます。 一方、設定が高すぎると、訪問者がサイトの最新コンテンツを見逃す可能性があります。 ただし、無制限の有効期間が必要な場合は、0 に設定すると、キャッシュ ファイルはそのまま残ります。

[変更を保存] をクリックします。

個々のページまたは投稿の WP Rocket キャッシュ オプション
個々のページまたは投稿の WP Rocket キャッシュ オプション

注:エディター画面で個々のページまたは投稿のキャッシュを完全に無効化または管理できます。 個々のページまたは投稿のキャッシュを完全に停止する [このページをキャッシュしない] オプションを選択するか、他のオプションを無効/有効にすることができます。

  • 画像の LazyLoad
  • iframe/ビデオの LazyLoad
  • HTML の縮小/結合
  • CSS の縮小/結合
  • JS の縮小/結合
  • CDN
  • CSS 配信の最適化
  • JSを遅らせる

ファイルの最適化

HTML、CSS、Google Fonts、JS などのいくつかのファイルの縮小が含まれています。 HTTP1 の更新バージョン (HTTP1.1 や HTTP2 など) を使用している場合にのみ、このオプションを有効にすることをお勧めします。

各ファイルの重量を軽減し、ブラウザーや検索エンジンの読み取りを高速化します。

WP Rocket プラグインのファイル最適化設定
WP Rocket プラグインのファイル最適化設定

最適化は 3 つの部分に分類されます。

  • 基本設定
  • CSS ファイル
  • JavaScript ファイル

基本設定

  1. HTML の縮小: HTML を縮小すると、空白とコメントが削除され、サイズが縮小されます。
  2. Google フォント ファイルの結合: Google フォントを結合すると、HTTP 要求の数が減ります。
  3. 静的リソースからクエリ文字列を削除: 有効にすると、バージョン クエリ文字列が静的ファイル (例: style.css?ver=1.0) から削除され、代わりにファイル名にエンコードされます (例: style-1.0.css)。

CSS ファイル

  1. CSS の縮小:有効にすると、空白とコメントが削除され、ファイル サイズが縮小されます。
  2. CSS の結合: CSS を結合すると、すべてのファイルが 1 つに結合され、HTTP 要求が減少します。

サイトがすでに HTTP2 を使用している場合、このオプションはお勧めしません。

3. CSS ファイルを除外する:ディレクトリから特定の CSS を除外する場合は、このオプションにパスまたは URL を入力できます。 ただし、これはオプションであり、あまりお勧めしません。

4. CSS 配信の最適化:これを有効にすると、Web サイトのレンダリングをブロックする CSS がなくなり、読み込み時間が短縮されます。

5.重要な CSS のフォールバック: WP Rocket は、非同期 CSS や重要な CSS などの高度なパフォーマンスの最適化を可能な限り便利に処理できるようにします。

[CSS 配信設定を最適化する] チェックボックスをオンにすると、重要な CSS がバックグラウンドで Web サイトに生成され、次のページの読み込み時に追加されます。 その後、CSS がサイトに非同期に読み込まれます。

JavaScript ファイル

  1. JS ファイルの縮小: JavaScript を縮小すると、空白とコメントが削除され、ファイル サイズが縮小されます。
  2. JS ファイルの結合: 有効にすると、サイトの JS 情報をより少ないファイルに結合し、HTTP 要求を減らします。 サイトで HTTP/2 を使用している場合はお勧めしません。
  3. 除外された JS ファイル: ディレクトリから特定の JS を除外する場合は、このオプションにパスまたは URL を入力できます。 ただし、これはオプションであり、あまりお勧めしません。
  4. Load JS deferred: CSS と同様に、これを有効にすると、Web サイトでレンダリングをブロックする JS が減少し、認識される読み込み時間が短縮されます。

[変更を保存] をクリックします。

最新のテーマとプラグインを使用している場合、このファイルは必要ありません。 そのため、不要な HTTP リクエストを減らすために、これを削除することをお勧めします。

jQuery 移行を削除する
jQuery 移行を削除する

メディア

WPロケットメディアの最適化
WPロケットメディアの最適化

遅延ロード

特にサイトに大量の画像がある場合は、画像の遅延読み込みを有効にします。 画像を遅らせることで、長いページを高速化します。 iFrame とビデオに対しても有効にすることができます。 iFrame の遅延読み込みを有効にすると、YouTube の埋め込みをプレビュー画像のサムネイルに置き換えるオプションが提供されます。

絵文字

ウェブサイトで絵文字を使用していない場合、絵文字を無効にすると、ウェブサイトへの外部 HTTP リクエストの数が減ります。

埋め込む

無効にすると、他のユーザーがあなたのサイトからコンテンツを埋め込むことができなくなり、他の (ホワイトリストに登録されていない) サイトからコンテンツを埋め込むことができなくなり、WordPress の埋め込みに関連する JavaScript リクエストが削除されます。

[変更を保存] をクリックします。

WebP の互換性

この機能を使用して、WebP バージョンの画像を訪問者に提供できます。 サイトで Imagify プラグインを使用して WebP ファイルを生成している場合は、変更を加える必要はありません。

プリロード

次の 3 つのセクションに分類されます。

WPロケットのプリロード設定
WPロケットのプリロード設定

プリロードキャッシュ

サイトマップのプリロードの有効化は、キャッシュの有効期限が切れると自動的に実行されます。

Yoast SEO を使用している場合、Yoast SEO プラグインによって生成されたサイトマップが検出されます。

サイトマップを手動で送信するオプションもあります。 プリロード ボックスのサイトマップに URL を入力するだけです。

このオプションは、サーバーのパフォーマンスが良好な場合にのみお勧めします。

自動にしてください。 Web サイトのコンテンツを追加または更新すると、自動的にトリガーされます。 ダッシュボードにいるときは上部のツールバーメニューから、またはWP Rocketダッシュボードのクイックアクションから手動で起動することもできます.

DNS 要求のプリフェッチ

DNS プリフェッチは、特にモバイル ネットワークで、外部ファイルの読み込みを高速化できます。 プリフェッチする外部ホストを追加することもできます。 そのためには、ボックスに URL を入力する必要があります。

DNS プリフェッチに最も一般的に使用されるドメイン:

 //use.typekit.net //netdna.bootstrapcdn.com //s0.wp.com //s.gravatar.com //stats.wp.com //www.google-analytics.com //cdnjs.cloudflare.com //ajax.googleapis.com

プリロード フォント

サーバーでサイトのフォントをホストしている場合は、Web サイトにフォントをプリロードできます。 フォントをプリロードすると、ブラウザーが CSS ファイル内のフォントを検出しやすくなり、サイトの全体的なパフォーマンスが向上します。

データベース

データベースには、クリーンアップ後のクリーンアップ、コメントのクリーンアップ、一時的なクリーンアップ、データベースのクリーンアップ、自動クリーンアップなど、クリーンアップするさまざまなセクションが含まれます。

WP Rocket データベースの最適化
WP Rocket データベースの最適化
  • 投稿のクリーンアップ:投稿のクリーンアップ後のリビジョンと下書きを有効にすると、完全に削除されます。 リビジョンまたはドラフトを保持する必要がある場合は、このオプションを使用しないでください。
  • コメントのクリーンアップ:スパムとゴミ箱に入れられたコメントは完全に削除されます。
  • トランジェントのクリーンアップ:トランジェントは一時的なオプションです。 それらは安全に削除できます。 プラグインで必要になると、それらは自動的に再生成されます。
  • データベースのクリーンアップ:データベース テーブルのオーバーヘッドを削減します。

[変更を保存] をクリックします。

ロケットCDN

WP Rocket は、コンテンツを光速で配信する RocketCDN を提供します。

このオプションを使用するには、[GET STARTED] ボタンをクリックして RocketCDN のサブスクリプションを取得する必要があります。 この機能は無料ではなく、追加料金がかかることに注意してください。

StackPath は RocketCDN を強化します。 プラグインは最適な CDN 構成を適用して、Web サイトの速度とパフォーマンス グレードを向上させます。

WPロケットキャッシュプラグインによるRocketCDN
WPロケットキャッシュプラグインによるRocketCDN

CDN

WP Rocket は通常、Amazon CloudFront、MaxCDN、KeyCDN などを含むほとんどの CDN プロバイダーと互換性があります。

WPロケットのCDN設定
WPロケットのCDN設定

CDN CNAME

  • チェックボックスをクリックして CDN を有効にします。
  • CDN CNAME を入力し、すべてのファイルに対して予約済みを選択します。

CDN からファイルを除外する

CDN 経由で提供したくないファイルがいくつかあります。 この場合、そのファイルまたはディレクトリの URL をボックスに入力できます。 URL のドメイン部分は自動的に削除されます。

[変更を保存] をクリックします。

アドオン

WP Rocket プラグインには、Google アナリティクスや Facebook ピクセルなどの追跡スクリプトを最適化するためのワンクリック Rocket アドオンが付属しています。

この機能を有効にすると、これらのスクリプトがサーバー上でローカルにホストされ、ブラウザ キャッシュを活用するための PageSpeed の推奨事項を満たすことができます。

ワニス付きWP-ロケット

WP-Rocket は Varnish と互換性があります。 プラグインには、すべての Varnish キャッシュをパージするワンクリック アドオンが付属しています。 毎回 WP Rocket がキャッシュをパージして、すべてのキャッシュが最新であることを確認します。

WP Rocket のワンクリックワニスアドオン
WP Rocket のワンクリックワニスアドオン

Varnish を有効にするには、このアドオンを有効にする必要があります。これ以上の構成は必要ありません。

Cloudflare を使用した WP-Rocket

Cloudflare は JS と CSS の縮小プロセスを実行します。 WP-Rocket とは対照的に、プラグインには連結と呼ばれる追加のプロセスが含まれていました。

WP Rocket Cloudflare アドオン
WP Rocket Cloudflare アドオン

これは、互換性とパフォーマンスを向上させるために、WP Rocket がファイルを小さなグループに結合することを意味します。

Rocket プラグインでは、プラグインに WP Rocket Cloudflare アドオンが含まれているため、Cloudflare を個別に使用することはオプションです。

WP Rocket の Cloudflare アドオン

プラグインのアドオン タブに、Cloudflare アドオンが表示されます。

WP Rocket Cloudflare の設定
WP Rocket Cloudflare の設定
  • ボタンをオンにして、[オプションの変更] ボタンをクリックします。 Cloudflare 設定用の新しいタブが開きます。
  • グローバル API キーを要求します。 そのために、Cloudflare アカウントにログインします。 そこでグローバル API キーを取得します。
  • グローバル API キーをコピーして、WP Rocket 設定に貼り付けます。
  • アカウントの電子メールに、Cloudflare アカウントで使用されている電子メール アドレスを入力します。
  • ゾーン ID : ドメインのゾーン ID を入力します。 これは、Cloudflare アカウントの概要ページにあります。

下にジャンプすると、次の 3 つのオプションが表示されます。

1.開発モード:開発モードでは、Cloudflare のエッジ キャッシングと縮小機能を一時的に停止できます。

2. 最適な設定:このオプションを有効にすることを強くお勧めします。 そうなる、

  • Cloudflareのキャッシュレベルをアグレッシブに設定します
  • Cloudflare のミニフィケーションを有効にする
  • Rocket Loader (WP Rocket とは無関係の名前) を非アクティブ化します。
  • Cloudflare のブラウザ キャッシュを 1 か月に設定する

3. 相対プロトコル:相対プロトコル設定は、静的ファイル (CSS、JS、画像) の URL を書き換えて、相対プロトコル (http:// または https:// の代わりに //) を使用します。 WordPress サイトが完全な SSL で実行されている場合は、有効にしないでください。 これは、Cloudflare の柔軟な SSL 機能を使用している場合にのみ有効にする必要があります。

ページの最後に、「すべての Cloudflare キャッシュ ファイルをクリアする」ボタンが表示されます。 このボタンを毎回使用しないことを強くお勧めします。 問題のトラブルシューティング中にのみ役立ちます。

ツール

設定のインポートまたはエクスポート、ロールバックなどの重要なツールのリストがあります。

WP-ロケットツール
WP-ロケットツール

結論

したがって、WP-Rocket のいくつかの簡単な設定は完了です。

ここで、プラグインが機能しているかどうかを確認する必要があります。 そうするために、

  • ログインしたユーザーのキャッシュを有効にしたので、WordPress からログアウトします。
  • サイトを開いてソース コードを確認します。
  • 次のように表示されるコメントを確認します。
 This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: http://wp-rocket.me

Cloudflare 側で縮小を有効にしている場合、コメントは表示されません。 代わりに、縮小されたファイルへのリンクがヘッダーに表示されます。

ボーナスのヒント

ホワイト ラベルのフットプリントを有効にする

他のキャッシュ プラグインと同様に、WP Rocket もサイトの HTML ソース コードに次のようなフットプリントを追加します。

WPロケットフットプリント
WPロケットフットプリント

ただし、WP-Rocket プラグインは、ホワイト ラベルのフットプリントを許可します。 そのため、ホワイト ラベルを有効にすると、サイトの HTML コメント フットプリントで WP Rocket の言及を削除できます。

ホワイト ラベルのフットプリントを有効にする方法は?

  • WordPress インストールのルートにあるwp-config.phpを編集し、次の定数を追加します。
 define ('WP_ROCKET_WHITE_LABEL_FOOTPRINT', true);
  • 次に、キャッシュをクリアします。
  • フットプリントは、WP Rocket に言及せずに一般的なメッセージに更新されます。
WP Rocket ホワイトレーベルのフットプリント
WP Rocket ホワイトレーベルのフットプリント

Cloudflare の API キー フィールドを非表示にする

WP Rocket の Cloudflare 設定で API キー フィールドを非表示にする場合は、次のコード スニペットをwp-config.phpファイルに追加します。

 define( 'WP_ROCKET_CF_API_KEY_HIDDEN', true );

これを追加すると、設定の API キー フィールドが非表示になります。

WP Rocket で CloudFlare API キーを非表示にする
WP Rocket で Cloudflare API キーを非表示にする

wp-config.phpに API キーを直接追加することもできます

define('WP_ROCKET_CF_API_KEY', 'put-your-API-key-here');

パフォーマンスの最適化がすべてです。 特に、WP-Rocket は、サイトのパフォーマンスを最適化すると主張しているため、最善を尽くします。 WordPress の高速化に関する私の他のガイドをお読みになることをお勧めします。