【裏技級】WordPressの表示速度を劇的に改善！PageSpeed Insight99点になった方法を伝授します！

WordPressサイトを運用したり、お客様のサイトを制作・運用している方にとって、WordPressサイトの表示速度はとても重要なポイントとなりますよね。

表示速度を計測できるgoogleのPageSpeed Insightsは1度は試した事があるのではないでしょうか？

なぜ表示速度が大切なのか？

SEOの勉強をした事がある方であれば、一度は目にしたことがあるSEOと表示速度の関係。

googleも2018年に正式に表示速度がモバイルでの検索ランキングでの要素に含まれると発表をしています。また、無料でPageSpeed Insightsという表示速度測定のサイトを公開しており、表示速度解決策を提案してくれる機能があります。

ページの読み込み速度をモバイル検索のランキング要素に使用します

https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

このようは背景から

表示速度=SEO

という認識の方が多いのではないでしょうか？

PageSpeed Insightsとは

googleが提供する、無料でサイトの表示速度を測定できるツールになります。

赤・黄・緑で結果を％表示してくれます。

表示速度の改善できる項目など、改善項目を表示してくれるのですが、どのように改善をしたら良いのか全く未知の世界なんです。WordPressとなると、既存テーマやプラグインが多く含まれるので、手に負えない事が多いのではないでしょうか？

使用していないJavaScriptの削除

具体的には、PageSpeed Insghtsの結果の中の、【使用していないJavaScriptの削除】の項目について、遅延読み込みをすれば良いという事はわかるのですが、遅延読み込みが出来るプラグインを試しても一向に結果が反映されずという状態から抜け出せなかったです。

html構文であればasyncやdeferを追記したり、不要なファイルを削除、header⇒footerで後読み込み等簡単に表示速度改善できるのですが、WordPressサイトになるとかなり難しくなってきます。

実際に試したのは、AutoptimizeやAsync Javascriptなどのプラグイン

設定方法が間違えているのか、【使用していないJavaScriptの削除】の項目に改善がみられませんでした。

レンダリングを妨げるリソースの除外

「レンダリングを妨げるリソースの除外」についても、プラグインで色々と試行錯誤しましたがまったく改善の余地なしでした。

長い間、WordPressサイトにおけるPageSpeed InsigthsとGTmetrixの結果改善に悩んでいたのですが、この度解決する事が出来たので皆さんに紹介をしたいと思います！

まずは、実際に私の運用しているサイトで表示速度改善を何もせずにgoogleのPageSpeed Insightsを試してみると、ひどい結果に。。。

PageSpeed Insightsの結果

(表示速度改善前)モバイルの結果

PageSpeed Insightsのモバイル９という結果でした。

(表示速度改善前)デスクトップ

PageSpeed Insightのデスクトップ結果は５５

(表示速度改善前)GTmetrixの結果

GTmetrixは最初Bだったのですが、WordPressの表示速度を改善しようと、autptimizerやasync javascriptなど、色々とプラグインを追加していじりすぎたのか、最終的にDへランクダウンしていました。。。

NitroPackで表示速度改善を試みる

そんな中、海外で人気のある表示速度改善プラグインNitroPackを見つけました。

YouTuberの方がプラグインをインストールすると100点に変わったので、半信半疑で早速試してみる事にしました。

NitroPackの無料会員登録必須

NitroPackは月間アクセス数に応じで料金がかかります。5,000ページビュー/月までの方は無料で利用が可能です。まずはお試しなので無料で登録をしてみようと思います。

このような形で登録を進めていきます。

NitroPackへログイン

自動返信メールが届くので

１．Connect your website using a connector

のリンクをクリックしてサイトを登録します。

WordPressプラグインの案内が表示されました

NitroPack for WordPressをクリックします。

【GET THE PLUGIN】をクリックしてファイルをダウンロードします。

Nitropackのインストール＆有効化からインストールする方

プラグインの新規追加で【Nitropack】を検索してインストール＆有効化しました。

NitroPackとWordPressを接続

