コンサルタントのコラム

【マーケティング・Web担当者必見】Web表示速度を上げるとCV率が上がる? ー 表示速度を上げる方法

スマホ化が進み、通信の高速化も相まって、読み込み速度の遅いサイトに対するユーザーの許容レベルも低くなってきました。実際わたしも、スマホでブラウジングしているときは、PCサイトを見ているときよりも、読み込み時間に対する我慢の限界が早めにやってくるように思います。皆さんはどうでしょう?2秒くらいですぐ閉じてしまいませんか?

webサイトの表示速度が1秒遅れるとどうなるの…?

たった1秒、されど1秒。webサイトの画面が開くまでの待っているときの1秒って、思いのほか長いですよね。表示速度が1秒遅れることが原因で、

  • ページビューが11%下がる
  • カスタマー満足度が16%下がる
  • コンバージョン率が7%下がる

と言われています。また、2018年7月からは、読み込み速度が検索順位にも影響するようになるため、webサイト運営者にとって1秒はとても貴重な時間となるでしょう。

Googleからのアナウンスはこちら。
“Using page speed in mobile search ranking”

大きな画像を使って「魅せる」コンテンツを作りたいのに…

一方、最近のwebサイトデザインのトレンドとして、大きなサイズの画像を使ったり、リッチな動きをする演出を加えたり、動画を掲載したりと、webサイトの「重量化」も並行して進んでいます。例えば新築マンションの物件サイトや自動車のブランドサイトなど、デザインのトレンドに関係なく高額な商品を購入してもらえるよう高級感やその魅力を伝えたいサイトは、全体的にリッチな作りになっています。

このようなサイトでは、「大きな画像は使わない」「リッチな演出は削る」という選択肢はありません。ではどうすれば軽量化できるのでしょうか…?

その画像、ホントに画像でないとダメ?

webサイト軽量化の手段はたくさんありますが、多くの人がまず頭に浮かべるのは画像の軽量化だと思います。実際、ページをダウンロードする際、データ量のほとんどを占めるのは画像です。

前述のとおり、大きな画像などを使って「魅せる」演出をしなくてはならないケースもあるでしょう。その反面、<どうしても画像にしなくてはならないというわけではないけど画像になっている…>というものがサイトの中にゴロゴロ転がっているはずです。

そこで、画像化の優先順位付けをしてみましょう。「別に画像でなくてもいいかも?」という部分で、画像にしないという選択をするのです。

webフォントやCSSを活用しよう

2010年頃から、webフォントサービスが次々とリリースされ、2013年頃からは日本語のwebフォントも徐々に利用ができるようになりました。webフォントを使えば、これまでデバイス側に依存されていたテキストの表示もコントロールすることができるため、デザイン表現の幅が大きく広がります。

また、CSSを活用してwebサイトにアクセントをつけることもできます。CSSデザインのサンプルコードが紹介されているwebサイトも多数あります。例えばこちらのサイトでは、「CSSで作る!押したくなるボタンデザイン」や、「CSSで作る!吹き出しデザインのサンプル」など、サンプルコードを紹介しており、webアイコンを文字で表示できる、webアイコンフォントの「FontAwesome」の使い方も解説してくれています。

一見画像にみえるこちらのボタン。実は、css+FontAwersomeを用いてこの記事に直接記述したものです。

BUTTON
このボタンもCSS!押してみて!

このように、これまで画像で作っていたようなボタン類、アイコン類は、webフォントとCSSを活用することで掲載できるようになります。ひとつひとつの容量は小さいかもしれませんが、ちりも積もれば山となる!ぜひ活用してみてください。

自サイトの読み込み速度を測ってみよう!

読み込み速度が遅い・速いといっても、経験ベースで話していることが多いのではないかと思うのですが、きっちりと数字で出してくれる測定ツールもあります。

Googleは2種類の読み込み速度測定ツールを提供しています。同じ業界のさまざまなサイトを測定するとなかなか興味深い結果が出ますので、お時間よろしいときに是非試してみてください。

PageSpeed Insights(PC・モバイル)
TestMySite with Google(モバイル)

TestMySite with Googleは「同じ業界内トップクラスのサイトよりも、あなたのサイト遅いですよ」という比較も出してくれます。試しにマーケの強化書のURLを入れてテストしてみました。

読み込み速度、5秒。良好だということですが…

業界トップクラスのサイトと比較すると、まだまだ遅いということが分かりました。

修正すると、2秒ほど縮めることができそうです!

さらに、優先度の高い修正点も教えてくれます。

試してみよう!チリツモ式読み込み速度ダイエット!

サイトの読み込み速度が気になっているみなさん、検索順位に影響が出始める7月までに読み込み速度ダイエットを実施しましょう!7月は常時SSL化の動きが強まるタイミングでもありますし、やることが多そうですね。弊社の担当者も、対応をしはじめたところです。ご担当者の皆さん、がんばってください!

関連記事

  1. コンサルタントのコラム

    Googleアナリティクスの使い方 知りたい情報を引き出すカスタマイズ 3つのポイント

    今回は「自分の知りたい数字を見ることができるようにGoogleアナリテ…

  2. コンサルタントのコラム

    もっとMAを活用するために「教科書通りの使い方から卒業」しよう!

    MAを導入してみると、意外と出来ることが少ないことに驚く人がいます。M…

  3. ジェネシス会議

    【ジェネシス会議】Twitterのキーワードで振り返る!2017年のマーケティング動向と注目のキーワ…

    もう2017年の年末です。今年一年は皆さんにとってどんな一年でしたでし…

  4. コンサルタントのコラム

    JリーグとBリーグの相違点にみるデジタルマーケティングの現在地

    いよいよロシアワールドカップが開幕です。ハリルホジッチ監督の解任で味噌…

  5. communication

    コンサルタントのコラム

    マーケティングオートメーションの「カナメ」の機能とは?

    マーケティングオートメーション(MA)は数多くの機能を搭載しています。…

コメント

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

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

CAPTCHA


ジェネシス「マーケの強化書」Twitter

「マーケの強化書」更新情報お届け

マーケの強化書の更新情報をお届けします。
幅広い視点で情報をお届けします。
メールアドレスをご登録ください。
※ご入力前に「個人情報保護方針」をご確認ください。

採用情報

  1. コンサルタントのコラム

    販促企画に行き詰まったときに使える!ジム・コブスの99通りのオファー
  2. コンサルタントのコラム

    38人のマーケティング担当者のアンケートからみえてくる「マーケティング施策の変化…
  3. 注目のトレンド

    【セミナーレポート】サイトリニューアルにおける最新テクノロジー導入方法とポイント…
  4. 仕事の強化書

    提案書やアイディア出しに意外と使える!『Pinterest』活用法
  5. コンサルタントのコラム

    「商品に不満はない!」いま求められる「素敵な時間を過ごしてもらうマーケティング」…
PAGE TOP