サイトのページ読み込み(表示)速度を改善する方法(2)~スコア85[PageSpeed Insights]に役立つプラグインと.htaccessコード

サイトのページ読み込み(表示)速度をGoogleは検索アルゴリズムの指標に用いている。
それは、サイトのページ表示速度がユーザーの利便性に大きく関係しているからだ。
サイトのページ表示速度が遅いのは致命的だ。
表示速度が3秒以上かかると、53%のユーザーがページを離れると言う。
Googleのスピードアップデート(Speed Update)は既にパソコンページでは実施されていたが、モバイルページに関しては、先日(2018年7月)に実施された。
当面は「ページ表示速度が極端に遅い」ページが対象になるが、いずれパソコンページ同様、「ページの表示スピードが遅くなればなるほど評価が下がる」はず。
サイトのページ読み込み(表示)速度はGoogleの[PageSpeed Insights]で調べる事が出来る。
目指したいスコアは85以上。
当サイトのページ読み込み(表示)速度が85以上[PageSpeed Insights]獲得するのに役立ったプラグイン(及び設定)と.htaccessの追加コードを公開します。

[PageSpeed Insights]表示速度の評価は3段階

[PageSpeed Insights]で表示速度は数字(スコア)で表示される。
そして、その数字(スコア)のGoogleの評価は以下の3段階ある。

評価と数字(スコア)の関係は、私が管理するサイトを複数調べて類推してみた。

Good:80~(緑色)
Medium:61~80未満(オレンジ色)
Low:60以下(赤色)

Good、Medium、Lowの意味は恐らく以下と考える。

Good:サイトのページ読み込み(表示)が速い
Medium:サイトのページ読み込み(表示)が普通
Low:サイトのページ読み込み(表示)が遅い

今回のモバイルページのスピードアップデートでは「ページ表示速度が極端に遅い」ページが対象になるので、スコア60未満のLowが対象だろう。

Googleは「ページの表示スピードが遅くなればなるほど評価が下がる」とアナウンスしている。

即ち、表示速度が遅いと検索結果の順位が下げられる、ということだ。

モバイルページでは最低でもMediumの評価を獲得し、目指すべきは85以上を目指したい。(パソコンページはもちろん85以上)
※「85以上」についてはそう主張する記事が散見した為。

では、どうすればページ読み込み(表示)速度を85以上を獲得できるのか?

「最適化についての提案」が意味不明

[PageSpeed Insights]では、サイトのページ読み込み(表示)スコア改善の為の対策が記載されている。
当サイトでは以下だった。

【最適化についての提案】
①圧縮を有効にする
②ブラウザのキャッシュを活用する
③画像を最適化する
④スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
⑤サーバーの応答時間を短縮する
⑥CSS を縮小する
⑦JavaScript を縮小する
⑧HTML を縮小する

各項目の「修正方法を表示」には具体的に何をすべきかの記載がある。
但し、これを読んでも意味が全く理解できなかった。
・レンタリングをブロック
・画像を最適化
・CSS を縮小
・JavaScript/CSS を排除
・HTML を縮小
・etc

そこで、私が簡単に出来る対策をネットで調べ、試したところスコアアップにつながったプラグイン、.htaccessに追加した内容を次に紹介します。

サイトのページ読み込み(表示)速度に役立つプラグイン

③画像を最適化する→EWWW Image Optimizer
⑥CSS を縮小する→Autoptimize
⑦JavaScript を縮小する→Autoptimize
⑧HTML を縮小する→Autoptimize

「EWWW Image Optimizer」はCMS上で使っている画像を一括で最適化してくれるプラグインだ。

「Autoptimize」はHTML、CSS、JavaScriptの3つを最適化してくるプラグイン。「縮小」ではなく「最適化」だが、これを入れると「HTML を縮小する」の項目は必ず消える。

尚、スコアは改善されるが、「最適化についての提案」には、依然と以下の項目が表示されることが多い。
③画像を最適化する、
⑥CSS を縮小する
⑦JavaScript を縮小する
⑧HTML を縮小する

プラグインはざっくりと最適化や縮小をしてくれるが100%でないということだろう。
これらの項目を消すには個別に対処しなくてはいけないが、それには知識と労力、時間がかかる。

そこまでしなくてもスコア85以上は獲得できる。

サイトのページ読み込み(表示)速度が遅くなるプラグイン

サイトのページ読み込み(表示)速度に貢献するプラグインがある一方、逆に足を引っ張るプラグインもある。

どのプラグインがサイトのページ読み込み(表示)速度を遅くしているか、その負荷を調べるプラグインがP3(Plugin Performance Profiler)。

負荷が高いプラグインは設定を変えるか、他のプラグインに変える、あるいは使用を停止べきだ。

●Head cleaner
「Head cleaner」はCSSとJavaScriptを最適化してくれるプラグインだ。
「最適化についての提案」では以下の項目に該当する。
⑥CSS を縮小する
⑦JavaScript を縮小する

ところが重大なデメリットがある。
それは、大量のキャッシュデータを吐き出すこと。

エックスサーバーで総ファイル数がサーバーが快適に動く範囲を超えた時に提案されたのが、Head cleanerキャッシュデータのデータ。
ところが、FTPソフトWinSCPでは途中でフリーズするくらい膨大なキャッシュファイルがあった。

しかし、この記事を作成中に改めて調べてみたら、このキャッシュが大量に生成する理由はWordPressPopularPostsにあった模様。

「別にHead Cleanerが悪いというわけではありません。
Head CleanerとWordPress Popular Postsを併用する場合は、Head Cleanerの設定でWordPressPopularPostsを対象外に設定していればこんなことにはならなかったはずなのです。」
※引用:WordPressのプラグインHead Cleanerのキャッシュが大きくなりすぎて消せなくなった

