KinstaでWP Rocketを使ってWordPressサイトを高速化する方法

Kinstaは速度にこだわります。お客様のサイトをさらに高速化、そして最適化する革新的な方法を常に模索しており、過去数ヶ月間は、WP Rocketチームと協力して、新バージョンであるWP Rocket 3.0（2018年4月3日リリース）に伴ういくつかの変更を行いました。WP Rocket 3.0およびそれ以降のバージョンは、Kinstaと完全な互換性を持ちます。

今回は、KinstaでWP Rocketを使用する方法や機能、メリットをご紹介していきます。

KinstaでWP Rocketを使用する

WP Rocketは、WordPressの有料キャッシュプラグインです。Kinstaではキャッシュプラグインの使用を禁止していますが、WP Rocket 3.0（およびそれ以降のバージョン）は、Kinstaサーバー上で動作すると、ページキャッシュ機能が自動的に無効化されることから、禁止対象外となります。

そのため、Kinstaのキャッシュ機能を使用しながら、WP Rocketの画期的な最適化機能を活用することができます。

キャッシュは、最初のリクエストでリソースを保存し、それ以降のリクエストでそのリソースを再利用する仕組みです。ページビューを生成するのに必要な処理を減らし、ウェブサーバーの負荷を軽減することができます。これによって、PHPとデータベースへの依存が原因で生じるWordPressの遅延を防ぐことができます（WordPressと静的HTMLについてはこちら）。キャッシュの利用はサイト高速化に欠かせません。

WP Rocket 3.0の機能

WP Rocket 3.0には美しいUIが搭載されており、操作も非常に簡単です。WordPressサイトの高速化に役立つ機能とKinsta環境への連動方法を見ていきましょう。

また、スピードテストも実施して、本番サイトへの影響もご紹介します。テスト結果はサイトによって異なる可能性があるため、必ず自分の本番サイトまたはステージングサイトでテストを行ってください。

Kinstaでステージングサイトを使用している場合、WP Rocketには、KinstaのURL構造（staging-sitename.kinsta.cloud）がホワイトリスト登録されています。localhost上で実行する場合も同様です。

キャッシュのクリア

KinstaでWP Rocketを使用する場合、WP Rocketのキャッシュは自動的に無効になり、WP Rocketメニューの「Clear cache」をクリックすると、Kinstaサイト全体のキャッシュがクリアされます。もちろん、管理画面ツールバーの「Clear Cache」をクリックしてもOKです。

「Purge this URL」をクリックすると、現在表示しているURLのキャッシュがクリアされます。これは固定ページや投稿を更新した際に便利です。

パフォーマンス上の理由から、サイト全体のキャッシュを定期的にクリアすることは推奨されません。URLのキャッシュを個別にクリアするのがベストプラクティスです。

プラグインやテーマなど、WordPressサイトで何かを変更すると、WP Rocketが警告メッセージを表示することがあります（以下参照）。このときに出現する「Clear cache」ボタンをクリックすると、Kinstaサイトのキャッシュがクリアされます。

WP Rocketのダッシュボードにある「CLEAR CACHE」をクリックしても同様です。

キャッシュ

先に述べたように、WP Rocketのページキャッシュは、Kinstaサイトでは自動的に無効になります。そのため、「Cache」タブでは、「Enable caching for mobile devices」（モバイル端末のキャッシュを有効化）だけにチェックを入れることをおすすめします。

ファイルの最適化

「File Optimization」タブでは、CSSファイルとJavaScriptファイルを最適化することができます。

Basic Settings（基本設定）

• Minify HTML（HTMLの圧縮）：HTMLを圧縮すると、空白やコメントが削除され、ファイルサイズを小さくすることができます。スピードテストを実行したところ、この設定を有効にすると、読み込み時間が0.84%短縮されました。劇的な改善が見られるわけではありませんが、一般に空白やコードを減らすことは良いことです。
• Optimize Google Fonts（Google Fontsの最適化）：Google Fontsを組み合わせることで、HTTPリクエストの数を削減することができます。HTTP/2をサポートしているホスティングサービスを利用している場合、並列化の改善により、ファイルの結合は推奨されません。KinstaはHTTP/2に対応しており、独自のCDNからフォントを読み込むことで、パフォーマンスが向上する場合もあります。ローカルフォントをホストする方法はこちらをご覧ください。
• Remove query strings from static resources（静的リソースからクエリ文字列を削除）：CSSやJavaScriptファイルは通常、domain.com/style.css?ver=4.6のようにURLの末尾にファイルバージョンを持っています。サーバーやプロキシサーバーによっては、cache-control:publicヘッダーがあっても、クエリ文字列をキャッシュできないものがあり、ヘッダーを削除するとこれを解決できる場合があります。スピードテストを実施したところ、この設定を有効にすると、読み込み時間が1.86%短縮されました。注意）CSSやJavaScriptの圧縮機能とは併用できません。

