【ブロガー必見！】ブログの表示速度をたったの3ステップでスマホから瞬時に計測できるようにする方法
どうも。自分のブログの表示速度がちょくちょく気になってしまうコアラ（@hotkoala_）です。
この記事を開いたあなたは僕と同じように自分のWebサイトやブログの表示速度がちょくちょく気になっていませんか。
気になっているのだとしたら、そんなあなたの為に今回は一回設定するだけでスマホからWebサイトやブログの表示速度をサクッと一瞬で計測する方法をご紹介します。
逆に、ページの表示速度なんか意識せず、なんとなくこの記事を開いたというあなたはこれを機に意識することをオススメします。
ここから表示速度に関する基本的な知識を解説しますので、表示速度について再確認したい方はこのまま読み進めてください。
そのあたりの基礎知識はバッチリというあなたは「スマホで表示速度を計測したことありますか？」まで進んで頂いて大丈夫です。
2017.06.08 追記
※この記事は主にiPhoneのユーザーの方向けの記事です。
AndroidのChromeでの設定も想定していましたが設定しても動かない報告を頂きました。
記事公開後にTwitterで仲良くしてくれている(?)優しい牛のおじさん（ホルスタインおじさん）が教えてくれました。
Androidの場合は機種やOSにも依存する可能性があるので、一概に設定できないとは言えませんが、設定できない可能性がある点をご理解いただいた上でお試しください。
牛のおじさんの様に既に設定を試したけど動かなかったという方は申し訳ありません。
目次
「ページ表示速度」について知っておきたい基本情報
ここではページ速度の重要性に関する基本的な知識を説明します。
早く本題をという方はこちら。
サイトやブログの表示速度が重要な理由
Web界隈では「表示までに3秒かかったら離脱される」というのは割と有名な話ですね。
詳細に調査はしていませんが、これに関しては随分前からある情報です。
確認したもので2014年頃の記事からありました。
現在ではデータの通信速度の向上やユーザーのインターネット利用が恒常化しているので、ユーザーもますます速度には敏感になっていると思います。無意識のレベルで。
要するに表示に3秒以上の時間がかかっているページは機会損失をしてしまっている可能性が高いので、非常にもったいないです。
今回紹介する方法でスマホから表示速度を確認できるので、是非ともあなたのWebサイトやブログの表示速度改善の改善に役立ててみてください。
ちなみにモバイルサイトの表示速度と離脱率の関係についてはGoogleの公式ブログでも下記のように言及されています。
モバイル サイトの読み込み時間が 5 秒を超えると利用をやめるユーザーが平均 74% に上りますが、モバイル ページの読み込み時間はまだ平均 6～10 秒もかかっています（Kinsta 調べ）。また Aberdeen Group の調査によれば、ページの読み込みが 1 秒遅くなるごとに、ユーザーの満足度は 16%、ページ ビュー数は 11% 低下します。モバイルページの処理速度を上げてリピート利用を促進しようより引用
表示速度が重要な理由がもう１つあります。
それがSEO。つまり検索エンジン最適化です。
Webサイトやブログの「表示速度」はGoogleが検索結果の順位を決める１つの指標になっていて、Googleは2012年の時点で公式にこれを発表しています。
もしサイトが本当に、本当に遅かったとしたら、ページのスピードをランキング要因に実際に使うと今までに言ってきた。したがって、それ以外のすべての条件が同じだったとしたら、確かにランキングが低くなることがある。モバイル検索の上位表示にページ速度はどのくらい重要なのかより引用
詳しく気になる方は「表示速度 SEO」とかで検索してもらえればいろいろと情報が出てくると思います。そこまで説明してしまうともの凄く長い記事になるのでこの記事では割愛します。
※ちなみにyahooもgoogleの検索順位を使っているよ！
さらに、スマホでの表示速度が最も重要な理由
さて、ここまで読み進めて頂いたあなたならWebサイトやブログの表示速度が重要な理由がわかっているかと思います。
では、スマホとPCのどちらの表示速度の方が重要だと思いますか。
当然、スマホですよね。
先ほど引用したGoogleの公式ブログの記事にも説明がありましたが、インターネットユーザーの60%はスマートフォンからアクセスしているので、PCよりも多くなっています。
このブログに関してもPCとスマホは1:2ぐらいでスマホから見に来ている人が多いです。
今やスマートフォンでのインターネット利用は一般的となっています。インターネット ユーザーの 60% がスマートフォンからアクセスしており、アメリカのスマートフォン ユーザーの 94% はローカル情報をスマートフォンで検索しています。また、モバイル検索の 77% はパソコンも使える状況で発生していることがわかっています。モバイルページの処理速度を上げてリピート利用を促進しようより引用
さらに、ユーザーの利用環境に依存しますが、一般的にはパソコンと比べてスマホの方が回線速度が遅いので、スマホで表示する方が表示されるまでに時間がかかります。
つまり、パソコンで開いた時のページ表示速度が早いからといって安心はできないということです。
スマホで表示速度を計測したことありますか？
ここまで理解しているあなたはスマホで表示速度がユーザーの為にも検索対策の為にも重要な理由はわかっていると思います。
では実際の表示速度をスマートフォンで計測したことはありますか。
インターネットで表示速度の計測を検索すると、PageSpeed InsightsやGTmetrixの情報が多く出てきます。
実際に僕も今までこれらのサービスを使って判断していましたし、表示速度改善の分析・調査のためには非常に有効なツールです。
しかし、実際にスマートフォンで表示されるのまでの時間はわかりません。
スマホから自分の書いた記事を読んでいて･･･
この記事なんか遅いな。表示までに時間がかかってるかも。
何秒ぐらいかかっているんだろう。
そんな風に思った経験はありませんか。
そう思った時に、スマホからGTmetrixにアクセスしてURLをコピペして計測して…これだと手間が多いし、正直計測を待っている時間が長いです。
そんな手間を一瞬で解決出来る方法を教えます。
とっても簡単な3つのステップで設定できるので、是非設定してみてください。
スマホから一瞬でページ速度を計測する3つのステップ
今回はiPhoneのChromeでスマホから一瞬でページ速度を計測する3つのステップを解説していきます。（一部Safariも解説します）
実機なくて実装テストはできませんでしたが、Androidの方も同様に設定出来ると思います。
記事冒頭にも書きましたが、AndroidのChromeでは設定できないようです。機種やOSやブラウザによっても異なるとは思うのでAndroidの方は動かない可能性をご理解いただいた上でお試しください。
【ステップ1】ブックマークレットをコピーする
実はこの設定はWeb担当者Forumさんが提供してくれている、速度計測のブックマークレットを使います。
まず、下記のWeb担当者Forumさんの記事にアクセスしてブックマークレットのjavascriptをコピーします。
コピーしたらこのページに戻ってきて下さい。
http://web-tan.forum.impressrd.jp/e/2013/01/29/14562手順は下記のキャプチャで解説するのでわからない方は参考にしてください。
キャプチャはWeb担当者Forum様に許可を頂いて掲載しております。Web担当者Forum様ご協力いただきありがとうごさいます。
ちなみにsafariでも同様の設定ができるんですが、ページ内のブックマークレットを長押しでコピーできなかったのでパソコンとかChromeなどの他のブラウザなど別の方法でコードをコピーさえできればあとは同様に設定可能です。
本当はJavascriptのコードをコピーできるようにこのページに設置したかったのですが、Web担当者Forum様に確認したところブラウザのバージョンなどにより正常に動くように調整する場合があるので簡単に提供するわけにはいかないとのことでした。さすがです！
ただ、全ての端末やブラウザで動作を保障するものではないので、その点はご了承ください。
ブックマークに追加するを長押しします。
「リンクのURLをコピー」をタップします。（Safariはこのコピーが表示されませんでした。）
ここまで完了したらこの記事まで戻ってきてください。
【ステップ2】このページをブックマークする
本当にブックマークする訳ではありません。
一時的にブックマークしてからブックマークを編集してブックマークレットにします。
（なんだかややこしいですね･･･）
あ、本当にブックマークしていただけるのであれば、それはもう大変喜びますので是非ともお願いします。
↓
Chromeの場合とSafariの場合の一時的にブックマークする手順は下記の通りです。
Chromeの場合
右上のメニューボタンをタップします。
次に☆のマークをタップしてお気に入りに追加します。
そのまま完了をタップしてブックマークを完了します。
これでこの記事をブックマークすることができました。
Safariの場合を飛ばして次のステップへ進む
Safariの場合
画面下の真ん中のメニューボタンをタップします。
スライドする下の段のメニューから「ブックマークを追加」を探してタップ
そのまま保存をタップしてブックマークを完了します。
これでこの記事をブックマークすることができました。
【ステップ3】登録したブックマークを編集する
次はステップ2で登録したブックマークを編集します。
ブックマーク名は分かりやすくご自由に。URLの部分を先ほどコピーしたブックマークレットを貼り付けます。
ここの手順もChromeの場合とSafariの場合で解説していきます。
Chromeの場合
追加した直後に出てくる編集をタップしてブックマークの編集画面へ
閉じてしまった場合は先ほど開いた右上のメニューから「ブックマーク」を探して、追加下ブックマーク名の横のメニューをタップして編集を選択します。
名前の部分を好きな名前に変更します。速度計測などわかりやすいものがいいでしょう。
URLの入力欄を長押しします。
ペーストをタップして先ほどコピーしたjavascriptコードを貼り付けます。
コードを貼り付けたら右上の完了をタップして編集を完了します。
これでブックマークレットの作成は完了です。
Safariの場合を飛ばして「確認したいページを表示して登録したブックマークレットを実行する」へ進む
Safariの場合
右下のブックマークのボタンをタップします。
右下の編集ボタンをタップします
さっき追加したブックマークの名前の部分をタップします。
名前の部分を好きな名前に変更します。速度計測などわかりやすいものがいいでしょう。
アドレスの入力欄を長押しします。
ペーストをタップして先ほどコピーしたjavascriptコードを貼り付けます。
コードを貼り付けたら完了をタップして編集を完了します。
確認したいページを表示して登録したブックマークレットを実行する
上記の3ステップで設定は完了です。
あとは実際にページ速度を計測したいページを表示してから、先ほどの自分で設定したブックマークレットをブックマークの一覧から探して実行すると下記のように表示速度の結果が表示されます。
さらに、このブックマークレットではどこの読み込みに時間がかかったかなど改善点も提示してくれるあたりはさすが。
かゆいところに手が届くブックマークレットですね。
まとめ
SEOやユーザーのために重要な表示速度。
今回はその表示速度をスマホで気軽に計測する方法をご紹介しましたが、いかがでしたでしょうか。
一度設定してしまえば、気になったときはいつでもサクッと一瞬でWebサイトやブログの表示速度を計測することができます。
是非設定してページ表示速度の改善に役立ててもらえたら嬉しいです。
今回の記事が役に立ったと思ったらシェアしてもらえると励みになります。