WordPress

WordPressブログの表示を高速化したい【無料プラグインでは損をしているかも】 2019年12月

2019年12月4日

WordPressを高速化する方法

 

はや
はじめまして。ブロガー歴4年、ネットワークエンジニア歴20年のはやです。

 

ワードプレスの読み込みが遅いので改善したいけど、思うようにできない…。

 

ワードプレス永遠のテーマである「サイトの高速化」ですが、初心者をはじめベテランブロガーでも苦戦されている方が多く見受けられます。

 

CSSを最適化して、JavaScriptを遅延させて、画像圧縮して、HTMLをゴニョニョして…。

 

はや
普通の人には難しすぎます。

 

ちなみに、同じワードプレスの高速化というテーマで触れたことがあります。

AFFINGER5のモバイル版の表示を爆速にする方法。すべてプラグインで解決できます!

続きを見る

 

上記の記事ではフリーのプラグイン「Autoptimize」と「WP TOTAL CACHE」「Async Javascript」の3つを組み合わせて高速化を実現したのですが、この方法にはひとつ欠点がありました。

Javascriptを遅延読み込みさせると思い通りの動きをしないことがあった。

 

何が都合悪いかというと、

  • Adsenseが表示されない
  • Javascriptが読み込まれない

 

収益化をしているブロガーでは致命的なものでした。

 

しかし今回わたしがご紹介するもう一つのブログの高速化はテーマを問わず実現できるのではないかと期待しているプラグインです。

 

有料プラグイン「WP Rocket」

ブログの表示は見栄えをよくするとブログの表示が重くなる欠点があります。

だからと言って見栄えよりも高速化を優先するとなんだか安っぽいブログになってしまいます。

 

ブログは記事の内容も大事ですが、「おっ?見てみたいかも。」と思わせるような見た目の美しいことも重要と考えています。

 

ですので、この見栄えを殺さずに高速化するには何が良いかを模索してきました。

 

そこで見つけたのが「WP Rocket」というプラグインです。

ただし、有料です。

 

はや
無料で…高速化したいといった人には残念ながら向いていません。

 

購入方法とダウンロード方法

WP Rocketの公式サイトで購入できます。

 

ちなみにワードプレスの管理画面では「プラグイン検索」ででてきません。

 

step
1
右上のBUY IT NOWをクリック

 

step
2
プランを選択します。サイト数でプランが変わります。

今回は様子見としてSINGLEプランを選びました。

 

後から追加したい!となった場合、追加で購入も可能です。

 

step
3
個人情報、支払い方法を入力

購入時はセール中ということもあり、お得に購入できました。

 

必要事項を入力・確認した後、「PLACE ORDER」をクリックして注文完了です。

 

step
4
マイページにログイン

メールが送付されてきますので、メールアドレスと記載のパスワード(変更可)を入力すると「My Account」のページへ入れます。

 

購入したプランの場所に「DOWNLOAD WP ROCKET」のボタンがありますので、プラグインをダウンロードします。

 

以上で、WP Rocketのダウンロードは完了です。

 

WP Rocketの設定方法

ここからWP Rocketの設定に入っていきます。

まずは、わたしが使用している「テーマ」「プラグイン」「サーバー」をご紹介します。

 

ブログ構成(2019年12月3日現在)

  • テーマ
テーマ名バージョン
WING AFFINGER520191114
JET(AFFINGERの子テーマ)20190801

 

  • プラグイン(WP Rocket含む)
プラグイン名バージョン
ABテスト320181128
AFFINGERタグ管理マネージャー320191121
AFFINGERタグ管理マネージャー3専用 PVモニタープラグイン20181203
Akismet Anti-Spam (アンチスパム)4.1.3
Broken Link Checker1.11.9
Classic Editor1.5
Contact Form 75.1.6
Google XML Sitemaps4.1.0
Imagify1.9.8.1
LazyLoad SEO(WING専用)20181225
PS Auto Sitemap1.1.9
Redirection4.5.1
Rinker1.5.8
SiteGuard WP Plugin1.5.0
STINGER系テーマアップデーター520180315
SUGOI MOKUJI(すごいもくじ)[PRO]20190801
TinyMCE Advanced5.3.0
UpdraftPlus - Backup/Restore1.16.20
WebSub/PubSubHubbub3.0.3
WordPress Ping Optimizer2.35.1.1.0
WordPress Popular Posts5.0.1
WP Rocket3.4.2.2
WPP Plus Widget0.4.7
ウィジェットのロジック5.10.4
クレジット削除1.0.0-20160827
ステ子20180831
ブログカード外部URL対応プラグイン(WING専用)20180717

 

  • サーバー
サーバー名プラン
エックスサーバーX10

 

続いて、設定方法です。

 

基本的には問題ないと思っていますが保障はできない点ご了承ください。

わたしはテスト用のまったく同環境のサイトを保有していますが、挙動が違うことを度々確認しているためです。

 

WP Rocketをインストールする方法

インストールから設定方法までをご紹介します。

 

step
1
インストールをする

ブログを運営されている方であればここで戸惑う人はいないと思います。

 

新規追加からダウンロードしたWP Rocketをインストールしましょう。

 

step
2
「設定」「WP Rocket」と移動

 

ダッシュボードが問題なく表示されればインストールは完了です。

 

WP Rocketを設定する

ここでは、私自身が最速かつ安全だなと思う設定をご紹介していきます。

使用しているテーマやプラグインなどでは若干動作が異なる場合がありますので、都度適切な設定をしてみてください。

 

キャッシュ系のプラグインを使うときの確認ポイントを合わせてご紹介します。

  • デザインが崩れていないか(CSS関係)
  • Adsenseが表示されているか(Javascript関係)
  • 画像が表示されるか(遅延読み込み)
  • Googleフォントは正常表示されるか(使用している場合、無効にするとOS依存になります)

 

Cacheの設定

 

Enable caching for mobile devicesと、Separate cache files for mobile devicesにチェックを入れます。

説明(英語)に、両方チェックを入れておくと安全に動作するとあったので、チェックしています。

どんな設定かというと、「PCサイトとモバイルサイトでキャッシュをわけますか?」という設定です。

 

動作確認時、モバイルからのサイト閲覧時、PCのキャッシュを見ていることが確認できたので、Separate~~のチェックを入れました。

その後、問題なく表示されています。

 

User CacheとCache Lifespanは「デフォルト」設定のままでかまいません。

 

File Optimizationの設定

 

WP Rocketのキモとなる設定部分です。

基本的には図のようにチェックを入れて問題ありませんでした。

 

Minifiy HTMLは、余計な空白やコメントを削除します。

チェックをいれました。

 

Combine Google Fonts filesは、フォントを組み合わせるとリクエストが減らせます。

チェックをいれました。

 

Remove query strings from static resourcesは、直訳で申し訳ないですが「静的ファイルからバージョンクエリ文字列を削除し(例:style.css?ver = 1.0)、代わりにファイル名にエンコードします(例:style-1.0.css)。 GTMetrixスコアを改善できます。」とありました。

 

PageSpeed InsightsやGTMetrixでのスコアに貢献するとのことでこれにもチェックをいれました。

 

続いてCSS Filesです。

 

これも基本的に図のように入力して問題はありません。

 

Minify CSS filesは、余計な改行や空白を削除します。

ファイル圧縮に貢献しますので、チェックを入れます。

 

Combine CSS filesは、CSSを結合すると、すべてのファイルがひとつマージ(結合)され、HTTP要求を削減することができます。

 

ただし、「あなたのサイトでHTTP/2を使用している場合はお勧めしません。」ありましたが、あえてチェックを入れています。

 

理由はPageSpeed Insightsのスコアがアップしたからです。

ただし、これをチェックすることで想定外の動作が見られた場合はチェックしないことをお勧めします。

 

そもそもHTTPS://のサイトはhttp/2で動作しています。

これはほぼ全員?かと。

 