CSS Files（CSSファイル）

• Minify CSS files（CSSファイルを圧縮）：HTML同様、空白とコメントが削除され、ファイルサイズが小さくなります。スピードテストを実行したところ、この設定を有効にすると、読み込み時間が1.69%短縮されました。なお、CSSの仕組み上、サイトが壊れる可能性があるため、必ずテストを行なってください。一般に空白やコードは少ない方が良いです。
• Combine CSS files（CSSファイルを結合）：すべてのファイルが1つにまとめられ、HTTPリクエストの数が削減されます。HTTP/2をサポートしているホスティングサービスを利用している場合、並列化の改善により、ファイルの結合は推奨されません。KinstaはHTTP/2に対応しています。外部CSSの組み合わせについてはこちらをご覧ください。
• Optimize CSS delivery（CSSの配信を最適化する）：サイト上のレンダリングをブロックするCSSを排除し、知覚される読み込み時間を短縮します。レンダリングをブロックするCSSについて、クリティカルレンダリングパスの最適化については、それぞれ解説記事をご覧ください。スピードテストを実行したところ、この設定を有効にした場合、読み込み時間が0.17%短縮されました。ただし、これは実際の読み込み時間というよりも、知覚される読み込み時間に関係します。

JavaScript Files（JavaScriptファイル）

• Minify JavaScript（JavaScriptファイルを圧縮）：ファイルサイズを小さくするため、空白とコメントが削除されます。スピードテストを行ったところ、この設定を有効化すると、読み込み時が0.84%短縮されました。なお、JavaScriptの仕組み上、プラグインやテーマの機能が壊れる可能性があるため、必ずテストを行なってください。
• Combine JavaScript files（JavaScriptファイルを結合）：サイトのJSデータをより少ないファイルにまとめ、HTTPリクエストの数を減らします。HTTP/2に対応しているホスティング会社を利用している場合、1つの接続で並列に読み込みできるようになるため、ファイルの結合は推奨されていません。KinstaはHTTP/2をサポートしています。
• Load JavaScript deferred（JavaScriptを遅延読み込み）：サイトのレンダリングをブロックするJSを排除し、読み込み時間を改善します。レンダリングをブロックするJavaScriptについてはこちらを参照してください。サイトが壊れる可能性があるため、必ずテストは行なってください。スピードテストを実行したところ、この機能を使用することで、読み込み時間が1.35%短縮されました。

Kinstaのお客様で、MyKinstaのコード圧縮機能を使用している場合は、併用しても問題ないかどうか、Kinstaのカスタマーサポートまでお問い合わせください。

メディア

「Media」タブでは、画像や動画を遅延読み込みする設定や、絵文字や埋め込みなどの追加スクリプトの読み込みを無効にするオプションがあります。

LazyLoad（遅延読み込み）

遅延読み込みとは、目に見えるコンテンツを先に読み込み、必要になるまでその他のコンテンツのダウンロードとレンダリングを遅らせる最適化の技術です。この機能を有効にすることで、画像、iframe、動画がビューポートに表示される（またはされようとしてる）ときにのみ読み込まれ、HTTPリクエストの数を減らすことができます。これは、実際の読み込み時間と知覚される読み込み時間の改善につながります。

• Enable for images（画像で遅延読み込みを有効にする）：スピードテストを実行したところ、この機能を有効にすると、読み込み時間が3.89%短縮されました。
• Enable for iframe and videos（iframeと動画で遅延読み込みを有効にする）：ページに8つのYouTube動画を貼り付けたところ、この機能を使用すると、読み込み時間が74.43%短縮。WP RocketのYouTube動画をプレビュー画像に自動的に置き換える機能は、WordPressサイトの動画を劇的に高速化する強力な機能です。

WordPressの遅延読み込みについてはこちらで詳しくご紹介しています。

Emoji

WordPress 4.2以降は、古いブラウザ用のコアに絵文字が統合されています。この大きな問題点は、wp-emoji-release.min.jsファイルを読み込むために、WordPressサイトに追加のHTTPリクエストが発生すること。さらに、そのリクエストはすべてのページで読み込まれてしまいます。

Disable Emoji（絵文字を無効にする）：絵文字を無効にすることで、HTTPリクエストの数を減らすことができます。この機能は、単にユーザーのブラウザの絵文字バージョンをデフォルトに戻すだけで、絵文字が表示されたり壊れたりすることはありません。スピードテストを実行したところ、これによって読み込み時間が2.2%短縮されました。

