Google PageSpeed Insightsでページ表示の速度改善とMFIについて

PSIアイキャッチ

最近巷で話題のモバイルファーストインデックス(MFI)についてのかんたんな解説と、これを機会に、Google PageSpeed Insights(PSI)でスマホのページ表示の速度改善をしてみようと、naeco.jpで実際に試しました。PSIを検討されている方は参考にどうぞ。

モバイルファーストインデックス(MFI)について

Googleがモバイルファーストインデックスを公式に開始すると発表して半年ほど経ちました。内容についてよくご存じない方もいらっしゃると思いますので、まずは公式ブログの引用から。

これまで、Google のクロール、インデックス、ランキング システムでは、主にデスクトップ版のコンテンツが使用されてきました。そのため、その内容がモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性がありました。 モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。

検索結果の提供に使用するインデックスは引き続き 1 つのままです。 メインのインデックスとは別の「モバイル ファースト インデックス」はありません。 歴史的にデスクトップ版のコンテンツがインデックスされてきましたが、今後はモバイル版のコンテンツを使用していきます

引用元)Google ウェブマスター向け公式ブログ

検索エンジンは長らくデスクトップ(パソコン)主体のインデックスと評価がされてきましたが、ここ数年はすこしずつモバイル主体(スマホ)へと移行していました。最終段階がMFIになるのではないでしょうか。

MFIに対応が必要なウェブサイトについてですが、おもに、デスクトップ版とモバイル版のコンテンツに差異があって、(ざっくりいうと)重要なコンテンツをモバイル版から省いている場合です。
カラーミーショップの古めのテンプレートをお使いの場合は、モバイル版ページに重要なコンテンツの不足がないか確認する必要があります。

私たちにとって重要な点は、(ざっくりいうと)レスポンシブ対応しているウェブサイトはMFIの対応不要、ということです。そういうウェブサイトは、Googleからモバイルファーストインデックスが有効になった旨のメールが早くも届きはじめています。

naeco.jpは内容の性質上、パソコンからのアクセスが大部分です。
とはいえ、MFIの進展もあって、モバイルユーザーからのアクセスを意識して、スマホでも読みやすいつくりを意識して行かないといけません。

今後はモバイル版のコンテンツを評価するし、SEOもモバイル向けが最重要になります。

Google PageSpeed Insights (PSI)の重要性

ページの表示速度について、GoogleはSEOの評価基準のひとつとしていることはコメントしています(そのときのコメントをみた個人的な印象はそれほど積極的な印象は受けませんでした)。

とはいえ、あなたがキーワードを検索して、ページを開いた先が異常に遅いウェブサイトだったとしたらどうでしょうか?ページが開き終わるまえに、すぐに離脱するかもしれません。
ネットショップも同様です。ほしい商品にたどり着く前に、お客さまはあきらめてしまうかもしれません。

ページの表示速度は直接的・間接的は別として、SEOにおける重要な改善ポイントになります。

またMFIの観点からは、ユーザーが通信環境のよくないモバイルだったらどうでしょう?
今後はページの表示速度に意識をして、改善する必要がありそうです。

PSIでnaeco.jpの速度評価を見る

naeco.jpのユーザーはモバイルが15%で、コンテンツの性質上、私自身もパソコンユーザー向けにページを作ってきました。
naeco.jpは2年前にPSIで最適化して、80前後に改善しました。時間が経過したことで、どう変化したのか?

前置きは以上として、Google PageSpeed Insightsでトップページの評価をチェックします。

naeco.jpのPSI評価

「ページ速度 Unavailable」は、Chromeユーザーの実測データを使用していて、このページではデータ数が足りていないようです。

PSIの評価はあまりよくないことが分かるレベル(特にモバイル)。
・モバイル Low 51
・パソコン Medium 68

モバイル・パソコンともに改善の余地があるようで、PSIの結果ページには「最適化についての提案」という項目が表示されています(次章にて解説します)。

