スマホサイトの表示速度を実機でチェックする方法

PCサイトの表示速度は重要なランキング要素としてGoogleのアルゴリズムに含まれていますが、今はスマホのランキングには直接影響を与えていません。
しかし、公式にアナウンスされているとおり、携帯端末でのページ表示速度は近い将来モバイルSEOの重要なファクターとなります。
ページ表示速度チェックは改善案付きで示してくれるGoogle DevelopersのPageSpeed Insightsがありますが、今回はちょっと視点を変えて感覚的にも把握しやすい実際のスマホのブラウザと回線を使ったチェック方法を紹介します。

検索結果の「Slow to load」ラベル

Googleではモバイルでの表示速度が遅いサイトの検索結果に「Slow to load」なる表示のテストを行っています。

ビックリマーク付きの「Slow to load」ラベル

ビックリマーク付きの「Slow to load」ラベル

実際に導入されるかどうかは不明ですが、こんなラベルを付けられた日にはCTR(クリック率)は絶望的に下がりますね。

ウェブサイトの表示スピードチェックができるブックマークレット

PCでの動作確認

今回は下記のブックマークレットを使用します。
まずは実際にブックマークしてPCでの表示速度チェックをしてみましょう。

「あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット」

ページを開いた状態で実行することで現環境下での表示速度を計測して判定してくれます。
また、リクエストのどの部分で時間が掛っているかも確認することができます。
詳しくはブックマークレットの提供先をご覧いただくとして、実際に計測すると下記のような形で結果が表示されます。

PCでのテスト結果

PCでのテスト結果

本サイトもお世辞にも早いとは言えません・・・

スマホ(アンドロイド端末)で表示速度をチェックする

それではこのブックマークレットを応用してスマホ実機で計測してみましょう。
基本的にはスマートフォンブラウザではブックマークレットは実行できませんので、以下の手順に沿ってください。
標準ブラウザではなく、Google Choromeを使いますので、インストールされていない方はご用意ください。

スマホでChoromeブラウザを開きます。
とりあえず、何でも構いませんので、ページを表示させてブックマーク登録します。
☆マークを押すと現在のページ情報が入力された登録画面が表示されますので、「名前」の項目に名称を入力、「URL」に下記のスクリプトをコピーします。

ブックマークレット登録方法

ブックマークレット登録方法

スピードチェック用ブックマークレットスクリプト

※名前は何でも構いませんが、ブックマークレットを実行する際に入力しなければなりませんので、例のように数字をつけておくとよいかと思います。

これで準備は完了です。
それではチェックしたいページを表示します。
この状態でブラウザ上部のアドレス部分をタップして入力できる状態にします。

タップでキーボード表示

タップでキーボード表示

ここで登録済みのブックマーク名を入力します。
「0001ページ表示スピードチェック」と名前をつけていますので、0を入力すると候補から選択することができるはずです。

入力候補よりブックマークを選択

入力候補よりブックマークを選択

これでPCと同じくページ表示スピードの計測が行われます。

スマホでのテスト結果

スマホでのテスト結果

一度、ブックマーク登録すれば、LTE・wifi・モバイルルータなどそれぞれの回線でのチェックやライバルサイトとの比較などにも重宝することと思います。
使えるシーンは多くあるはずですので、ぜひ活用ください。

フォローする

WordPressとはなにかもう一度おさらいしてみよう!

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


三 + = 12

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">