絵文字の無効化についてはこちらでもご紹介しています。

Enbeds（埋め込み）

WordPress 4.4で、oEmbed機能がコアに追加されています。URLを貼り付けるだけで、YouTubeの動画やツイートなどのリソースをサイトに埋め込むことができ、ビジュアルエディターで自動的にライブプレビューに変換される機能です。サイトにFacebookを埋め込んでいる方は、Facebookの更新がどのように影響するのか、そしてその修正方法をチェックしてください。

だたし、この機能は、wp-embed.min.jsファイルを読み込むためにHTTPリクエストを生成します。絵文字同様、このリクエストはすべてのページで読み込まれます。

Enable WordPress embeds（WordPressの埋め込みを無効にする）：埋め込みを無効にすることで、HTTPリクエストの数を減らすことができます。スピードテストを行ったところ、読み込み時間が4.9%短縮されました。埋め込みの無効化についてはこちらもご覧ください。

プリロード

「Preload」タブでは、キャッシュプリロード、DNSプリフェッチ、フォントプリロードを有効にすることができます。すべての機能がKinstaで動作するわけではないため、注意してください。

Preload Cache（キャッシュをプリロードする）

Kinstaサイトでは、ワーカープロセスに過負荷がかかり、パフォーマンスに悪影響を与える可能性があるため、使用は推奨されません。

Prefetch DNS Requests（DNSリクエストをプリフェッチする）

WordPressサイトのヘッダーにrel="dns-prefetch"タグを追加し、ユーザーがリンクをクリックする前にドメインの名前解決を行う（バックグラウンドでDNSルックアップを実行する）ことができます。以下のように、CDN、Google Fonts、Google アナリティクスからの外部リクエストにプリフェッチを設定することをおすすめします。

<link rel="dns-prefetch" href="//cdn.domain.com/">
<link rel="dns-prefetch" href="//fonts.googleapis.com/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

スピードテストでその効果を測定するのは難しいですが、サイト高速化に間違いなく貢献してくれます。

Preload Fonts（フォントをプリロードする）

Google Fontsのような外部サービスではなく、独自ドメインでフォントをホストしている場合は、この機能の使用をおすすめします。HTMLの<head>要素でフォントをプリロードすることで、ブラウザがCSSファイルでフォントを検出する前にフォントをダウンロードし始めることができます。

高度なルール

WP Rocketは、Kinsta環境のキャッシュに同期するため、高度なルールを使用することはできません。キャッシュからURLやディレクトリを除外したり、特定のクエリ文字列を強制的にキャッシュしたりする必要がある場合は、Kinstaのカスタマーサポートまでその旨をご連絡ください。

データベース

「Database」タブでは、投稿、コメント、transient、テーブルのクリーンアップを実行することができます。

Kinstaのデータベースの継続的な自動最適化と組み合わせれば、不要な投稿リビジョンとtransientを削除してデータベースをクリーンに保ち、データベースのパフォーマンスを最大化することができます。

Post Cleanup（投稿のクリーンアップ）

長年運営しているサイトであれば、コンテンツの編集と更新の積み重ねにより、メインページに100以上のリビジョンがあることは珍しくありません。例えば、サイトに700件のページや投稿があり、それぞれに150のリビジョンがあるとすると、データベースには10万以上のエントリがあることに。これはストレージ容量を占有し、データベースのインデックスを使用しても、時にパフォーマンスに悪影響を及ぼすことがあります。

WP Rocketでは、以下を削除することができます。

• リビジョン
• 自動下書き
• 破棄された投稿

リビジョンを最適化してパフォーマンスを改善する方法はこちらをご覧ください。

Comments Cleanup（コメントのクリーンアップ）

リビジョン同様、スパムやゴミ箱に移動したコメントは、時間の経過とともにスペースを占有していきます。この設定で、以下2つの項目を削除することができます。

• スパムコメント
• ゴミ箱に移動したコメント

WordPressサイトでコメントが不要な場合は、スパムを回避するためにコメントを無効にすることをおすすめします。スパムプラグインをインストールする必要もなくなります。

Transients Cleanup（transientのクリーンアップ）

WordPressのtransientは見落とされがちですが、非常に重要です。破損したtransientキャッシュによって、WordPressサイトがダウンする事例もあります。transientは一時的なものなので削除してもOKです。プラグインが必要とする場合は、自動的に再生成されます。WP Rocketには以下2つのオプションがあります。

• 期限切れのtransient
• すべてのtransient

Database Cleanup（データベースのクリーンアップ）

