【wordpress高速化】PageSpeed-Insightの使い方

ブログの表示速度は、あまり遅いとSEOに悪い影響を及ぼしてしまいます。そこでおススメしたいのが、PageSpeed Insightsの活用です。これはグーグルが無料で提供しているツールで、ブログの表示速度を改善する方法も提示してくれます。

PageSpeed Insightsとは？

PageSpeed Insightsを活用すると、以下のメリットがあります。

・自分のブログがパソコンとモバイルで表示される速度を１００点満点で採点してもらる。

・表示速度について改善策を教えてもらうことができる。

定期的に自分のURLを入力して、自分のブログの表示速度をチェックすることをおススメします

私の場合、パソコンはあまり問題ではなかったものの、モバイルでは１００点満点中、わずか５５点！

私が運営しているブログでは、読者さんの閲覧しているデバイスのうち、モバイルが全体の７５％を占めています。これはさすがに改善しないとまずいです。

その改善策として示されたのが以下の３点です。

• ブラウザのキャッシュを活用する。
• 圧縮を有効にする。
• スクロールせずに目るコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する。

それぞれ改善してみます。

ブラウザのキャッシュを活用する方法

「今回はブラウザのキャッシュを活用する」の具体的な改善方法について、ご紹介します。

私はプラグインを導入することで、改善しました。

プラグイン「WP Fastest Cache」

インストールしたら、以下のように設定してください。

言語を日本語に設定したうえで、すべてにチェックを入れ、「変更を保存」します。

この結果、２ポイント（５５→５７）に改善しました！

微増ですが、うれしいです。

圧縮を有効にする方法

FTPソフト（私の場合はFilleZillaを使用）で、「public_html」のフォルダを開きます。

そこから、「.htaccess」を右クリックして「編集/表示」を選択します。

下のような画面が表示される場合は、「テキストファイルに既定のエディタを使用」にチェックが入っていることを確認し、「OK」をクリック。

FTPソフトを利用し、「.htaccess」ファイルに以下を追記します。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
 
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

どんどん良くなってきました！

スクロールせずに目るコンテンツのレンダリングをブロックしているJavaScript/CSSを排除

一番苦労したのがこの項目です。

結論としては、どのサイトを参照してもよい方法が分かりません。

プラグインを使って解決する方法

メジャーな方法としては、JavaScriptを非同期にしたり、遅延するプラグインを導入する方法です。

例えば、以下のプラグインの活用が考えられます。

（非同期）

Asynchronous Javascript

（遅延プラグイン）

WP Deffered Javascripts

しかし、実際にこれらのプラグインを導入しても、点数は変わりませんでした。

さらに、私の使用しているテーマ（TCD010）では、グローバルメニューがつぶれる（均等表示されず左に寄る）という現象が発生しました。

CSSをいじって解決する方法

直接CSSをいじらないといけないのは失敗したときのリスクを考えると気が引けます。

１からCSSを勉強するのは大変です。なので、この方法は不採用。

不要なプラグインを停止して解決できた！

あきらめかけたそのとき、いくつか使用していないプラグインを停止したら点数が１３ポイント（６３→７６）上昇しました！

詳しい理由は分からないですが、プラグインはいくらでも導入すればよいというものではなく、少なくとも表示速度に負荷をかけてしまうようです。