コンサルタントのコラム

【マーケティング・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. communication

    コンサルタントのコラム

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

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

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

    『働き方改革』を実現するための「3つのマーケティングテクノロジー活用事例」をご紹介

    日本は、「人口の減少」という課題に直面しています。特に大きいのは「労働…

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

    無料でMA機能活用、マーケティング成果を出す!

    無料でMA機能が使える?MAは数十万円/月の利用料が必…

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

    初心者必見!SEOの3つのポイントとGoogleが掲げる10の事実

    どんな企業も気になる自社サイトの検索順位。SEOはどの企業にとっても大…

  5. 仕事の強化書

    「Googleデータスタジオ」でマーケティングデータを可視化しよう【マーケティング担当者必見】

    最近社内でGoogleアナリティクスを使って分析する機会が多いのですが…

  6. 金融

コメント

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

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

CAPTCHA


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

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

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

採用情報

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

    【マーケ担当者必見!】デバイスが変わってもユーザーを捕捉!Googleアナリティ…
  2. 成果を出すマーケティングオートメーション(全3回)

    成果を出すマーケティングオートメーション ~導入から運用まで、意外な場所に潜む落…
  3. セミナー&イベント

    【2018年12月】マーケティングセミナー&イベント紹介
  4. コンサルタントのコラム

    JリーグとBリーグの相違点にみるデジタルマーケティングの現在地
  5. コンサルタントのコラム

    【マーケティング担当者の新しい課題】音声検索でヒットさせる言葉の選び方[2つのポ…
PAGE TOP