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

ヘッダ画像

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

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

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

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

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

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

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

PCでの動作確認

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

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

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

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

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

本サイトの旧テーマでの結果ですが、お世辞にも早いとは言えません・・・

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

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

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

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

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

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

javascript:(function(){%20var%20d=document;%20var%20s=d.createElement('scr'+'ipt');%20s.charset='UTF-8';%20s.language='javascr'+'ipt';%20s.type='text/javascr'+'ipt';%20s.src='//web-tan.forum.impressrd.jp/tools/pagespeedtiming/pagesppedtiming.js?t='+(new%20Date()).getTime();%20d.getElementsByTagName('head')[0].appendChild(s);%20})();

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

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

手順1

ブックマーク名を入力

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

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

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

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

測定結果

測定結果

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

コメントを残す

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

関連記事

「トップに戻る」ボタンでスマホでのユーザビリティアップ!

ウェブサイト上でコンテンツを下にスクロールさせると「トップに戻る」ボタンが出現して、クリックするとビ […]

メールフォームプロCGIをWordPressに設置

WordPressのフォームについて、定番のContact Form7をはじめ、いろいろとプラグイン […]

WordPressで現在のページ表示に使用しているテンプレートをすべて知る

WordPressでは、投稿タイプに応じてデフォルトの構成テンプレートが適用されます。 ただし、プラ […]

マルチサイト構築方法まとめ

WordPressバージョン3.0以降に搭載されたマルチサイト機能の構築方法についてまとめます。 マ […]