web集客が捗る。長期的な利益のためのマーケティング

webマーケティングの考え方、長期的な利益を出し続ける方法論やオウンドメディア、SEO対策、web広告などの技術的なノウハウ

【スマホ対策】ページ表示速度を上げて機会喪失を減らす方法

time 2017/08/14

【スマホ対策】ページ表示速度を上げて機会喪失を減らす方法

スマホ対策は必須。ページ表示速度が売上を左右する理由と機会喪失を減らす対策

ここ数年、スマホの利用比率が年々増え続けネットでのパソコン利用比率が減少傾向にあるとされています。

企業・個人のECサイトへの訪問数も(業種・業界にも依るが)スマホからの閲覧が過半数を占めているというデータも実際に存在します。

スマートホンからのアクセスを如何にしてそのまま「購入行動(Action)」に誘導させられるかが企業売上を左右するともいえます。

自サイトに訪問したスマホからのアクセスをブラウザバック(※)させずに、自サイト内を滞留してもらうためにはどのような工夫が必要でしょうか?

(※ いま表示しているページから一つ前に辿ったURL(ページ)や他のサイトへに戻る操作のこと)

スマホ対策で気を付けたいこと。「ページの表示速度」

スマホで日常的に情報を検索している方に是非お伺いしたいです。

ページ遷移(今表示しているページ(URL)から別のページ(URL)へ移動すること)をする際、何秒までなら我慢して待てますか?

一説には、「平均1.5秒~3.0秒」といわれていたりします。(※諸説あり)

例えば、「せっかちな人」であれば4秒以上のレンダリング(※)には耐えられないのではないかと思われます。

(※ ページ遷移時の「表示の切り替え」のこと)

アナタはいかがですか? スマホでSNSの操作やインスタグラムで情報を検索するときにページの表示や他ページへの移動に10秒も15秒以上も待てますか? 私の場合、たぶん我慢できないのでその場でブラウザバックします(笑)

このように、スマホ専用ページでは表示速度の遅さが命取りになるケースが非常に多いです。

では、ブラウザバックによる機会喪失をどのようなテクニックで防御すればいいのでしょう? 原因と対策について考えてみます。

HTMLやCSSが肥大化していないか見直す

パソコンでもスマホでも原理は同じですが、アクセスしてサイトを端末で表示させるためには、接続先のサイトからHTMLやPHP、JS(ジャバスクリプト)、その他必要なデータファイルを端末に一旦ダウンロードする必要があります。

特に初めて訪問したサイトURLを端末で表示させるためには相当の時間がかかることもあります。

「ページ表示速度」の対策の一つとしては、「HTMLの無駄な記述を見直す」「CSSのインライン化」という方法があります。

<< CSSを外部ファイルから取り込む場合 >>

CSSのインライン化

<< インライン化をした場合 >>
CSSのインライン化

普通、UXを向上させたりサイトをユーザーに綺麗に見せるためにCSSを駆使してサイトのデザインを最適化します。CSSファイルは「style.css」などのファイルに別途記述してHTML内部からCSSファイルを読み込む形式をとることが一般的です。

このとき、「style.css」やHTMLのファイルサイズ・記述のボリュームがあまりにも冗長すぎる場合、アクセス元の端末でHTML、CSSを解釈してディスプレイに正しく表示させるまでにかなりの時間が掛かります。

HTMLの記述の仕方によってはCSSファイルをその都度読み込みますからそれだけページ表示の動作が重くなるのです。

解決方法としては、CSSファイル内の記述の簡素化やインライン化が有効です。

インライン化の具体例をご紹介しましょう。

例えば、「p」タグのfontクラスをCSSファイルの中で以下のように定義していたとします。

CSSファイルの記述

HTMLでの記述例

fontクラスを「p」タグで毎回呼び出すような記述の仕方よりも、以下のようにCSSをインライン化してしまえば、タグの記述の度にCSSファイルを毎回呼ばなくて済みます。

CSSのインライン化

このようにインライン化されているとCSSファイルを何度も外部から呼び出さなくて済むのでそれだけ動作が軽量化しやすくなります。

と同時に、CSSファイルを一読して重複した記述がないか探します。重複している記述が見つかれば一つに統一するなど、CSSの肥大化を防ぐことで動作がさらに軽くなります。