パソコンの方に「クエリ(origin:https://naeco.jp.)を使用してoriginレポートをご確認ください。」というリンクもありますのでチェックします。
パソコンは「ページ読み込みの中位 3 分の 1 に入る」とふつう評価。

PSIの評価結果

「最適化についての提案」にしたがって対応する

「最適化についての提案」の各項目ごとに、丁寧な解説ページのリンクが張ってあります。すこし難しいかもしれませんが、じっくりと読みます。
「最適化についての提案」は効果の大きい順に表示されます(重要!)。

それでは、PSIの結果ページにあった当サイトへの提案を見ていきます。

・サーバーの応答時間を短縮する

応答時間が遅くなる要因はいくつかありますが、私たちでできることは限られています。一番は性能のよいサーバーに換えることです。
ASP型、モール型のショップサイト(カラーミーショップも含みます)の場合は、私たちでやれることは何もありません。

サーバーの応答時間を短縮する

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

レンダリングをブロックする要因にページ最上部で読み込むJavaScriptなどがあります。ページ表示上、先に読み込む必要のないものにasync、deferを付けます(例<script async src="~">)。
</body>の上あたりに書くことも同じく有効です。

やりすぎると、正しい表示・動作をしなくなるので、動作確認しながら。

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

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

キャッシュの期間が短い場合に、もっと長くするように提案されます。当サイトは見た感じ、改善できそうなものがない。

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

自分で借りているレンタルサーバー上のファイルが対象に挙がっているようなら対応可能です。
.htaccessファイルに、Expires(またはCache-Control)でキャッシュする期間を追加して、サーバーの該当するディレクトリに置きます。ファイルを置いたディレクトリ以外にも、その下にあるサブディレクトリにも影響が出ますので注意。

レンタルサーバーによってキャッシュが利用できる・できないがあります。
また、レンタルサーバーによっては管理画面から設定できる場合があります。

.htaccessの一例

<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 text/x-javascript "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
</ifModule>

・画像を最適化する

PSIの結果ページ下段に「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」というリンクがあり、最適化された画像がダウンロードできます。
画質が荒くならない程度にファイルサイズを縮小してくれます。

WordPressの場合はFTPでアップロードし、以前のファイルを上書きします(メディアからはアップロードしません)。

カラーミーショップの場合はサムネイルのサイズ縮小を提案されますが、カラーミーショップのサーバーで作成しているためできません。

画像を最適化する

最適化を行った結果

2年間でいろいろな箇所をカスタマイズしたので、PSIの評価は大分悪化していました。
「最適化についての提案」をあらためて行って、良好な結果が得られました。

・モバイル Low 51Medium 78(27アップ)
・パソコン Medium 68Good 89(31アップ)

最適化後の結果

最適化後の結果

当サイトでは、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」を調整して大幅に数値アップしました。

当サイトの場合は、一番上に表示される「サーバーの応答時間を短縮する」も影響が大きそうです。場合によってはサーバー移転も検討してみてください。

クエリ(origin:https://naeco.jp.)については、後日PHP5.6モジュール版からPHP7モジュール版に変更すると、FCP(2.1s)DCL(2.1s)からFCP(1.7s)DCL(1.8s)に改善しました(PHP7が高速化に寄与しているようです)。

おわりに

Google PageSpeed Insights 以外では、GTmetrixというページ速度調査サイトがあります。こちらも併せてチェックすると、ページ表示の速度改善が一層見込めます。

Chromeのデベロッパーツール>Networkで、TimeやWaterfallを見て原因を探ります。

WordPressの場合は、プラグインが多いと読み込みが遅くなりますので、減らせないか確認しましょう。
また、EWWW Image Optimizer、Imsanityなどのプラグインを導入して、画像のリサイズを自動で行うと便利です。

カラーミーショップの場合は、画像のリサイズ、JavaScriptの読み込み場所を後ろに下げたりすると、10-20程度改善します。

JavaScriptやキャッシュの作業は、思いもよらぬところに不具合が生じることがありますので、動作確認しながら慎重に行いましょう。

追記)PSIの画面が新しくなったので、のちほど改善点をみなおします。

執筆者

えーじ@naeco.jp この記事を書いた人

メーカー系情報システム部門出身で、第一種情報処理技術者
カラーミー歴10年目/カラーミーショップ公認パートナー。
好きが高じてブログを書いていますが、カラーミーの中の人ではありません。