'}}

WordPressの表示速度改善 有料プラグイン WP Rocket を試してみた!

HanamiWEBオンラインスクールでは

●バーチャル自習室でのリアルタイム質問!

●チャットで質問し放題!

●24時間学び放題のEラーニング教材!

全部ついて 2,500円/月!

WordPressサイトの表示速度を簡単に改善したい!!

クライアント様からの要望、またご自身のホームページの表示速度で困りの方も多いのではないでしょうか?

有料プラグインでも良いから表示速度を改善したい!!

と思われている方向けに、実際に有料の表示速度改善プラグインWP Rocketを購入して実験した結果を紹介します!

外注先に有償で依頼して満足の結果が得られないよりは、有料プラグインを購入して確実にWordPressサイトの表示速度改善をした方が良いですよね。

表示速度 = SEO

googleは表示速度が速いサイトの方を好むとよく言われていますので、表示速度はとても気になる項目ですが、簡単に改善できないのが現状ですよね。

WP Rocketとは?

無料版を提供していない、有料WordPress表示速度改善プラグインです。

セットアップはたったの3分!簡単に誰でも使えるプラグインみたいです。

主な機能は

  • ページのキャッシュ
  • GZIP
  • キャッシュのプリロード
  • ブラウザキャッシュ
  • ファイルの最適化
  • 画像の最適化
  • データベースの最適化
  • CDNの最適化

世界で180万以上のサイトに利用されている実績もあります!

早速WP Rocketを購入

ライセンスの種類は3種類

  • Single - 1サイトだけに適応したい方向けの1年間のライセンス料
  • Plus - 最大3サイトまで使える1年間のライセンス料
  • Infinite - サイト数上限なし。制作などを行っていてお客様サイトへ導入したい方向けの1年間のライセンス料

どのプランも1年間のライセンス料です。

毎年ライセンス料を払う必要があります。

必要事項を入力

海外サイトの決済なので、私はいつもPayPal決済を行います。

プラグインをダウンロード

購入後すぐに表示速度改善プラグインWP Rocketをダウンロードできます。

購入後マイページへの案内メール

WP Rocket購入後、以下のようなメールが届いたので初期パスワードを変更しました。

メールアドレスを入力してパスワードを変更します。

パスワード再設定リンクメールが届くので、そのリンクより自分の設定したいパスワードへ変更しました。

他のサイトにも使いたいと思ったら差額でライセンス変更

マイページより、差額を払うとライセンスタイプを変更できます。

WordPressサイトへWP Rocketをインストール

他のキャッシュ系のプラグインや表示速度系(Lazy roadなど)のプラグインは一旦停止しておきます。

機能が重複しないように、注意が必要です。

WordPressダッシュボードで【外観】>【プラグイン】>【新規追加】

でWP Rocketよりダウンロードしたzipファイルをアップロードします。

その後、【今すぐインストール】⇒【有効化】という流れで有効にしていきます。

有効化した後、WP Rocketのマイページにサイトが反映されました。

WordPressダッシュボード【設定】の中に【WP Rocket】という項目が追加れますので、こちらから設定を行っていきます。

WP Rocketを有効化するだけで自動機能

有効化するだけで自動的に反映される機能があります。

  • ページキャッシュ
  • ブラウザキャッシュ
  • Gzip
  • Google font最適化
  • 絵文字無効化

また、デフォルトで有効にはなるが、環境によって無効化にしたい場合無効にできる機能は

  • モバイルキャッシュ
  • キャッシュ10時間
  • WordPressの埋め込み無効
  • キャッシュのプリロード
  • リンクのプリロード

有効化にした後のGT metrix

google speed insightの値はあまり変化がありませんでしたが。GT Metorixは2秒切りました。

キャッシュの設定

まず、キャッシュの設定をみていきます。

  • Enable caching for mobile devices ーモバイルデバイスにキャッシュを許可するかの設定
  • Separate cache file for mobile devices ー モバイル専用のテーマが用意されていたり、モバイル専用のプラグイン機能がある場合にチェックを入れます。
  • Enable caching for logged-in WordPress users ー ログインユーザーにキャッシュを個別に提供する場合にチェックを入れます。会員サイトなど構築している方はチェックを入れても良いかもしれません。
  • Cache Lifespan ー キャッシュを保持する期間を設定できます。デフォルトは10時間。

ファイルの圧縮設定

ファイルの圧縮はサイトが崩れる場合がよくあります。

ONにしたらサイトを確認 ⇒ 正常であれば次の設定をONと慎重に進める事をお勧めいたします。
万が一崩れたら、ONにした設定をOFFにすれば大丈夫です。サイトが崩れる原因となる機能は利用不可という事になります。

管理者としてサイトを確認していたら問題が無かったのにという事もあるので、シークレットウィンドウや別ブラウザでもサイトが崩れていないかきちんと確認をしましょう!

htmlファイルはプラグインをONにした時に最適化ファイルが自動生成されます。
ダッシュボードからこの機能をOFFにする事は出来ません。

