【WordPress】 表示速度アップでUX改善 簡単プラグイン導入

サイトのUXにおいて、ページ表示速度は最もわかりやすい指標です。
当然ながら、表示まで時間がかかればかかるほど、それに比例して離脱率もアップします。

モバイルページにおいて、Googleが以下のようなデータを提示しています。

  • アクセスの53%が読み込みに3秒以上かかる
  • 23%のサイトが4MB以上のデータ量
  • モバイルサイトの大部分は依然として低速

Google / Find out how you stack up to new industry benchmarks for mobile page speed

要するに「早いは正義」ということですね。

また、こちらでは「モバイル検索ランキングでページ速度を使用する」とあります。
今後さらにページ速度(特にモバイルにおいて)の改善が重要になってきます。

今日はそんなスピードアップについて、簡単に対策できるおすすめプラグインを紹介します。

主な表示速度測定ツール

今回は上記2つのツールを使用してみました。
どちらもGoogleが提供しているサービスとなります。

それぞれの違いについて、ざっくりですが

Page speed Insights自サイトの内容だけを見て判定を行う
TestMySite自サイトの計測に加えて回線速度や他サイトなどを判断基準に測定を行う

といった違いがあります。
いずれにしてもGoogleがツールを公開しているということは、ページ表示速度がSEO等にとっていかに重要かを物語っています。

計測してみた

記事数もまだ少ないので、あまり意味がないかもしれませんが、目安ということで計測してみました。

まずはPageSpeed Insights

モバイル52点、デスクトップ95点。あまり対策していないでこんな感じでしょうか。特にデスクトップは高得点でした。

続いてTest my site

ぐはっ。「遅い」ってどういうことでしょうか。
実機での表示はかなり早いのですが…。

いろいろ調べてみると、「PageSpeed Insights」や「Test my site」は計測が米国から行われているため、日本のサイトに関しては信頼できる数値ではないとのこと。あくまでも目安ですね。

ただ、基準にはなるのでこれら測定結果を見ながら対策を施していくのは間違いではないと思います。

表示速度向上に役立つプラグイン

では、簡単に対策できそうなところから始めていきます。

EWWW Image Optimizer

EWWW Image Optimizer

WordPress内の画像のファイルサイズを縮小します。
アップロード時に自動圧縮されます。また、すでにアップ済みの画像に対しても圧縮することができます。

主な設定は以下の2点。それぞれを有効にします。

〈設定〉ベーシック→メタデータを削除

画像のメタデータを削除してファイルサイズを小さくします。

〈設定〉変換→コンバージョンリンクを非表示

jpg、pngなど画像形式を勝手に変換しないようにします。

a3 Lazy Load

a3 Lazy Load

名前の通り、画像を遅延読み込みするためのプラグインです。
追加で必要な設定は特にありません。インストール後、すぐにタグが遅延読み込みされます。
あとは好みでLoading Effectを「Fade in」にするぐらいでしょうか。

プラグイン対策後

付け焼き刃程度ですが上記対策を施した後に、再度計測してみました。
結果は…

PageSpeed Insightsは多少改善が見られました。
モバイルは52点→63点に! デスクトップはあまり変わらず。(もともと高得点だったので、こんなもんでしょう)

Test my siteには相変わらず「遅い」と言われています。

まとめ

以上は本当に簡単な部分です。
他にも、地味ですがコード量の削減、プラグインの見直し、画像をcssに置き換える、などできることはたくさんあります。

モバイルフレンドリーなサイト目指してさらなる情報収集、改善を図っていきたいと思います。

最新記事