販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

そのサイト、スマホ対応大丈夫?googleテスターで表示スピードまでチェックしよう!

そのサイト、スマホ対応大丈夫?googleテスターで表示スピードまでチェックしよう!

皆さん、こんにちは。
バズーカ運営チームの金です!

スマホ対応、モバイルファースト…もう分かってるよ!という程言われていることですが、デザイン面だけではなく、表示速度・各端末対応などその中身までしっかりとスマホに対応しているかはわかりにくいですね。

ソースを確認しないと分からないことも多々あり、特にマーケティングやプロモーションご担当の方にとっては実制作の知識がないと、気になるけれど突っ込めない場面も多いかと思います。

今回の記事では、皆さんが運営されているサイトのスマホ対応状況を簡単にチェックできるgoogleのツールについて紹介します。

この記事を読んで、一度Web制作チームに「これ、大丈夫かな?」と声を掛けるきっかけにしてみてくださいね!

「Mobile Website Speed Testing Tool」を使おう!

【Google Mobile Website Speed Testing Tool】https://testmysite.thinkwithgoogle.com/

Googleが2016年6月に公開した無料のツールです。今まで「スピードテスター」や「モバイルテスター」など、それぞれ違う機能で提供していたツールを一つにまとめたものです。

使い方は簡単!評価したいサイトのURLを入れると、

  • MOBILE FRIENDLINESS:スマホ表示に最適化されているか?
  • MOBILE SPEED:スマホでのページ読み込みスピードは問題ないか?
  • DESKTOP SPEED:デスクトップPCでのページ読み込みスピードは問題ないか?

という3つの項目で、100点満点での採点結果と改善のポイントを教えてくれるとても使いやすいツールです。

「でも、日本語は対応していないし、技術系の言葉が多いから点数以外はわかり辛い…」

というウェブ担当者のために、項目それぞれの意味やGoogle基準で改善すべき点を詳しくご説明します!

MOBILE FRIENDLINESS:スマホ表示に最適化されているか?

ページの仕組みがスマホできちんと表示される作りになっているかを評価する項目です。

詳細チェックポイント別に「PASSED:問題ない」「SHOULD FIX:直すべき問題」「CONSIDER FIXING:修正を考慮する問題」という評価がまたあるので、ウェブ担当者として重要度が高いポイントに絞って説明します。

【Avoid plugins:プラグインを使用しない】

Flash・Silverlightなど、ブラウザに表示できないインタラクティブな要素に必要な外部「プラグイン」を使っていないか?ということです。

今後ほとんどのブラウザにおいてセキュリティと読み込みスピードを考慮し外部プラグインが排除されていく傾向です。

こういったプラグインを必要とするコンテンツがあるとサイト訪問者の離脱に直結してしまいますので、もし残っていたら制作チーム側と相談し最新のものに切り替えることをオススメします!

【Configure the viewport:ビューポートを設定する】

これは、観覧しているデバイス画面の大きさに合わせてページを表示する設定がされているか?という意味の項目てす。

この設定がされていないと、PC用のページをそのまま縮小されて見えるので、小さい画面がのスマホでは見づらくなります。

レスポンシブデザインで制作されているページなら、これらの設定は基本中の基本です。

【Size content to viewport:コンテンツのサイズをビューポートに合わせる】

このチェックポイントは、ページの内容が横に長くて、一つの画面に収まらないものはないか?という意味です。

ユーザーは縦スクロールには慣れていますが、横スクロールには慣れていないため左右に動かさないといけないページは見づらく感じます。

もしここで☓という項目があったら、レスポンシブ対応がきちんとされていないということなので、すぐ制作チームに伝えて対応をしてください。

【Size tap targets appropriately:タップターゲットのサイズを適切に調整する】

タッチして操作するボタンやバナーが、指で押しやすいサイズになっているか?というチェック項目です。

大人の指の大きさを考慮してGoogleでは少なくとも、横も縦も「48ピクセル」(7ミリ)以上の大きさを確保することを推奨しています。

デザインだけを見ていると気づきにくいところなので、実際にスマホで操作してみて制作チームと相談しましょう!

【Use legible font sizes:読みやすいフォントサイズを使用する】

文字が小さすぎて読みにくくないかをチェックする項目です。

Googleでは文字の大きさを「12ピクセル」以上を推奨していて、それより小さいとスマホの画面では読みにくくなると判断しています。

コンテンツの重要度やターゲットに合わせて調整は必要ですが、最低限の可読性が確保できているかは確認しましょう。

MOBILE SPEED:スマホでのページ読み込みスピードは問題ないか?

スマホは通信回線やデバイスの処理スピードの問題があるので、PC以上に読み込みスピードに気をつけないといけないですね。

この項目は、今のページがスマホでの表示スピードを考慮した作りになっているかを判定しています。

技術的な部分も多くて難しく見えがちですので、対応すると即効性が高い項目を中心に説明していきます。

Optimize images:画像を最適化する

ページ中に使われている画像の容量(単位:KB)が大きすぎないかどうか?を判断する内容です。

