ブログ

スマホ対応WEBデザインをするなら知っておくべきサイト表示高速化Test My Site

2017年6月29日に同じくGoogleからリリースされた、

モバイルサイトをメインにしたWebサイトの読み込み速度のチェックや改善策を

アドバイスするサービス「Test My Site」について紹介していきます。

リリースからそれほど日が経ってないので、

まだ知らない方もいるかもしれませんが、

「PageSpeed Insights」と同じように簡単な操作で

Webサイトの問題点を洗い出すことができます。

スマートフォン等のモバイルサイトの

高速化を考えている方、必見です。

Test My Siteの機能・利用方法

https://testmysite.withgoogle.com/intl/ja-jp

Test My Siteの利用自体はとっても簡単。上記のURLにアクセスし、

パフォーマンスの分析を行いたいWebサイトのURLを入力して

「→」ボタンをクリックするだけです。

分析には大体1~3分程度の時間がかかりますがとても早いです。

モバイル端末向けのWebサイトのチェックということで、

3G回線を利用して通信のテストが行われているようです。

この辺がPageSpeed Insightsとの違いとなります。

PageSpeed Insightsについてはこちらの記事の方で解説しています。

 

話がそれましたが、実際に利用方法を解説していきます。

 

 

Test My Site」にアクセスしましょう。

ページにアクセスしてチェックしたいURLを入力し、

矢印のマークをクリックすると、

以下の画像のようにサイトの診断が始まります。

評価まで1分ほどかかりますと書いていますが、

実際にツールを使ってみたら2分ほどかかりましたが公表していた時間内で

コンテンツ細部まで分析しているようです。

標準接続(3G)でテストしています…

日本では4Gが主流ですが今後5Gとなっていきます。

世界的には3Gでのモバイル回線接続が全体の70%を占めているようですが

この流れだと4Gが主流になるかもしれませんね。

サイトのデータを分析しています…

ここでは、HTML/CSSやJavaScriptの確認や実行を行っています。

モバイル対応度をテストしています…

続いて、モバイルフレンドリーテストツールで診断できる

ビューポートやテキストのサイズなどを計測しています。

速度を確認しています…

ページの読み込み時間が1秒から7秒になると、訪問者のサイト離脱率が

113%増加するというアドバイスまで書かれています。いたせりつくせりですね。

類似サイトを分析しています…

診断結果の画面にて同じ業種のサイトとの比較を確認することができます。

ツールでの調査が終わると調査結果として、

「読み込み時間」「訪問者の推定離脱率」が表示されます。

今回は、読み込み時間が●秒、推定離脱率が●%でした。

といった数字で見ることが出来ます。

また、次のページに行くと、「同じ業界内の比較」を見ることができます。

今回はこのUMIDASWEB内の記事を診断してみましたが、

「仕事、教育」の業種に振り分けられています。

業界内だと、3秒が「特に良好」、4.3秒が「良好」だということが

目で見てわかるように表示してくれます。とても便利。

また、プルダウンから他の業種を選ぶことで比較をすることも可能なんです。

「仕事・教育」から「不動産」のように、Googleが幅広く業種を

把握していることが分かります。

さすがGoogle様ですね。本当にすごい仕組みです。

「優先度の高い修正点」の部分をクリックすると、

具体的にどのような対策が必要なのかを確認することができます。

「無料レポートを取得」をクリックして、

表示されたポップアップ内でメールアドレスを入力しましょう。

1時間ほどで表示速度改善の提案について書かれたメールが届くと

別のサイトで見かけましたが、約30分ほどで到着しました。

メールのレポートの内容についても画面キャプチャを

貼っておきますので参考までにご覧ください。

ツールで診断したように、読み込み時間と推定離脱率が書かれています。

離脱率は読み込み速度から自動で計算されるようになっているようです。

読み込み時間が3秒以上かかると40%以上のユーザーが離脱するという海外の発表もあり、

ページの表示速度はサイトを運営していく中でも重要な項目となっています。

以上がTest My Siteのツールを利用方法と機能です。

少し余談です。

 

 

「スマホ対応でのWEBサイト内動画の表示方法」

 

 

について、少し触れていきます。

UMIDASWEBでWEB制作を行う際に2020年時点で

要望が増えているのがこの「動画埋め込み」。

HTMLで動画を埋め込む方法として、videoタグで埋め込む方法と

YouTubeやVimeoといった別のサーバーに動画ファイルをアップロードしたものを

サイト内に埋め込むという2パターンで対応しています。

YouTubeとVimeoどちらを埋め込む方がメリットがあるのか?

この質問は、お客様側のWEB担当者様からよく聞かれるQ&Aになります。

YouTubeメリット

  • SEO対策になる
  • 動画からもホームページを見てらもえる可能性がある

YouTubeデメリット

  • 動画再生後に他の関連動画が表示されてしまう
  • YouTubeのテーマカラーの赤色がWEBデザインに影響する可能性がある

Vimeoのメリット

  • WEBサイトに動画を埋め込む際、再生ボタン等の見え方をデザイン出来る
  • 動画再生時に別の関連動画や広告動画が差し込まれない

Vimeoのデメリット

  • 動画検索からWEBサイトへの集客効果は極めて低い
  • アップロード動画容量のプランによっては、月々のコストが必要になる

YouTubeとVimeoの違い・比較のまとめ

動画マーケティングを考えるのであればどちらか一方を選択する必要のではなく、

1つひとつの動画の目的や使い方によって

YouTubeとVimeoを使いわけるという考え方が大切です。

ざっくりと整理してみましょう。

 

新規ファンの獲得など多くの人に動画を見せる場合には、

YouTubeで動画を公開し、広告配信やSEOも積極的に行っていくことで

動画からの集客が見込める可能性が上がります。

 

すでに一定の関心を持っているとか

直接名刺交換をした担当者同士といった場合は、

しっかりと動画を視聴してもらいたいですよね。

 

もしくは、会社の色やブランドの世界観をより大事にしたい場合

Vimeoの方がWEBサイトに埋め込んだ時にデザインの邪魔をせずに

見せたい動画を見せることが出来ると考えられますね。

 

そんなことを考えながらUMIDASWEBでは、
動画埋め込みの対応を行いながらWEB制作を行っています。

YouTube等の外部サイトを使わずに動画をHTMLというもので

WEBサイトに組み込む方法について、

当社で試行錯誤した結果、うまく実装出来たので忘れないように記事に残します。

WEB制作の会社様やホームページリニューアル・リノベーションを

考えている企業担当者様にとって何か役に立つ情報になれば嬉しいです。

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

プロフィール

プロフィール

このサイトを運営しているUMIDASWEB遺志衣です。
WEB制作会社でWEB制作メインで知多半島を中心に活動しています。2020年に入り、動画制作の受注が増えたことから4K対応動画制作が増えています。

知多市・東海市・阿久比町・半田市・常滑市でYouTube活動をされている方からの依頼が増え、動画制作おすすめ制作会社になりつつあります。

フォロー

おすすめ商品

  1. 知多半島飲食店ポータルサイト
  2. 動画制作
  3. ホームページ制作
ページ上部へ戻る