March 10.2021

WEBサイト表示高速化の基本!デザイナーが知っておくべき表示速度の改善方法

サイト表示高速化

こんにちは!デザイナーのアローです。

UX向上とSEO対策に不可欠なのが、WEBページの表示速度です。

ユーザーにストレスがかからない環境を作ることは、満足度の高いページになり、滞在時間を延ばし離脱率を改善することにも繋がります。

今回はWEB制作者が知っておきたい、サイトの高速化についてご紹介したいと思います!

まずは表示速度の分析ツールをつかってみよう!

【グーグル株式会社】

Google Page Speed Insights
Google Page Speed Insights

Google Page Speed Insightsは、ページの読み込み速度を短くするための方法を提案してくれるツールです。まず初めに、こういったツールを使用し、ページの表示速度の現状と改善ポイントを把握してみましょう。

Google Page Speed Insights

URLを入力するだけで、自動で分析をしてくれます。

スコアとともにgoogleからの改善推奨ポイントが表示されるため、改善を重ねることで表示速度を適切にすることができます。

コンテンツの詰め込み過ぎに注意!

沢山のコンテンツ詰め込みたい気持ちはわかりますが、画像や動画などを一ページに詰め込み過ぎてしまうと、読み込みが遅くなり、ユーザーのストレスとなりかねません。

出来るだけ読み込み速度の負荷のかからないように工夫することで、ユーザーによって快適なページになるようにしましょう。

【画像の多いページにおすすめの外部ツール】

どうしても画像の多いページには、画像圧縮ツールがオススメ!

圧縮画像は画質の低いイメージがありますが、画質を著しく下げることなく圧縮することが可能です。

Tinypng
Tinypng

動画コンテンツが重い!そんな時の解決法

ページに動画コンテンツを挿入する際は、ファイルが大きいと動作が重くなり、うまく再生されないことがあります。

そんな時は、不要な部分をカットするなどして出来るだけ容量が軽くなるようにしましょう。また、動画のファイル形式を見直してみるのもいいでしょう。

もしも容量を軽くするための拡張子に迷ったのであれば、現在、最も多く使用されている「MP4」がおすすめです。

様々な機種に対応しており、もちろんスマートフォンからの再生も可能です。

それでも解決できない場合は、YOUTUBEなどに上げた動画の埋め込みタグを使用してみてはいかがでしょうか。

出来るだけ快適な表示速度になるように改善していきましょう。

小さな改善の積み重ねで高速化を実現!

この他にも、画像には適した拡張子を用いることや、CSSの書き方など、サイトの高速化につながるポイントは沢山あります。

小さな改善の積み重ねでサイトの高速化を少しずつ実現させることで、「ユーザーにとって快適なページ」は出来上がります。

ユーザーの満足度の高いページとなるようにユーザー目線で工夫を凝らすことで、結果的に滞在時間を伸ばし、評価の高いサイトに育てていきましょう。