画像を圧縮してレンダリングの負荷を低減する

モバイルやパソコンの端末は、サイトにアクセスした際にHTMLやCSSファイルのほかに「画像データ」のダウンロードも同時に行っています。

画像サイズが大きい場合、その分だけデータのサイズが何メガバイトも膨らみます。

そこで、画像データを事前に圧縮してからHTMLに組み込むという対策が考えられます。

画像データを、以下のサイトへドラッグアンドドロップするだけで「圧縮済みの画像」をダウンロードして入手できます。

SEO対策 画像の圧縮
画像圧縮サイト:
https://tinypng.com/

実際に、この画像を圧縮してみました。 「161.5 KB(キロバイト)」もあった画像データが「46.1 KB」(71%減)のサイズにまで圧縮されました!

↓  ↓  ↓

SEO対策 画像の圧縮

1ページ内で画像を何枚も掲載しているサイトほどアクセス元のデバイスの負荷は高くなります。

ですので、画像の多用が当たり前のサイトほど画像圧縮の作業は不可欠といえます。

Javaスクリプト等の動的ソースを減らす

一般に、JS(ジャバスクリプト)をHTMLに組み込んでいるページは組み込んでいないページと比べてレンダリング速度(遷移速度)が遅くなる傾向にあることが知られています。

たしかに、企業のサービスの種類や内容によっては、UXやデザインを意識してサイト内でJavaスクリプトを駆使する場合もあります。

ですが、だからといって多用しすぎるのも考え物です。

はっきりいってしまうと、(ページ表示速度の観点から)JSはサイト内に少なければ少ないほど(動作が軽量になるので)良いといえますので、JSは少ないに越したことはありません。

また、Javaを使わない仕方がない場合であっても、CSSで動作を代用できるケースもあります。一度サイトを見直してみてJSをCSSに置き換えられそうな箇所は置き換えることをおススメします。

ページ表示速度の測定ツールでサイトパフォーマンスを検証する

SEO対策 ページ表示速度

PageSpeed Insights – Google Developers

これはGoogle提供のサイトパフォーマンスを計測する開発ツールです。実際に、経済産業省のホームページでテストしてみることにしましょう。

SEO対策 ページ速度 改善

経済産業省の「モバイル向けページ(※トップページ)」の表示速度のスコアは「41(Poor)」でした。

もともとこのURLはスマホ向けのURLではないのでこのくらい遅いのが普通です。

ただ、実際にスマホ向けのページであった場合、「41」というスコアは非常に遅い方です。スマホ向けのページであれば、最低でも「70以上」のスコアは欲しいところです。

パソコン向けのページの場合、最低でも「55」か「60」以上のスコアは欲しいところですね。

ページ速度はSEOのランキングには影響しない。だが、機会喪失にはなり得る

現在確認されている情報では、スマホ向けページの表示速度は「検索キーワードのランキングへの影響は無い」とされています。

こういった情報が確認されるまでは、ページスピードが検索エンジンのキーワード順位に及ぼす変化に対する懸念があったのです。

ですから、ページ速度が遅いからといってSEO的な効果のマイナスの影響までは心配しなくて大丈夫です。

ただ、繰り返しになりますが、サイトのSEO効果にマイナスの影響が出ないとしても、サイトのページ速度が遅いことによって訪問ユーザーの離脱が増え企業の売上にマイナス効果を及ぼしかねない点については見逃すわけにはいきません。

企業のホームページによっては、アクセス元のデバイスによって「スマホ向けページ」「パソコン向けページ」に自動的に割り振られるシステムを取っていることもあります。

ですから、パソコン向けのページ速度が遅いからといって悲観的になる必要はありません。ただ、スマホのデバイス向けに割り振られているスマホ専用ページについては、「せっかちな検索ユーザー」に対する配慮はやはり必要不可欠といえます。

まとめ

まとめ
  • 売上に直結するブラウザバックを減らすためにページ速度を最適化する
  • CSSをインライン化することでページ速度を改善できる
  • 画像を多用するページはデータ圧縮も有効
  • Javaスクリプトを多用するサイトに注意。動的ソースを減らせないか検討
  • サイト速度の改善は企業の課題。ユーザのブラウザバックを許すな!

最後までお読みいただきありがとうございました。

down

コメントする