PageSpeed Insightsのスコアが満足できるようになった方法

ノウハウ

モバイルでの表示スピードを大幅に改善するには

今回は技術的な話題です。SEOとしては無視できない重要なポイントの一つであるサイトのスピードについて取り上げます。ワードプレスの方以外にも考えてほしい内容です。

以前、WEBサイトの表示スピードを改善するためにワードプレスのテーマを変更した話を書きました。

PageSpeed Insightsの評価が劇的に改善したある方法とは?
サイトのスピードアップに成功した私の方法について。いろいろなキャッシュに関するプラグインを試したところ、効果的なものもありましたが不具合が発生し、大幅な向上は断念せざるを得ませんでした。しかし全く違うアプローチが劇的な効果を生んだのです。

100点満点中なんと1ケタ代という数字だった評価が、74点という数字に改善された件を取り上げています。今回は、その後日談という位置付けです。アメブロでも興味深いデータが取れましたので合わせてお話します。

 

ショック!指標が半分程度に

実はこの表示スピードの指標「PageSpeed Insights」に関しては、前回の内容で十分満足していました。なにせ一番ひどい状態からだと10倍以上のスコアを出していましたからね。ですので、数カ月もこの手のテストをしていなかったのです。

ところが先日、たまたま思い付きでテストをしてみたところ、なんと半分程度まで低下していたのです。もっともアドセンス広告を試していたこともあり、若干パフォーマンスが下がるのは予想していました。でもまさか30点台とは・・。

ギクシャクではないけれど、なんとなくスムーズさを欠いていた気はしていたのですが、数字を見て驚きました。それで再度対策を練ることにしたのです。

 

高速化の仕組みを内蔵するテーマは使い勝手がいい

採用しているテーマのCocoon(コクーン)には高速化の仕組みがすでに組み込まれています。ですので高速化のためのプラグインを導入することなく、一定の高速化は可能になっています。

当然、私の場合もそれらのスイッチをON(有効化)にしたことで大きく改善を果たしていたのでした。前回とこの部分は変えていませんから、まずはそれ以外の改善点がないか探ります。導入済プラグインの数も少ないため、それらの相性問題は少ないはずでした。

写真を見直したが大きな変化なし

で、まずやったのは写真データの見直し。

さほど多くはないですが、スマホで撮影した写真データを多少解像度を下げて使っているところもありました。以前のテーマから乗り換えていることもあり、ここで画像データの一括見直しを行いました。具体的には、画像データの縮小化です。

プラグインの導入で一括で処理可能です。終わったらそのプラグインを無効化・削除すればいい。数百枚の写真データがありましたが、10分かからない程度で処理が完了しました。

しかしスコアは2~3ポイント程度の改善しかなかったのです。
使用したプラグインは「EWWW Image Optimizer」でした。

 

キャッシュプラグインの見直し

プラグインの機能を使うなら、テーマで用意している同じ内容の高速化設定はオフにするのが正しい使い方です。キャッシュ関係で重複するとエライことが起きることがあるからです。例えばエラー表示が出るならまだいいのです。画面に何も表示されなくなったり、管理画面すら表示されなくなると修復しようがありません。実はかなり怖い設定なのです。

それまで使っていたのはWP Fastest Cacheというプラグイン。Cocoonの作者も自身のサポートサイトで推奨していました。となると、テーマで用意している仕組みではできない部分をカバーしていたのだと思います。

あらためてCocoonのサイトをみたら、推奨プラグインが追加されていました。それでも機能的に大差なければ変更しなくてもいいかな・・と思ったのですが、この新たに推奨されたプラグインW3 Total Cacheではキャッシュをスマホ用にも作成できるということでした。

キャッシュの説明は以前の記事にしてますから割愛しますが、今までパソコンでもスマホでも同じキャッシュを利用していたことになります。小さいスマホでパソコン用の画面をキャッシュしても意味がありません。別に利用できた方がいいのは明らかでした。

ただ、このプラグインは導入経験があったのです。きめ細かい設定できることが災いして、自分ではうまく扱えなかったのでした。トップページで写真が次々と移り変わる仕掛けがあるのですが、それが固まってしまうのですね。テーマの持つプログラムに干渉したということになります。

 

W3 Total Cacheでの干渉問題

実際に導入してみると、PageSpeed Insightsのスコアは100点近い数字をたたき出しました。思わず歓声をあげたのですけれど、動作チェックを繰り返しているうちに大変なことに気が付きました。スマホでは一切表示されなくなったのです。「白く表示される」という現象でした。

スマホからのアクセスを無視することはできません。パソコンよりも多いはずですから。これを解決できないかぎり導入をあきらめるしかないのです。必死にネットで情報を探すとようやくヒントを見つけることができました。

干渉していたのは、データーベース・キャッシュというところ。これをオフにするとスマホでも表示されるようになったのですね。スコアはガクンと落ちてモバイルでは80点前後に。でもパソコンでは100点前後でしたから、もうこれで決定ということにしました。

最後に測定した結果はこちらです。大満足!

 

アメブロではどうか

同じテストをアメブロサイトでもやってみました。

非力な私のパソコンのせいかもしれませんが、広告表示でギクシャクしている印象なんですね。画面が揺れる感じというのかな。
ブラウザもずっと砂時計が回って、何か仕事しているようです。なんとも居心地が悪く感じられます。

こんな感じでモバイルのスピードが低く、しかもアメブロの傘下のドメイン(サブドメイン)になります。どうしてもSEO的に弱いというのも理解できますね。

しかもアメブロでは今回やったようなプラグインなどを活用して高速化する方法はないわけです。
有料にして広告を非表示にすることはできますが。

そう考えると、ワードプレスの方が発展性があるのは明らかです。
必要に応じていろんな機能が追加できるのはやはりいいですね。

・こうしたことを楽しいと思うか、面倒と思うか
・有料と無料というコストとパフォーマンスのバランスをどう考えるか
というところが判断のポイントですね。

私としては「いいところを生かす」ことを考えるのが一番だと思っています。

 

 

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

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