先日、GoogleがSpeed Update導入に関して言及し、SEO界隈で話題になりました。

Googleによると「本当に遅い」サイトのみが影響するとのことですが、ユーザビリティの観点からもページの読み込み速度は注力して改善すべきポイントのひとつです。

Googleの調査によると「モバイルサイトでは読み込みに3秒以上かかるサイトは53%のユーザーがサイトを離脱する」という結果も出ています。

では、サイトの読み込み速度はどこから改善すれば良いのでしょうか?
今回の記事では、Google アナリティクスを使って改善点を探す方法を紹介します。

参考:
【訂正記事】Google Speed Updateで影響を受けるのは本当に遅いページだけ、スピード改善が段階的に評価されるのは影響を受けた場合
Find out how you stack up to new industry benchmarks for mobile page speed

※サイトの速度レポートは、サンプリングがかかったデータで算出しているため、サイトでの実績値ではなくあくまでも予測値です。参考値として捉えるようにしつつ、気になるようであればサンプリングレートを上げるための実装を追加しましょう。 参考: [サンプリングに関する注意事項](https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings):blank

サイトの表示速度の調べ方

サイトの表示速度を調べる時には、Googleが提供する「Page Speed Insights」を使うのが一般的ではないでしょうか。

参考:
ホームページの表示速度の分析が瞬時にできる!PageSpeed Insightsの使い方

実は、Google アナリティクスにも「サイトの速度」レポートがあり、サイトの改善点を発見できるようになっています。

img.jpg

このレポートを活用すれば、読み込みの遅いページを見つけたり、改善施策を取った後の効果測定ができます。では、レポートから何がわかるのか具体的に解説していきます。

「概要」レポート

「概要」レポートは、サイト全体のパフォーマンスが表示されるレポートです。

IMG_0097.JPG

「平均読み込み時間」や「サーバーの平均応答時間」など、どのタイミングでボトルネックが発生しているかを確認できます。

ブラウザごとの平均読み込み時間なども表示されるので、自サイトのブラウザシェアと照らし合わせながら、問題がないか確認しましょう。

「ページ速度」レポート

ページごとに読み込み速度などを確認したい場合は、「ページ速度」レポートを使います。
赤く表示されているのが、サイト全体の平均よりも読み込みが遅いページです。

写真_2018-07-06_16_14_12.jpg

サイトの開発担当者は、平均ドキュメントインタラクティブ時間、平均ドキュメントコンテンツ読み込み時間なども確認して、コーディングの改善などに取り組んでみましょう。

「分布」表示にすると、どの項目がどのくらいの割合かを把握できます。

https://ferret.akamaized.net/images/5b3f2ab8fafbd820fc00000b/original.JPG?1530866360

「平均」は異常値などに引っ張られてしまい、必ずしもサイトの正しいパフォーマンスを反映しない場合があります。そのため、この「分布」も確認しておきましょう。

「速度についての提案」レポート

ページごとに、「PageSpeedの提案」と「 PageSpeedスコア」が表示されます。これはPage Speed Insightsの結果です。(動的コンテンツが表示されるページでは、PageSpeed Insightsの表示と若干ずれる場合があります)

IMG_0096.JPG

「合計●個」のリンクをクリックすることで、ページごとにPage Speed Insightsの結果を確認することができます。

ページの改善優先度を決める上での参考になるでしょう。

カスタム速度レポート

このレポートでは、特定の画像や動画など、ページ上の要素のパフォーマンスを分析できます。
このレポートにデータを表示するためには、通常の計測タグと別に、読み込みや経過時間を計測する実装が必要になります。

参考:
カスタム速度

改善すべきページを見つけよう

多く見られていて直帰率が高いページから優先して、読み込み時間を確認し改善していくべきでしょう。

ページ速度」レポートを表示し、プライマリディメンションを「その他」から「ランディングページ」に変更します。
写真_2018-07-06_16_21_39.png

変更したら、「直帰率」をクリックし、直帰率が高い順に並び替えます。
写真_2018-07-06_16_24_00.png

直帰率だけで並び替えると、ページビュー数が少ないページが上位に表示されるはずです。これに「ページビュー数がある程度多いページ」という条件を加味するために、「並び替えの種類」を「加重」に変更します。
写真_2018-07-06_16_25_17.png

これで「直帰率が高く、ページビュー数が比較的多いページ」に並び替えられました。
この状態で平均読み込み時間を確認し、改善すべきページを見つけていきます。

キャプチャ.JPG

https://ferret-plus.com/7815」というページは読み込みに10秒近くかかっているようです。そこでページを開いてみると、画像が多い記事なのが気になります。

そこで、記事内の画像を画像圧縮ツールを使って圧縮してみました。

圧縮した前後を比較すると、画像が読み込まれる「ドキュメントインタラクティブ」にかかっている時間が54%改善されていることが分かります。

キャプチャ2.JPG

他にも、開発チームと連携して技術的な面を見直すことで、さらにページの速度改善が見込めるでしょう。

まとめ

1. 概要レポートで、サイト全体の読み込み状況とボトルネックを把握する
2. ページ速度レポートで、特にパフォーマンスの悪いページを探す
3. ページ速度レポートで、ページビュー数の多いページのパフォーマンスを確認する
4. 速度についての提案レポートで、具体的な改善ポイントと改善の優先順位を確認する

この流れで、Google アナリティクスでページの読み込み速度の改善ポイントを発見できます。

また、MFIなどモバイルサイトのパフォーマンスが重要視されています。セグメントを使ってPCサイトとモバイルサイトに切り分けて確認しましょう。

ユーザーに不満を与えず、Googleの評価にも影響を与えないよう、サイトの改善に取り組んでみましょう。