Web表示速度を上げるとCV率が上がる？ ー 表示速度を上げる方法
[初公開：2018.06.28] TestMySite with Googleの仕様変更にともない再編集してお届けします。
スマホ化が進み、通信の高速化も相まって、読み込み速度の遅いサイトに対するユーザーの許容レベルも低くなってきました。実際わたしも、スマホでブラウジングしているときは、PCサイトを見ているときよりも、読み込み時間に対する我慢の限界が早めにやってくるように思います。皆さんはどうでしょう？2秒くらいですぐ閉じてしまいませんか？
- 目次
webサイトの表示速度が1秒遅れるとどうなるの…？
たった1秒、されど1秒。webサイトの画面が開くまでの待っているときの1秒って、思いのほか長いですよね。表示速度が1秒遅れることが原因で、
- ページビューが11％下がる
- カスタマー満足度が16％下がる
- コンバージョン率が7％下がる
と言われています。また、2018年7月からは、読み込み速度が検索順位にも影響し、2021年5月からは、Core Web Vitals※も検索順位の要因として影響するするようになったため、webサイト運営者にとって1秒はとても貴重な時間となるでしょう。
※Core Web Vitalsについては、コチラの解説記事でも
大きな画像を使って「魅せる」コンテンツを作りたいのに…
一方、最近のwebサイトデザインのトレンドとして、大きなサイズの画像を使ったり、リッチな動きをする演出を加えたり、動画を掲載したりと、webサイトの「重量化」も並行して進んでいます。例えば新築マンションの物件サイトや自動車のブランドサイトなど、デザインのトレンドに関係なく高額な商品を購入してもらえるよう高級感やその魅力を伝えたいサイトは、全体的にリッチな作りになっています。
このようなサイトでは、「大きな画像は使わない」「リッチな演出は削る」という選択肢はありません。ではどうすれば軽量化できるのでしょうか…？
その画像、ホントに画像でないとダメ？
webサイト軽量化の手段はたくさんありますが、多くの人がまず頭に浮かべるのは画像の軽量化だと思います。実際、ページをダウンロードする際、データ量のほとんどを占めるのは画像です。
前述のとおり、大きな画像などを使って「魅せる」演出をしなくてはならないケースもあるでしょう。その反面、『どうしても画像にしなくてはならないというわけではないけど画像になっている…』というものがサイトの中にゴロゴロ転がっているはずです。
そこで、画像化の優先順位付けをしてみましょう。「別に画像でなくてもいいかも？」という部分で、画像にしないという選択をするのです。
webフォントやCSSを活用しよう
2010年頃から、webフォントサービスが次々とリリースされ、2013年頃からは日本語のwebフォントも徐々に利用ができるようになりました。webフォントを使えば、これまでデバイス側に依存されていたテキストの表示もコントロールすることができるため、デザイン表現の幅が大きく広がります。
また、CSSを活用してwebサイトにアクセントをつけることもできます。CSSデザインのサンプルコードが紹介されているwebサイトも多数あります。例えばこちらのサイトでは、「CSSで作る！押したくなるボタンデザイン」や、「CSSで作る！吹き出しデザインのサンプル」など、サンプルコードを紹介しており、webアイコンを文字で表示できる、webアイコンフォントの「FontAwesome」の使い方も解説してくれています。
こちらのボタン、css+FontAwersomeを用いてこの記事に直接記述したものです。
このように、これまで画像で作っていたようなボタン類、アイコン類は、webフォントとCSSを活用することで掲載できるようになります。ひとつひとつの容量は小さいかもしれませんが、ちりも積もれば山となる！ぜひ活用してみてください。
自サイトの読み込み速度を測ってみよう！
読み込み速度が遅い・速いといっても、経験ベースで話していることが多いのではないかと思うのですが、きっちりと数字で出してくれる測定ツールもあります。
Googleは2種類の読み込み速度測定ツールを提供しています。同じ業界のさまざまなサイトを測定するとなかなか興味深い結果が出ますので、お時間よろしいときに是非試してみてください。
■PageSpeed Insights（PC・モバイル）
■TestMySite with Google（モバイル）
TestMySite with Googleは「同じ業界内トップクラスのサイトよりも、あなたのサイト遅いですよ」という比較も出してくれていました。下記画像の青いテスト画面を覚えている方も多いと思います。
新しいTestMySiteは詳細なレポートをメールアドレス宛に届けてくれます。一緒に使い方を簡単に見てみましょう。
まずは自社サイトのドメインを入力します。
速度テストの結果。うっ低速なのですか・・・色々と思い当たる節はございますが、精進いたします。
『速度を改善する』『一人ひとりの心つかむ』『プロセスをシームレスに』の3つの視点でページの改善について教えてくれます。
こちらのアドバイスは【詳細なレポートを作成】のボタンを押すと、メールアドレス・会社名・国を選択後、メール宛にレポートを送ってもらえます。
試してみよう！チリツモ式読み込み速度ダイエット！
サイトの読み込み速度が気になっているみなさん、読み込み速度ダイエットを実施しましょう！マーケの強化書の担当者も読者の皆様のサイト閲覧環境向上のため頑張ります！
ご担当者の皆さん、頑張っていきましょう！