Optimize CSS Deliveryは、WebサイトでレンダリングをブロックするCSSがなくなるため、読み込み時間が速くなります。

チェックを入れましょう。

 

続いて、JavaScript Filesの設定です。

 

基本的に図のようにチェックを入れます。

 

わたしが感心した設定は「Load JavaScript deferred」の設定です。

無料のプラグインなどでも、遅延読み込みをしてくれるJavaScriptはあったのですが、どうも思うような動きをしてくれませんでした。

 

あるプラグインでは遅延といっておきながら途中で読み込みをやめてしまうようなものもあったり、キャッシュプラグインとの相性が悪くやはり動作をしているようでしていないプラグインもあったり・・・。

 

今回はひとつのプラグインでHTML CSS JavaScriptを細かく設定できかつ思い通りの動作をしてくれました。

 

AFFINGERをご利用の方はこの設定でかなりのスコアアップが期待できます。

 

はや
テストはきちんとおこなってくださいね。

 

Media設定

 

画像の遅延読み込み関する設定です。

 

わたしのサイトはAFFINGER専用のLazy Loadプラグインを使用しているのでここは特にいじっていません。

ほかにLazy Load系のプラグインを使用していない場合はこちらにチェックを入れます。

 

Emojiは、文字通りブログで絵文字を表示させる場合の機能ですが、わたしのサイトでは使用していないのでチェックを入れています。

 

Disableは「無効化する」という意味です。

 

残りも項目は特に設定していません。

 

Embedsは組み込みといった意味があり、直訳するとほかのユーザーがあなたのサイトをほかのサイトから埋め込むことを防ぐ機能です。

 

分かりやすく言うと記事作成時に、URLを書き込むとワードプレスの機能で自動的にカード化してくれるものです。

この機能を使わずにテーマ独自のカード化機能を利用していれば無効にしても問題ありません。

 

はや
ちなみに特段スコアがよくなるようなこともありませんでした。

 

WebP compatibilityはWebP画像を使用している場合にチェックを入れましょう。

 

Preloadの設定

基本初期設定のままでOKです。

初期値はActivate sitemap-based cache preloadingは無効です。

 

追加する際はsitemapがあるURLを記載します。

 

Prefetch DNS Requestsは特に設定なしでOKです。

モバイルネットワークで外部ファイルの読み込みを高速化できますが、普通?の運営をされているブロガーさんであれば特に気にすることはありません。

 

Advanced Rulesの設定(特に不要)

 

特別説明するような設定かつ表示の改善に繋がる設定ではないので、ここでの説明は省略します。

 

Databaseの設定

 

データベースの最適化に関する設定です。

データベースは日々の利用で肥大化していくので、定期的にクリーンアップすることでレンタルサーバーのディスク容量の改善、データベース読み込みの改善に貢献します。

 

残りの設定項目

 

こちらは特にデフォルトのままで差し支えないので説明は省略します。

 

設定に関する説明は以上です。

 

PageSpeed Insightsの結果

WP Rocketを設定した後の読み込み速度の結果を紹介します。

 

  • モバイル

 

  • パソコン

 

PCは99スコアと大満足の数値です。

モバイルの改善前は30~40スコアほどでしたので、83スコアは満足の行く数値ではと思っています。

 

WP Rocketプラグイン設定後の確認とまとめ

高速化プラグインは設定が難しく、複数プラグインを組み合わせた高速化などは相性などがありなかなか思うような高速化を実現することが難しいです。

 

ちなみにGoogle Search Consoleで新しく追加された速度(試験運用版)では、WP Rocket導入前までは散々な結果になっています。

 

はや
モバイルは低速、PCでなんとか中速です・・・。

 

読み込み速度自体はSEOに関係はないとGoogleは言っていますが、結局読み込み速度が遅いと、、、

ユーザーがアクセスをしない=役に立たないサイト=順位落ちる

 

といった公式が成り立つので、サイトの速度改善は必須対策といえるでしょう。

 

ぜひご参考ください。

 

WordPressブログのノウハウを詰め込んだ「WordPress大全」

 

WordPress大全(まとめ記事)はこういうお悩みを持つあなたにおすすめです。

ブログを始めたいけど、どこから手をつけていいのか分からない・・・。

ブログを開設したはいいけど、どんな設定をしていけばいいのかわからない・・・。

ブログの記事を高速化してユーザー満足度を向上させたいけど、むずかしそうで・・・。

 

ぜひWordPress大全をご参考にあなたのブログ運営の手助けになればとてもうれしいです。

日々記事を追加していますので、ぜひブックマークしていつでも参考に出来るようにしておくとグッドですね!

WordPress大全
WordPressブログ大全!初心者から上級者まですべてのブロガーへ【記事まとめ】

続きを見る

 

 

こんなに便利。3000万回線契約されているWiMAX!あなたはまさか損していませんよね?

タブレットやノートパソコンはインターネットに接続することができるってご存知ですか?

スタバなどのカフェで使えることは知っていても、場所を気にせずどこでもインターネットを使うことができるってことまではほとんど知られていません。

 

これって驚きですよね!

 

あなたはこんなことでモヤモヤとした気分になったことありませんか?

  • 仕事で自宅に帰れない。でもみたい動画があってなかなか見れずストレスが…。
  • スポーツを生観戦したいけど、スマホだと通信制限が気になって…。
  • 車の渋滞中・移動中の退屈しのぎに動画を家族に見せたいけど、通信制限が気になる…。

 

現代人はとても忙しいです。

動画はそんな忙しいあなたにとって手軽に情報を得ることができる近年重要視されているコンテンツです。

ですが、動画はデータが大きいのでスマホやタブレットはすぐに通信量がなくなってしまいますよね。

 

動画は便利で楽しいコンテンツである反面、スマホで思う存分動画を楽しむには敷居が高すぎます。

 

そこで注目されているのが、WiMAXを利用したモバイルルーターです。

モバイルルーターを利用すれば、家はもちろん、外でもインターネットが使えます。

最大の特長は、スマホのような厳しすぎる通信制限がありません。

 

想像してみてください。

 

あなたはモバイルルーターを契約したことで、、、

  • 好きな動画を仕事の合間に楽しむことができる
  • 大好きなスポーツ観戦がリアルタイムでどこでも観ることができる
  • 渋滞中の車内でも子供にアニメを見せることができる
  • 彼女と身を寄せ合ってひとつのスマホで動画を見る

 

楽しいことしか思い浮かびません。

 

「あ~あの動画見たいのに結局観れなかったなー・・。」といった何で自分だけこんな目に・・・といった悲しい気持ちになる必要もなくなります。

 

WiMAXのモバイルルーターは3000万回線が契約されています。

 

はや
わたしもWiMAX利用者のひとりです。

 

ちなみに契約した理由は、ストレスなく動画を見たかったから。

 

家族で外出することが多く移動中なので、どうしても子供が移動中飽きてしまうことが多いんですよね。

そこではじめはスマホで動画を見せていましたが、これが毎月サクッと通信制限に引っかかるんですよね。

 

もうストレスMAXでした。

 

ですが、WiMAXを契約してからは通信量を気にするストレスから開放されて、ここぞと言うとき躊躇せず動画を見せることができています。

 

はや
見せ過ぎにはもちろん注意しています。

 

動画コンテンツが増えてきた今、あなたは通信量を我慢するあまり有益な情報を見逃している可能性があります。

これってすごくもったいないことです。

 

でも、いきなり契約は・・・と、お考えかと思います。

わたしが6年間使用したWiMAXのモバイルルーターの使用感を記事にしましたので、まずはご覧になってみてください。

 

\ このページ限定です /

GMOとくとくBB【キャッシュバック】

※20以内ならキャンセルも可能

 

関連コンテンツ

\ あんなメモやこんなメモも!? /
にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村
 

\ 応援お願いします! /

-WordPress

Copyright© HAYAMIZ BLOG , 2019 All Rights Reserved.