Tip:
Highlight text to annotate it
X
マイリー・オイェです
マイリー・オイェです
Googleウェブマスターサポートチームの デベロッパープログラムテックリードをしています
Googleウェブマスターサポートチームの デベロッパープログラムテックリードをしています
この動画では、モバイルサイトの パフォーマンスを向上するための
この動画では、モバイルサイトの パフォーマンスを向上するための
簡単で即効性の高い 方法について説明します
簡単で即効性の高い 方法について説明します
本題に入る前に 統計情報を確認しておきましょう
本題に入る前に 統計情報を確認しておきましょう
パフォーマンスは収益に影響します
Strangeloop社では スマートフォンユーザーを対象に
ページの表示を1秒遅らせる 実験を行いました
ページの表示を1秒遅らせる 実験を行いました
たった1秒遅らせただけで ページビューが9%減少し
たった1秒遅らせただけで ページビューが9%減少し
直帰率が8%増加し コンバージョンが3.5%減少しました
直帰率が8%増加し コンバージョンが3.5%減少しました
さらに悪いことに 実験が終わった後も
顧客がサイトに戻ってきた気配は あまり感じられませんでした
顧客がサイトに戻ってきた気配は あまり感じられませんでした
では、モバイルページの速度と ユーザーの現状を見てみましょう
では、モバイルページの速度と ユーザーの現状を見てみましょう
調査によると、ユーザーの 気が散るまでの時間が1秒
調査によると、ユーザーの 気が散るまでの時間が1秒
一方、モバイルページの 平均読み込み時間は7秒です
一方、モバイルページの 平均読み込み時間は7秒です
つまり、ユーザーが イライラして待つ時間
つまり、ユーザーが イライラして待つ時間
または別のサイトを試すまでの時間は 6秒間ということです
では、モバイルウェブが パソコンより遅いのはなぜでしょうか
では、モバイルウェブが パソコンより遅いのはなぜでしょうか
モバイルとパソコンの 待ち時間を比較してみましょう
パソコンのユーザーが google.comで検索を実行したとします
パソコンのユーザーが google.comで検索を実行したとします
ユーザーがクエリを送信してから ブラウザがGoogleに接続し
ユーザーがクエリを送信してから ブラウザがGoogleに接続し
Googleサーバーがクエリを処理して結果を返し パソコンのブラウザに表示されるまで
Googleサーバーがクエリを処理して結果を返し パソコンのブラウザに表示されるまで
0.5秒もかかりません
実際、ユーザーは このスピードに慣れてしまっています
実際、ユーザーは このスピードに慣れてしまっています
一方、スマートフォンでこの処理を 0.5秒で終えることはほぼ不可能です
一方、スマートフォンでこの処理を 0.5秒で終えることはほぼ不可能です
なぜなら、ユーザーが スマートフォンにクエリを入力した後に
なぜなら、ユーザーが スマートフォンにクエリを入力した後に
モバイルネットワークに接続しないと サーバーにアクセスできないからです
モバイルネットワークに接続しないと サーバーにアクセスできないからです
モバイルネットワークはそういうもので 3Gでも4Gでも、スマートフォンから
モバイルネットワークはそういうもので 3Gでも4Gでも、スマートフォンから
Googleのようなサーバーに接続するのに 最短でも0.5秒はかかります
Googleのようなサーバーに接続するのに 最短でも0.5秒はかかります
サーバーへの接続に0.5秒費やした後に Googleがクエリを処理して結果を返し
サーバーへの接続に0.5秒費やした後に Googleがクエリを処理して結果を返し
スマートフォンに ページが表示されます
ここで重要なのは スマートフォンユーザーの場合
サーバーに接続するだけで 最短0.5秒は待つ必要があるということです
サーバーに接続するだけで 最短0.5秒は待つ必要があるということです
その後の処理に 0.5秒かかった時点で1秒が経過し
ユーザーの気が変わってしまう 可能性があるということです
ユーザーの気が変わってしまう 可能性があるということです
ではどうしたら スピードアップできるのでしょうか
この動画では、Googleアナリティクスを 使用する方法を紹介します
例として取り上げるGoogle Storeには www.googlestore.comからアクセスできます
例として取り上げるGoogle Storeには www.googlestore.comからアクセスできます
まずはGoogleアナリティクスで モバイルトラフィックセグメントを作成しましょう
まずはGoogleアナリティクスで モバイルトラフィックセグメントを作成しましょう
新しいセグメントを作成します
つい先月、Googleアナリティクスに 「サイトの速度」という新機能が追加されました
つい先月、Googleアナリティクスに 「サイトの速度」という新機能が追加されました
[サイトの速度とページ読み込み速度] に移動します
セグメントを[モバイルトラフィック]に設定し [分布]タブを選択します
セグメントを[モバイルトラフィック]に設定し [分布]タブを選択します
分布を見ると、大まかな サイトパフォーマンスがわかります
分布を見ると、大まかな サイトパフォーマンスがわかります
Google Storeの平均ページ読み込み時間は モバイルで6秒を超えています
Google Storeの平均ページ読み込み時間は モバイルで6秒を超えています
Google Storeの平均ページ読み込み時間は モバイルで6秒を超えています
また、サイト内のページの46%は モバイルへの読み込みに3~7秒かかっています
また、サイト内のページの46%は モバイルへの読み込みに3~7秒かかっています
かなり改善の余地がありますね
[サイトの速度とページ読み込み速度]の [エクスプローラ]タブをクリックします
[サイトの速度とページ読み込み速度]の [エクスプローラ]タブをクリックします
デフォルトではページビューでソートされ 訪問者が多いページから順に表示されます
デフォルトではページビューでソートされ 訪問者が多いページから順に表示されます
各ページの相対速度もわかります
3番人気のYouTubeカテゴリーページでは YouTubeの水筒やマグネットを販売していますが
3番人気のYouTubeカテゴリーページでは YouTubeの水筒やマグネットを販売していますが
モバイルページの平均値の350%という 耐え難いほどの遅さです
しかもさきほど見たように この平均値も決して速いとは言えません
しかもさきほど見たように この平均値も決して速いとは言えません
この機能を使うと、人気があって 速度が遅いページを特定できます
この機能を使うと、人気があって 速度が遅いページを特定できます
では、[サイトの速度についての提案]で 改善点を探ってみましょう
では、[サイトの速度についての提案]で 改善点を探ってみましょう
YouTubeページの速度に関しては 9つの改善点が提案されています
YouTubeページの速度に関しては 9つの改善点が提案されています
提案をクリックすると [PageSpeed Insights]ウィンドウが開きます
提案をクリックすると [PageSpeed Insights]ウィンドウが開きます
テストが目の前で採点されている感じです 完了したらモバイルパフォーマンスを見てみましょう
テストが目の前で採点されている感じです 完了したらモバイルパフォーマンスを見てみましょう
YouTubeページのパフォーマンスは やはり55点と低くなっています
YouTubeページのパフォーマンスは やはり55点と低くなっています
YouTubeページのパフォーマンスは やはり55点と低くなっています
成績は「F」といったところでしょう
この動画では即効性を重視して 赤の感嘆符の提案に集中することにします
この動画では即効性を重視して 赤の感嘆符の提案に集中することにします
この動画では即効性を重視して 赤の感嘆符の提案に集中することにします
提案の内容がよくわからない場合は 展開して詳細を表示することができます
提案の内容がよくわからない場合は 展開して詳細を表示することができます
これらの提案が簡単に実施でき 収益に結びつくことをぜひ実感してください
これらの提案が簡単に実施でき 収益に結びつくことをぜひ実感してください
これらの提案が簡単に実施でき 収益に結びつくことをぜひ実感してください
パフォーマンスに関する 提案を表にまとめました
簡単に実施できる提案と 少し難しい提案に分けてあります
簡単に実施できる提案と 少し難しい提案に分けてあります
必要に応じ動画を止めてご覧ください
最初の表は、開発者レベルの技術スキルがあれば 2~3時間以内に実施できる簡単な提案です
最初の表は、開発者レベルの技術スキルがあれば 2~3時間以内に実施できる簡単な提案です
最初の表は、開発者レベルの技術スキルがあれば 2~3時間以内に実施できる簡単な提案です
1つ目の提案は「圧縮の有効化」です リソースを圧縮することにより
1つ目の提案は「圧縮の有効化」です リソースを圧縮することにより
ウェブサーバーとクライアントの間の データ転送量を減らすことができます
ウェブサーバーとクライアントの間の データ転送量を減らすことができます
サーバーの設定ファイルで 少し設定を変更するだけです
サーバーの設定ファイルで 少し設定を変更するだけです
「リソースの削減」は 市販のツールで簡単に行えます
「リソースの削減」は 市販のツールで簡単に行えます
「非同期スクリプトの使用」はほぼ コピー&ペーストでコードを書き換えるだけです
「非同期スクリプトの使用」はほぼ コピー&ペーストでコードを書き換えるだけです
「非同期スクリプトの使用」はほぼ コピー&ペーストでコードを書き換えるだけです
「ブラウザのキャッシングの活用」は リソースにHTTPヘッダーを追加するだけです
「ブラウザのキャッシングの活用」は リソースにHTTPヘッダーを追加するだけです
「ランディングページリダイレクトの回避」も それほど難しいことではありません
「ランディングページリダイレクトの回避」も それほど難しいことではありません
リダイレクトされているページがあれば
ソースURLからターゲットに直接リンクして 中間ページを介さないようにします
ソースURLからターゲットに直接リンクして 中間ページを介さないようにします
無意味なリダイレクトをなくす効果は スマートフォンの待ち時間を見ればわかります
無意味なリダイレクトをなくす効果は スマートフォンの待ち時間を見ればわかります
モバイルで1回リダイレクトするたびに 最短でも0.5秒の余分なページ読み込みが発生します
モバイルで1回リダイレクトするたびに 最短でも0.5秒の余分なページ読み込みが発生します
1つ目の「圧縮の有効化」に 話を戻しましょう
この提案は、サーバーの設定ファイルに コードをコピーするだけで実施できます
この提案は、サーバーの設定ファイルに コードをコピーするだけで実施できます
既存のオープンソースの マスター設定ファイルから
お使いのサーバーに合ったセキュリティと パフォーマンスの設定をコピーできます
お使いのサーバーに合ったセキュリティと パフォーマンスの設定をコピーできます
お使いのサーバーに合ったセキュリティと パフォーマンスの設定をコピーできます
2つ目の表には、もう少し難しい レベルの提案がまとめてあります
2つ目の表には、もう少し難しい レベルの提案がまとめてあります
その多くはじっくり考えて実施すべきもので 2~3時間では終わらないでしょう
その多くはじっくり考えて実施すべきもので 2~3時間では終わらないでしょう
その多くはじっくり考えて実施すべきもので 2~3時間では終わらないでしょう
ここでは「画像の最適化」について 簡単に説明しておきます
ここでは「画像の最適化」について 簡単に説明しておきます
画像を最適化するための方法は 無損失の圧縮から
画像を最適化するための方法は 無損失の圧縮から
モバイルサイトに合わせた画像の作成や トリミングまで色々あります
モバイルサイトに合わせた画像の作成や トリミングまで色々あります
画像の最適化は 1つ目の表の提案ほど単純ではありません
画像の最適化は 1つ目の表の提案ほど単純ではありません
画像の最適化は 1つ目の表の提案ほど単純ではありません
しかし画像はモバイルウェブデータの65%を占め その影響は決して小さくありません
しかし画像はモバイルウェブデータの65%を占め その影響は決して小さくありません
画像を最適化することでダウンロード時間を短縮し ページの読み込みを高速化できるのです
画像を最適化することでダウンロード時間を短縮し ページの読み込みを高速化できるのです
最も重要なことは トラフィックの多いモバイルページがあるなら
最も重要なことは トラフィックの多いモバイルページがあるなら
赤い感嘆符の比較的容易な 提案を実施することで
訪問者にもビジネスにも 大きなメリットがあるということです
訪問者にもビジネスにも 大きなメリットがあるということです
もう1つ便利なサービスとして WebPageTest.orgを紹介しておきましょう
もう1つ便利なサービスとして WebPageTest.orgを紹介しておきましょう
WebPageTestでは 指定したウェブページの速度を分析できます
WebPageTestでは 指定したウェブページの速度を分析できます
iPhoneやAndroidスマートフォンなどの モバイルユーザーエージェントも選択できます
iPhoneやAndroidスマートフォンなどの モバイルユーザーエージェントも選択できます
WebPageTestで速度の遅いページを 分析してみるとすぐわかるでしょう
WebPageTestで速度の遅いページを 分析してみるとすぐわかるでしょう
このページの分析結果を 同僚のイリア・グリゴリクと検証したのですが
このページの分析結果を 同僚のイリア・グリゴリクと検証したのですが
彼の第一声は 「ああ、これはひどい滝だね」
彼の第一声は 「ああ、これはひどい滝だね」
この滝のようなWaterfall Viewを見ると ページ読み込みに15秒以上かかっています
この滝のようなWaterfall Viewを見ると ページ読み込みに15秒以上かかっています
青色のバーは、ページ読み込みに必要な コンテンツダウンロードを表します
青色のバーは、ページ読み込みに必要な コンテンツダウンロードを表します
ページの表示が始まるまでに ほぼ7秒かかっています
ページの表示が始まるまでに ほぼ7秒かかっています
このパフォーマンスでは、画面に何か 表示されるまでに訪問者を7秒待たせ
このパフォーマンスでは、画面に何か 表示されるまでに訪問者を7秒待たせ
ページ全体が読み込まれるまでに 15秒以上待たせることになります
ページ全体が読み込まれるまでに 15秒以上待たせることになります
これでもまだパフォーマンスを 改善する気になれない方のために
これでもまだパフォーマンスを 改善する気になれない方のために
「ユーザーがモバイルサイトに期待すること」 という調査結果を紹介しましょう
「ユーザーがモバイルサイトに期待すること」 という調査結果を紹介しましょう
モバイルサイトユーザーの61%は
探しものが見つからなければ すぐに別のサイトに移動してしまいます
探しものが見つからなければ すぐに別のサイトに移動してしまいます
だからこそ、他社の同じようなページよりも 速くページを表示する必要があるのです
だからこそ、他社の同じようなページよりも 速くページを表示する必要があるのです
私は三人姉妹の末っ子で さまざまなスポーツをやってきましたが
私は三人姉妹の末っ子で さまざまなスポーツをやってきましたが
もっと上手くなりたいと強く思うのは ライバルに負けたときでした
もっと上手くなりたいと強く思うのは ライバルに負けたときでした
WebPageTestでは、ページの表示過程を 時系列で見ることもできます
WebPageTestでは、ページの表示過程を 時系列で見ることもできます
ぜひ競合他社のページと 時系列で比較してみてください
ぜひ競合他社のページと 時系列で比較してみてください
最後に有益なリソースを紹介します
PageSpeedでは、PageSpeed Insights などのツールや記事を提供しています
PageSpeedでは、PageSpeed Insights などのツールや記事を提供しています
PageSpeedチームの メンバーによる動画もあります
PageSpeedチームの メンバーによる動画もあります
WebPageTest.orgも存分に活用してください
ありがとうございました