データベースのクリーンアップ機能は、データベーステーブルのオーバーヘッドを削除することができますが、KinstaではMyISAMの代わりにInnoDBを利用しているため、通常は不要です。InnoDBはパフォーマンスと信頼性に優れており、MyISAMとは違って行レベルのロックを行うため、データベースクエリがより高速に処理されます。これはWordPressサイトをKinstaに移行する際、移管作業を担当するエンジニアが行う最適化の一つです。

Automatic cleanup（自動クリーンアップ）

日、週、または月単位でデータベースの自動クリーンアップをcronジョブでスケジュールすることができます。

CDN

「CDN」タブでは、サードパーティのCDNを有効化することができます。CDNはウェブサーバーの負荷を軽減し、訪問者へのコンテンツ配信を高速化するため、訪問者の体験が改善されます。CDNを使用する重要性はこちらでご紹介しています。

なお、Kinstaをご利用の場合は、高性能CDNが自動的にデプロイされるため、この機能は不要です。

Heartbeat

Heartbeatは、WordPressに標準搭載されているAPIで、サーバーのポーリングを管理することができます。サーバーとの接続を維持するため、多くのテーマやプラグインで使用されています。これにより、WordPress開発者がリアルタイムの更新を製品に組み込むことができます。

デフォルトでは、クライアント側のHeartbeatコードは15～60秒ごとに実行されます。サイトやサーバー構成によっては、そこまで頻繁に実行する必要がない場合もあります。

WP Rocketでは、サイトのバックエンド（WP管理画面）、フロントエンド、および投稿エディターでHeartbeatの実行間隔を2分に短縮したり、完全に無効化したりすることができます。

基本的には、「Redue activity」（アクティビティを減らす）の選択をおすすめします。最近のプラグインやテーマの多くは、コア機能のためにHeartbeatを利用しているため、Heartbeatを完全に無効にすると、サイトが壊れる可能性があります。

アドオン

「Add-Ons」タブでは、Cloudflare、Sucuri、Google アナリティクス、Facebookピクセルなどを追加することができます。いずれかのサービスを使用している場合は、このタブで選択し最適化しましょう。

すでに他のプラグインを使ってサービスをサイトに統合している場合は、まずはWP Rocketで設定した後、そのプラグインを削除してください。

画像の最適化

WP Rocketチームは、優れた画像最適化ツール「Imagify」も開発しています。画像の最適化に使いやすいWordPressプラグインをお探しの方は必見です。画像最適化やその他の最適化プラグインはこちらをご覧ください。

最終スピードテスト

ご紹介したすべての機能を有効にし、スピードテストを実施しました。テストには、KinstaでホストされているWordPressサイトを使用しています。

WP Rocketインストール前

WP RocketなしでPingdomで5回テストを実行し、平均値をとりました。

続いて、WP RocketなしでGoogle PageSpeed Insightsでもテストを実行しました。

WP Rocketインストール後

WP Rocketをインストールし、機能を有効化します。Pingdomで5回テストを実行し、平均値をとりました。

最後にWP Rocketありで、Google PageSpeed Insightsでもテストを実行します。

以上のテスト結果を要約します。

• Pingdomテストでは、WP Rocketを使用して合計読み込み時間が9.12％短縮された。劇的な改善とは言えないものの、10回未満のクリックだけで高速化を実現できる。
• WP Rocketは主にキャッシュプラグインだが、Kinstaでは組み込みのキャッシュを使用するため、他の最適化機能のみを使用。したがって、Kinstaの高速キャッシュにプラスαで9％のパフォーマンス改善が見られる。
• テストに使用したサイトはすでに高度に最適化されているため、大規模なサイトや、最適化されていないサイトでは、さらに大きな違いが見られる可能性が高い。
• テスト結果に見られるリクエストは通常、画像の遅延読み込みが原因で、空白のdata:image/gif;base64リクエストが発生するため。特に問題はないため、あまり気にしなくてOK。
• 動画をホストしている場合は、YouTubeの動画をクリック可能なプレビューサムネイルに変換する機能によって、読み込み時間が最大50%以上短縮される可能性がある。
• Google PageSpeed Insightsのテストでは、WP Rocketのインストール前と後では、スコアが88から98に上昇（100満点）。しかし、スコアは全体的な読み込み時間ほど重要ではないため、あくまで目安程度に捉えること。Google PageSpeed Insightsに関する詳細はこちらをチェック。

このように、WP Rocketを使用すれば、数回のクリックでWordPressサイトを高速化することができます。

まとめ

WP Rocketチームは、Kinstaが共有するウェブパフォーマンスの推奨事項を考慮した新機能を定期的に導入しています。今後は、WP Pocketとの統合がさらに強化されていくはずです。Kinstaのお客様は、修正作業などは一切なしで、スムーズにWP Rocketをお使いいただけます。

WP Rocketを使用していますか？以下のコメント欄でお聞かせください。