blog-hero-img

ウェブサイトのスピードUP前に知りたかったこと

pen-icon2020.10.10rewrite-icon2021.03.10

この記事は約3分で読めます

Profile Pic

この記事の筆者:三好アキ


🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。

🔹 Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』著者。


Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて無料配信中。登録はこちらから → 無料メルマガ登録

表示スピードは利益に直結する

ウェブサイトのスピードは、ビジネスの売り上げに直結する重要な要素です。

Googleの調査では下記のような結果が出ており、ページの表示までに5秒以上かかると90%のユーザーはページを閉じて離脱します。


• 1-3秒のロード時間:離脱率32%

• 1-5秒のロード時間:離脱率90%

• 1-6秒のロード時間:離脱率106%

• 1-10秒のロード時間:離脱率123%


このような結果を見るとすぐにでもスピードをしたくなりますが、その前に考えるべきことがあります。

すべてのページを高速化する必要はない

ユーザーはあなたのサイトの全ページを見るわけではありません。

なので、ユーザーの流入が少ないページの高速化は後回しにして、流入が多いページや重要度の高いページの高速化を優先するのが効率的です。

一般的に「重要度の高いページ」とは、ユーザーにお問い合わせや登録をしてもらうページのことで、そのようなページの表示スピードやレスポンスが遅い場合、ユーザーにストレスを与え離脱率を高めます。

ランディングページ(LP)も「重要度の高いページ」に含まれます。

あえてLPに言及したのは、LPはユーザーのエンゲージメントを高めるために画像を多く使うケースが多く、その分ページの表示スピードも遅くなる傾向があるからです。

高速化すると売上が改善するわけではない

ウェブサイトの表示速度を改善し、スピードUPをすることには検索ランキングの改善、ユーザーの離脱率低下、コンバージョン率の上昇などベネフィットがたくさんあります。

しかし、高速化を優先しすぎることには問題もあります。

多くのウェブサイトで、高速化のために一番最初にすべきことはデータ量の多い画像の最適化ですが、例えばスピードを優先するあまり商品画像の解像度を落としすぎると、ユーザーにその商品の魅力を伝えるのに失敗する可能性が高まります。

スピードアップを成功につなげるために

スピードUPをする前に、まずは「どのページがビジネス上重要なページか」「どのページにユーザーの流入が多いか」「どのページで離脱率が高いか」などユーザーの行動を細かく分析しましょう。

ユーザーの行動は、「Googleアナリティクスはこの4つの数字だけみれば十分です」で紹介したGoogleアナリティクスを使えば簡単に調べることができます。

ユーザーの行動を分析した上で、どのページで高速化の必要性が高いかを判定し、その中でもとくにユーザーとの接点を作るページ(ユーザーに氏名や連絡先を入力してもらうページ)を優先してスピードUPを図ります。

これと並行して、各ページにおける画像の重要性も評価します。

画像に注目するのは、ウェブサイトのスピードを下げる最大の原因が画像だからです。

前述のように画像の解像度を下げることがマイナスの結果をもたらすこともあるので、それを避けるために「どのくらいの解像度までなら画質を下げられるか」、もしくは「ここには本当にこの画像が必要か」などを精査しましょう。

画像のクオリティを保ちながらサイズを下げる方法もあるので、次の記事を参考にしてみてください。

このようなプロセスを踏んだ上で、最後に重要になるのがテストです。

スピードUPをする前とした後のウェブサイトをA/Bテストにかけ、どれくらい違いが出たのか測定し、改善効果がどれくらいあるのか調べてチューニングしていきましょう。

Profile Pic

メルマガ配信中
(from 三好アキ/エンジニア)


React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
(*配信はいつでも停止できます)