NitoroPackとWordPressを接続するので【Connect to NitroPack】をクリックします。

Subscribed設定

NitroPackは月間5,000PVまでが無料という事で、【Use Free Plan】をクリックして進めてみます。

Subscribed設定完了

こちらの画面へ移行したらSubscribed設定は完了です

もう一度NitropackとWordPressを接続

もう一度NitoropackとWordPressの接続を試みます。【Connect to NitroPack】をクリック！

NitroPackの接続完了

ようやく、NitroPackの接続が完了しました。

NitroPackを入れた後にPageSpeed Insights

NitroPackを入れただけの状態で、もう一度PageSpeed Insightsを試しました。

(表示速度改善後)モバイルの表示速度結果

PageSpeed Insightsのモバイルは53まで改善されました。一桁から大きな前進を遂げました。

(表示速度改善後)パソコンの表示速度結果

驚きです。何時間？？何日？？何カ月？？WordPressの表示速度改善については長年調べてきましたが、あまり良い結果を出せずにいましたが、NitroPackプラグインを入れただけでPageSpeed Insightsの結果が９９!!この数字はとても嬉しいです。

(表示速度改善後)GTmetrixの表示速度結果

GTmetrixの結果もAになりました！LCPの値（ページ読み込み完了するまでのスピードが2.0sを切る事がなかなかできなかったのですが、あっさり1秒台へ突入しました！！

大満足です。

NitoroPack詳細設定

今のところ、NitoroPackプラグインをインストールしただけだったので、モバイルの結果も緑色になるように設定をしてみようと思います。

Cache Warmupを有効化

WordPressのダッシュボード【設定】＞【NitroPack】へ移動します。

Cache Warmupとは、キャッシュ機能の事です。こちらを有効化

HTML Compressionを有効化

HTML CompressionはHTMLの圧縮です。こちらも有効化

キャッシュの設定とHTML圧縮をした結果、PageSpeed Insightsのモバイル結果は変化なしでした。

複数サイトを運営している場合のNitroPack登録方法

NitroPackダッシュボードの【Add new website】をクリック

1. Website URL
2. Website name
3. Free Subscription

必要事項を入力して登録します。

新しくキーが発行

新しくブログ用のキーが発行されました。1サイトにつき、月5,000PVまでが無料のようです。

合算ではなさそうなので嬉しいですね。

WordPressブログサイトのPageSpeed Insights結果

せっかくなので、WordPressブログサイトのPageSpeed Insights結果もご紹介します。テーマは無料のcocoonを利用しています。NitroPack導入前、cocoonの高速化機能のみを利用しています。

(表示速度改善前)モバイル結果

PageSpeed Insightsのモバイル結果は30。モバイルは難しいですね。

(表示速度改善前)パソコン結果

PageSpeed Insightsのパソコン結果は80なので、まずますの結果です。

(表示速度改善前)GTmetrixの結果

cocoonで作成しているブログサイトのGTmetrix結果はEでした。ページ読み込み完了まで2.8s

モバイル結果

PageSpeed Insightsのモバイルの結果69まで改善されました。

(表示速度改善後)パソコンの結果

PageSpeed Insightsのパソコンの結果は97まで改善されました。２～３回分析を押しても80のままだったのですが、4回目に97まで改善されていました。読み込みのタイミングがあると思うので、何度が分析をしてみると良いと思います。

(表示速度改善後)GTmetrix

GTmetrixの結果はAになりました。さらに、ページ読み込みが1s切っています！！

まとめ

今回、誰にも教えたくないくらい凄いプラグインを発見をしました。

１つのサイトだけではなく、2つのサイトも劇的に完全されたのでたまたまではないですね！
NitroPackの無料枠は月間5,000PVという制約はあるものの、その後もお金を払う価値のあるプラグインではないでしょうか？

• PageSpeed Insightsの数値が上がらない
• GTmetrixの評価が上がらない
• サイトの表示スピード改善をクライアントより相談されている
• 改善策を色々と調べて試したけれどどれも効果が無かった

こんな方にお勧めのプラグインNitroPackの紹介でした！