「Head cleaner」の設定及び、WordPressPopularPostsを対象外にする設定については、以下の記事に詳しい。
※参照:Head Cleaner の最も理想的な設定方法

「Head cleaner」は使えない!と思っていたが、認識を改めねば。

「Head cleaner」についてのキャッシュデータ及びサイトのページ読み込み(表示)速度の改善度については、別のサイトで検証の予定です。

●WordPress Popular Posts
WordPress Popular Postsは人気記事を表示できるプラグインだ。
しかし、P3(Plugin Performance Profiler)で調べると負荷が高い。

エックスサーバーによると以下の様に設定を変更すると良いという。

■推奨設定について
当サービスでは、コンテンツ表示速度の向上や、
サーバーに対する負荷の軽減が見込める以下の設定を推奨いたします。

【WPPキャッシュ期限ポリシー】 ・・・「キャッシュする」を選択
【キャッシュ更新間隔】・・・・・・・「1時間」以上を指定
【データサンプリング】・・・・・・・「有効」を選択

※引用:WordPressプラグイン「WordPress Popular Posts」の仕様変更に伴うコンテンツ表示速度の低下と改善方法に関するご案内

設定はWordPress Popular Postsの「設定」→「ツール」から変更できる。
私は上記以外に「ログ上限」も変更した。

サイトのページ読み込み(表示)速度改善に役立つ.htaccessの追加コード

以下の対策をするため、.htaccessにコードを追加した。
①圧縮を有効にする
②ブラウザのキャッシュを活用する

これは先日、記事にしたが、コードのみ記載する。

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
</IfModule>

※詳しくは⇒「PageSpeed Insights」の使い方~ページの表示速度を改善する方法(1)

【追記】
記事作成時点ではこの情報しか見つけられなかったが、その後、.htaccessにコードを追加しなくてもWP Fastest Cacheというプラグインを使うと、それ以上のスコア改善がみられた。
.htaccessを直接編集すると404エラーを引き起こす可能性もあるので、WP Fastest Cacheの導入をオススメします。WP Fastest Cacheの設定方法と使い方

取った対策でスコアはどう変わったか?

以下に実際に取った対策とその後のスコアを記します。

【ページ表示速度】
まず、対策前のスコアは以下の通り。
・パソコン:63
・モバイル:78

【取った施策(1)】
①圧縮を有効にする→.htaccess
②ブラウザのキャッシュを活用する→なし
③画像を最適化する→EWWW Image Optimizer
④スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する→なし
⑤サーバーの応答時間を短縮する→エックスサーバーのサーバーパネルでmod_pagespeed設定(高速化Speeding Up)をONに。※これについては後述します。
⑥CSS を縮小する→Autoptimize
⑦JavaScript を縮小する→Autoptimize
⑧HTML を縮小する→Autoptimize

【ページ表示速度】
・パソコン:63→82(+19)
・モバイル:78→82(+4)

何とパソコンのスコアが19もアップ。
パソコン、モバイルページともGoodに。

【取った施策(2)】
②ブラウザのキャッシュを活用する→.htaccess

【ページ表示速度(2)】
・パソコン:63→82(+19)→84(+2)
・モバイル:78→82(+4)→87(+5)

さらにスコアアップ。
モバイルページは85を突破。

ページ読み込み(表示)速度を85モバイル

【取った施策(3)】
「修正方法を表示」をクリックすると、「レンダリングをブロックする JavaScript を除去してください」として「~pagespeed.jm~」というjsファイルが記載されていた。

これは恐らく、高速化の為にONにした拡張モジュール「mod_pagespeed」のことだと考え、設定をOFFに切り替えてみる。
その結果、ページ表示速度は以下になった。

【ページ表示速度(3)】
・パソコン:63→82(+19)→84(+2)→85(+1)
・モバイル:78→82(+4)→87(+5)→87

モバイルはスコア変わらず、パソコンは+1で、パソコンも85をクリア。

ページ読み込み(表示)速度を85パソコン

レンダリングをブロックする JavaScriptから「~pagespeed.jm~」というjsファイルは消えたが、別のjsファイルが表示されている。

サーバーの高速化設定は必要か?

当サイトが利用しているレンタルサーバーはエックスサーバーだが、サーバーパネルに「高速化Speeding Up」の項目があり「mod_pagespeed設定」が出来る。

拡張モジュール「mod_pagespeed」を使用することにより
Webサイトのコンテンツを最適化し、表示速度の向上および転送量の軽減を図ります。

onにした方が良いのか、OFFで良いのか、これについてはさらなる検証が必要なようだ。

[PageSpeed Insights]のスコアは変動する

サイトのページ読み込み(表示)速度は、Googleの[PageSpeed Insights]にURLを入力すると調べられる。

新たにプラグインをインストールした等、何かの対策をした場合は30秒以上置いて再度、「分析」をクリックする。

そして、同じ設定でも「分析」する度にスコアは変動する。

これはサーバーの環境に依存しているのかもしれない。
通常レンタルサーバーは共用サーバーなので、複数の人が同じサーバーを使うことになる。
他の人のサイトがサーバーに負荷をかけていると、その影響は自分のサイトにも及ぶ。

その点、レンタルサーバー選びも今後は重要になって来る。
これに関する検証はまだ行っていないが、私が使ったことのあるレンタルサーバーの比較記事はこちら→レンタルサーバー比較~おすすめのレンタルサーバーは?

スポンサードリンク

SEOの関連記事

コメントは受け付けていません。

サブコンテンツ

このページの先頭へ