キービジュアルなどの高解像度できれいな画像を使うと容量が急激に増えますが、Wi-Fi環境でチェックするとなかなか気づきにくいですね。

対応策としては、

  • 最大の表示サイズを考えて画像をリサイズする
  • Photoshop等ソフトで画質を調整する
  • データ形式によってはロスレス圧縮で画質を維持しながら容量を減らす

など色々な方法があります。

画像の最適化をすると容量の削減・スピード改善効果が大きいので制作担当者の方と是非確認してみてください。

【Eliminate render-blocking JavaScript and CSS in above-the-fold content:レンダリングを妨げるJavaScript・CSSを削除する】

主にWebサイトの動きを表現する時に使われる「Javascript」と、Webデザインの装飾を制御する「CSS」は、ページ自体のHTMLとは別のファイルやフォルダで管理することが一般的です。しかし、あまりにもファイルが細かく分かれていると、ファイル1つ1つを読み込むために時間がかかり、ページの表示スピードが落ちてしまいます。

このチェックポイントは、読み込みに負荷をかけている箇所を具体的に指摘するための項目です。

短いJavascript・CSSであればHTMLの中に書き込むことで、読み込み回数を減らしスピード改善の可能性があります。

ただし、サイトのメンテナンス面を考えると、個別で管理した方が良い場合もあり、バランスが重要です。まずは負荷をかけている項目を確認するように、制作チームと一度相談をしてみましょう。

【Prioritize visible content:スクロールせずに見える範囲のコンテンツを優先表示】

長いページの場合、一気に全ての内容を読み込むと表示されるまでに時間がかかることがありますよね。それは、一気に全体データを読み込むようにしていることが原因です。

そこでこの項目では、ファーストビューで表示される範囲の必要データだけをまず先に読み込む仕様になっているかどうかを確認します。

HTMLファイルは上から下へ順に読み込まれ画面に表示しますので、最初に表示される範囲のソースを上部に書いておけば、余計な読み込みを省いて表示スピードの改善につながります。

【Avoid landing page redirects:リンク先ページでリダイレクトを使用しない】

例えば、PCとスマホ用ページが別々にあり、スマホから[test.com]にアクセスすると[m.test.com]というスマホ用ページに飛ば…など、無駄な「リダイレクト」が設定されていないかを確認するチェックポイントです。

レスポンシブデザインで作られているページなら問題ありませんが、URLが切り替わる仕組みのページなら確認しましょう。

【Minify CSS:CSSのサイズを小さくする】
【Minify HTML:HTMLのサイズを小さくする】
【Minify JavaScript:JavaScriptのサイズを小さくする】

似たカテゴリの話なので、3つを併せて説明します。

これらはHTML・CSS・JavaScriptのコードに、余計な改行や重複する記述があれば知らせてくれます。該当コードを書き直すと、データが軽くなります。

ランディングページなどページ数が少ないWebサイトでしたらあまり影響はありませんが、数千ページ以上の大規模サイトになるとかなりの改善効果が見込めるので、順次対応していくことをおすすめします。

【Leverage browser caching:ブラウザのキャッシュを活用する】

ウェブブラウザは、一度読み込んだことのあるページのデータを「キャッシュ」という形式で一時保存しておき、次回閲覧時の読み込み速度をあげる仕組みがあります。その「キャッシュ」の更新頻度を調整することで、データ読み込み回数を減らそうという方法です。

対応作業自体は難しくありませんが、サイト全体の運営ポリシーと関わる内容ですので、システム担当の方とまず相談してから進めるようにしましょう。

【Enable compression:圧縮を有効にする】

サーバー内のデータを圧縮して利用、転送することで、データ容量を減らしてページの表示スピードを改善するためのチェックポイントです。

こちらはインフラ的な部分(サーバーの仕様など)に影響を与える恐れがある上、サイトの規模によって効果を感じられない場合もあるので、まず他の対応を優先することをオススメします。

大規模サイトでしたら、システム担当の方と一度相談してみてください。

Reduce server response time:サーバーの応答時間を改善する

サーバー側のレスポンス時間を短くして、ページの表示速度を上げるためのチェック項目です。こちらも、サーバーの仕様と関係があるので、サーバーを管理している担当者にできるかどうかをまず確認してみることをおすすめします。


*「・DESKTOP SPEED:デスクトップPCでのページ読み込みスピードは問題ないか?」項目は、「MOBILE SPEED」項目と同じチェックポイントであるため、別途の説明は省略させて頂きます。

まとめ

こちらの項目は、Googleが推奨する方法なので、もちろんすべて鵜呑みにする必要はありません。

ただし、普段あまり気がつかず漏れがちな要素まで手軽に確認ができるので、一度サイトの現状を把握して、改善のきっかけを見つけるツールとしては大変有用だと思います!

ぜひ一度「これ、大丈夫?」と、制作チームと話してみてはいかがですか?

参考:

The following two tabs change content below.
キム

キム

テクニカルディレクター。 フロントエンドコーディング、スマホ、アプリケーション、IoTなどに興味深いです。 たまに変な日本語が出てしまっても許してください…!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする