先日お客様からこんなことを聞かれました。
競合のWEBサイトと似た作りなのに、なんでうちのWEBサイトはこんなに重いの？
画像の枚数や文章量も同じくらいなのに、なぜ同じようなWEBサイトでも表示が遅くなってしまうのでしょうか？
そもそもWEBサイトの表示が遅いとどうなるの？
WEBサイトの表示が遅いと、ユーザーにとってどんな影響があるのか？
「ちょっとぐらい遅くても大丈夫でしょ」と思いがちですが、実はたった数秒の遅れが機会損失につながる可能性があります。
ユーザーが離脱しやすくなる
多くのユーザーは、WEBサイトを開いて3秒以内に「見る・見ない」を判断すると言われています。
ページがなかなか表示されないと他のサイトへ移ってしまうことがほとんどです。
特にスマホユーザーは通信環境の影響も受けやすいため、表示速度はよりシビアになります。
検索順位（SEO）に影響する
Googleも「ページの表示速度はランキング要素のひとつ」と明言しています。
表示が遅いサイトは、ユーザーにとってストレスになる＝評価が下がるという仕組みです。
せっかく良いコンテンツがあっても、スピードが遅いだけで検索順位が不利になることもあります。
コンバージョン率が下がる
問い合わせや資料請求など、成果につながる行動（＝コンバージョン）にも影響します。
表示が遅ければ遅いほど、ユーザーはイライラし、途中で諦めて離脱してしまうリスクが高くなります。
たとえば、会社案内や製品の資料請求フォームを開くのに時間がかかれば…
「まあいっか」で閉じられてしまうことも十分ありえます。
見た目や内容がどれだけよくても、スピードが遅ければすべてが台無しになってしまいます。
まずは「速くてストレスのない閲覧環境」をつくることが大切です。
WEBサイトの表示が遅いときに確認すべき3つのポイント
【表示が遅いときのチェックポイント①】動画を多く使っていないか？
このような動画を埋め込んでいると表示が遅くなる原因になります。
スマホでアクセスして、ずーっと読み込み中のぐるぐる…その間に他のサイトに流れちゃう、なんてこともありえます。
「とにかく表示を早くしたい」という方は動画を使わない！
「とにかく表示を早くしたい」という方には動画を使わないことをおすすめします。
例えば、ファーストビューに動画があると確かにインパクトがあり、印象に残るかもしれません。
ただ、環境によってはその動画が原因でWEBサイトの表示が遅くなり、見てもらえない可能性があります。見てもらえなければ元も子もありません。
でも動画も載せたいしサイトの表示も早くしたい…
「動画を載せたいしサイトの表示も早くしたい！」という方は以下のようなことを試してみてください！
「Lazy Load（遅延読み込み）」を使ってみる
Lazy Loadはカンタンに言うと「見えてない部分の画像や動画は後から読み込むようにする技術」のことです。
例えば、縦長のWEBページに画像が20枚あったとします。
Lazy Loadなしの場合、 ページを開いた瞬間に20枚すべてを読み込もうとします。 するとサイトが重くなって、表示が遅くなります。
Lazy Loadがあると、最初は画面に見えてる部分（例：上の3枚）だけ読み込みます。すると、スクロールのタイミングで次の画像を読み込みます。必要なときだけ読み込むから、最初の表示がサクサクなんです！
「Lazy Load」をどうやって設定するの？
画像のタグに loading=”lazy” を追加するだけ！
<img src="photo.jpg" alt="写真" loading="lazy">対応ブラウザ： ほとんどのモダンブラウザで対応してるので安心して使えます。
見た目は動画っぽい静止画だけを配置する
↓こちらをご覧ください
一見、youtubeの埋め込みに見えますが、実はこれ…ただの画像なんです。
動画の代わりに画像を配置してクリックすることでyoutubeに移動し視聴できるという仕組みです。
動画を置かなくて済むのでサイトが軽くなります。
ただ、youtubeに移動することでWEBサイトからは離脱してしまうのでコンバージョンを意識されている方は注意が必要です。
動画を圧縮したり短くする
「動画圧縮」と検索すると様々なツールがでてくるのでそれを使ってみるのも良いですね。
また、会社案内やあいさつ動画を15〜30秒ほどに短縮してハイライト版にしてWEBサイトが重くならない工夫をするのもおすすめです。
【表示が遅いときのチェックポイント②】画像が重すぎないか？
WEBサイトを重くする原因の中でも、「画像の重さ」はかなりの割合を占めます。
こういう画像、意外と多いんです。
1枚2MBの画像が10枚…それだけで合計20MB！Wi-Fiじゃなかったら地獄です…
画像が重いときの対策
画像を圧縮する
TinyPNGというツールを使うのがおすすめです。
「TinyPNG」とはブラウザ上で利用できる画像圧縮ツールです。
画像によっては80%以上の圧縮が可能で圧縮前の画像と見比べてもほとんど劣化が見られません。
【ちょいムズ】WebP形式で保存する
WebPは、Googleが開発した次世代の画像フォーマットで「JPEGやPNGよりも軽くてキレイな画像フォーマット」とされています。
| 比較 | JPG | PNG | WebP（オススメ！） |
|---|---|---|---|
| 写真 | ◎ | △ | ◎ |
| 背景透過 | × | ◎ | ◎ |
| 圧縮率 | ◯（まあまあ） | △（大きい） | ◎（めちゃ軽い） |
| 画質の劣化 | 少しあり | なし | なし |
つまり、JPEGより軽くてPNGみたいに透過もできてしかもキレイ！Webサイトに最適です✨
WebP画像の作り方
① オンラインで変換
無料で使える変換ツールを使えばOK！
・Squoosh
・CloudConvert
・Convertio
② Photoshopで保存する（CC 以降）
Photoshop 2022以降なら「WebP形式で保存」できます。
・画像を開く
・「別名で保存」
・ファイル形式を「WebP」に変更して保存
表示エリアに合わせてリサイズして使う
横幅300pxの枠に横幅2000pxの画像は不要です。
横幅300pxの画像を用意しましょう。画像の見た目はキレイでも重たいとそれだけで読み込みが遅くなってしまうので要注意です。
【表示が遅いときのチェックポイント③】使っているフォントが多すぎないか？
デザインにこだわると、ついつい色んなフォントを使いたくなりますよね。
でも、WEBフォント（Google Fontsなど）を複数読み込むとそれだけでサイトは重くなります。
特に、日本語フォントは英語に比べてデータが重たい！
おしゃれに見せたい気持ちは分かりますが、読み込みの軽さ＝ユーザー体験の快適さです。ちょっとした我慢が結果的に見てもらえるサイトにつながります！
WEBサイトの表示スピードは、ただの技術的な問題ではありません。
表示が遅いだけで、せっかくの集客や信頼がガクッと下がることもあります。
まずはこの3つをチェックしてみてください！
◎サイトスピードのチェックには「PageSpeed Insights」がおすすめ！
WEBサイトのサイトスピードのチェックにはgoogleが提供する「PageSpeed Insights」がおすすめです。
スコアは80点以上が理想ですが、60点程度でも実用レベルと考えてよいでしょう！
「PageSpeed Insights」は無料で使えるのでぜひ使ってみてください！
PageSpeed Insightsはこちら↓
https://pagespeed.web.dev/
コメント