PageSpeed Insightsの評価が劇的に改善したある方法とは?

ノウハウ

モバイルでPageSpeed Insights の評価がボロボロ

モバイルでのスピード変化の一例

今回はワードプレスの話です。
アメブロだけの方は関係ないですが参考までに。

まずは次の結果をご覧ください。
ある1点を変更したらこうなりました!

私がやった手法についてお話します。

 

モバイルサイトでの速度は差別化に重要!

Google社が検索ランキングで重視するポイントの一つにモバイルサイトとしてのスピードがあります。上記のグラフデータは、グーグルの提供しているサイトの一つである「ページスピードインサイト」で計測したものです。

URLを入力するだけでモバイルとパソコンのスピードを計測できます。
しかも改善項目も示されるというスグレもの。

 

「完全に表示されるまでに3秒以上かかると、53%のユーザーはページを離れる」

2018年2月にGoogleが発表したデータですが
モバイルサイトのLPでは平均して15秒かかるそうです。

これでも1年前公表のデータよりも7秒短縮されていました。

モバイルからインターネットを利用している通信が
全体の半分以上を占めるのに、明らかにサイトの反応が遅いといいます。

 

キャッシュもいろいろ

同じデータを複数回読み込まないことで
高速化を図る「キャッシュ」という仕組みがあります。

でも一言でキャッシュといっても、どの部分のデータをキャッシュするかによって、いろいろ種類があるんです。コンピューター内部にも同様の仕組みがあり高速化に貢献しています。ブログをやっていてコントロールできるのは、ソフトウェア上の仕組みの方です。

・ブラウザキャッシュ:インターネットブラウザでキャッシュを有効化するもの

・ページキャッシュ:ワードプレスが表示する一連の情報をまとめてキャッシュする

・サーバーキャッシュ:契約しているサーバー側のキャッシュ機能

・CDNサービス:画像のキャッシュを専用のサーバー上に置くもの

※他にもあるようですが、私の理解が正直追い付いてません

技術的な面はともかく、設定可能な組み合わせをいろいろ試してみて
先ほどの「ページスピードインサイト」で点数を確認するという手法を使いました。

ちなみに評価されたページの点数より下の部分には
どんな点がまずいのか等のヒントになる記載もあります。
※かなり長いので割愛しました

サーバーキャッシュは、サーバーの設定だけの問題ですが
それ以外はプラグインの追加(有効化)/削除(停止)で
パフォーマンスが変わります。

ひとつずつ設定を変えては、エラーが出るか、不具合があるかを確認します。
もしあれば停止させて元に戻るか検証していくことになります。

 

試したプラグインの例

ワードプレスでは、追加の機能を
プラグインと呼び、任意に導入することができます。

私があれこれ試したのは次のものでした。

・キャッシュの最適化を行う「Autoptimize」

Autoptimizeと連携する「Async JavaScript」

・シンプルな設定の「Cache Enabler」

・あちこちで高評価だったキャッシュプラグイン
WP Fastest Cache」「WP Super Cache」「W3 Total Cache」

・画像を遅延読込させるプラグイン
BJ Lazy Load」「a3 Lazy Load」

他にもあったかもしれません。
記憶に残っているだけでも、これだけあります。

各プラグインにも設定項目があります。
多いもので数画面にわたって設定するケースも。

用語もかなり専門的ですし
日本語化されていないものもありました。

 

一つのプラグインだけでも
設定を変えて何回も動作確認が必要です。

複数を同時に使うときは
相性問題も発生する可能性があることを
念頭に置かなくてはなりません。

ネット上でヒントを探し回りました。

 

不具合が発生したら元に戻すこと

自分のサイトで実験したところ、最高値(100点)をたたき出したのは

Autoptimize
+Async JavaScript
+Cache Enabler  
という組み合わせでした。

 

このときのトップページは複数の画面が切り替わる
プログラム(Java Script)が動くものでした。

メッセージをイロイロ伝えるのに
画面が動くと無意識に見ていただけるかもしれない。

そんな期待もあって、このテーマの機能を使っていたのです。

 

数日後なんとなくスマホで確認したら、ナント画面が固まっている!

最高の点数だったのに・・。

試しにCache Enablerを停止したところ
画面が動き出しました。

 

数日たって再度オンにしたところ
またいつの間にか表示が乱れてしまう。

いろいろパターンを試したのですが
おかしくなる条件がどうしても見つけられない。

そこで、もうダメと断念することにしました。

点数はこんな感じ。

もともとより1.5倍!でも100点満点ですからね。
けっこうガッカリしました。これ以上はダメなのか・・。

 

写真の大きさも問題

ブログは文章メインですが
トップページを見る限り写真が目立ちます。

文章と写真でセットになっていますよね。
小さい写真をサムネイルといい、本来の写真データを縮小したものです。

でもオリジナルデータが大きすぎれば
サムネイルだって相当大きいかもしれない。

そこでもともとの写真データを縮小させることにしました。
Webに表示させるのが目的なら
もっと小さいデータ量で充分なのです。

iPhoneで撮影すると数メガになりますが
1/10で十分なくらい。

場所によっては1/100でもOKだったりします。

こちらは写真をサーバーにアップすると
自動的に画像縮小してくれるプラグインを使うことにしました。

Compress JPEG & PNG images
使い勝手がよくて今でも使っています。

 

ちなみに上記の「ページスピードインサイト」の結果は
このプラグインを適用した後の数値なのです。

これを使わない時は、4~5点くらいだったのです。
ヤバイでしょ?

 

劇的な改善方法とは「これ」を変更することだった

ワードプレスのWEB上のデザインを「テーマ」と呼びます。
これを思い切って変更したのです。

変更前は、「Angel」(TCD)※有料テーマ

変更後は、「Cocoon」(作者:わいひらさん)※無料テーマ
入手先は https://wp-cocoon.com/downloads/

 

Angelはいいテーマだったと思います。
いろいろ機能も豊富でしたし。

ただ記事数が増えてきたあたりから
急に重くなった印象があったのです。

 

テーマの変更自体は、両方のテーマを
インストールした状態で切り替えるだけ。

テーマを変更すると設定箇所がいっぱいです。
でもこればかりは仕方ありませんね。

でもその中に、キャッシュも画像遅延もあります。
プラグインでなくテーマ本体にその機能があったのです。

無料でこのパフォーマンスは
スゴイとしかいいようがありません。

作者さんには心から感謝!

 

ps.

実はこの後が大変でした。

All In One SEO Packという便利なプラグインに
入力していた情報が引き継がれないことが分かったのです。

SEO対策として各記事に設定していた内容です。
だから全ての記事のその部分のコピーをとり、新しい場所に移しました。

Cocoonではこのツールで提供している機能をほとんど自前で備えています。
したがってこのプラグインがなくてもOKになったのです。

 

「使わないプラグインは削除する」

これが安定動作には欠かせないといいます。

複数の機能を持つ便利系プラグインは大きいプログラムなので
削除すると負荷も軽くなるんでしょうね。

 

 

最後までお読みいただきありがとうございます。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
ノウハウ
スポンサーリンク
じぶん・オンライン