CSS

  • Minify CSS files ー CSSファイルを圧縮機能
  • Combine CSS files  ー 上記で圧縮したCSSファイルを1つのファイルにまとめる機能
  • Optimize CSS delivery ー CSSの配信を最適化して、レンダリングブロックを排除する機能
  • Remove Unused CSS ー 使用していないCSSを削除する機能

JavaScript

  • Minify JavaScript files ー JavaScriptファイルを圧縮 する機能
  • Combine JavaScript files ー 上記で圧縮したJavaScriptファイルを1つのファイルにまとめる機能
  • Load JavaScript deferred ー JavaScript遅延読み込みにより、レンダリングブロックを排除する機能
  • Delay JavaScript execution ー ユーザーの操作が始まるまで読み込みを遅延させる機能

全てチェックを入れてみました。運よくサイトに崩れは生じませんでした。

これまでの設定で大きな変化があったのは、google Page Speed InsightのPCスコアです。

メディアの設定

画像圧縮のプラグインを別で利用している方も多いと思いますので、画像圧縮系プラグインは無効化(一時停止)してこの機能を利用してください。

Lazy Load(遅延読み込み)

  • Enable for image(画像)
  • Enable for iframes and videos(iframeとビデオ)
  • Replace YouTube iframe with preview image ― 上記の設定をONにした場合、こちらのONにすると、ページ内に複数のYouTubeがある場合読み込み改善が期待されます 

すべてONにしておきました

その他

  • Add missing image dimensions ーレイアウトの崩れを防ぐ機能
  • Disable WordPress embeds ー 他のサイトで自身のサイトの埋め込みを防止する機能
  • Enable WebP Catch ー WebP画像を利用している場合に有効化機能です

Add missing image dimensionsのみONにしておきました

プリロード

デフォルトでONになっていたので、全てONに設定をしました。

データベース

意外にも、データベースにも不要なファイルが溜まってきます。

必要そうなものにチェックを入れていきます。

1週間に1度自動でクリーンにする設定にしました。

速度が劇的に改善された!

設定を続けているのにもかかわらず、なかなか表示速度結果が改善されないと思い、WP Rocketのダッシュボードにあるキャッシュをそれぞれクリアにしてみました。(右サイドにあります)

GT metrixでは目指していたAを達成!!

スピードは1.4sになりました。
1秒切れるか、引き続き設定をしていきます

Page Speed InsightのPC結果は96!100までもう少しです

Page Speed Insightのモバイル結果は77!

引き続きCDN設定

  • Enable Content Delivery Network 

ONにしました。

画像圧縮には別プラグインをインストール

Image Optimizationをクリックすると【IMAGIFY】をインストールするように案内が出ます。

【インストール】

メールアドレスを入力してAPIキーを受け取る

登録をしたメールアドレスにAPIキーが届いているので、キーを入力

【Get to setting】をクリックして設定を始めます。

まずは初期設定のまま利用してみます。

最終表示速度

GT metrix

スコアA、表示速度も2秒切りました!(本当は1秒切りたい。。。)

Page Speed Insight(PC)

もうすぐ100!というところまで改善できました!

Page Speed Insight(SP)

緑ゾーンになるように、引き続き調整を続けたいと思います。

今まで長年WordPressの表示速度改善には時間を費やしてきました。

無料プラグインや.htaccessでの設定等。

今まで費やしてきた時間は何だったんだろう?と思うくらい劇的な改善に驚きです。

その後、クライアント様のご協力で10サイト程WP Rocketを試させていただく事が出来ました。

  • GT metrix 表示速度結果1秒切り!
  • Page Speed Insight スコア100達成!

どれも満足のいく結果かつ、スコア100や1秒切という最終目標が達成されたサイトもありました。

買い切りライセンスではない事に注意が必要ですが、暫くWP Rocketは手放せなさそうです。

(おまけ)WP Rocketを入れる前の表示速度結果

GT metrix

WP Rocketを入れる前

WP Rocketを入れ設定をした

Google Page Speed Insight(PC)

WP Rocketを入れる前【67】

WP Rocketを入れ設定をした後【97】

Google Page Speed Insight(モバイル)

WP Rocketを入れる前【11】

WP Rocketを入れ設定をした後【72】

Lighthouse

WP Rocketを入れる前

WP Rocketを入れ設定をした後

 

 

ホームページのリスキリングはお任せください!

2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!

↑クリックするとLINE公式が開きます

新着記事

'}}
LifterLMSのシステム自動出力ページのカスタマイズ方法を解説
'}}
LifterLMS 銀行振り込みなどで登録日とアクティブ日が異なる場合のカスタマイズ例
'}}
(解決済)WordPressから送信されるGmail宛のメールだけ送られない【ロリポップ】
'}}
WordPress予約システムAmeliaのパッケージ(回数券)設定を解説
WP Rocket - WordPress Caching Plugin
ja日本語