【読み込み速度を速くするには…】サイトの読み込み時間を短縮してより良いUXをデザインする

ウェブサイトの構築においては、数多くのことを考慮しなければなりません。コンテンツ、SEO、CTAなどが代表例です。中でも特にUXに直接影響を及ぼす要素として、ウェブページの読み込み時間の短縮は避けて通れません。この記事では、読み込み時間を短縮する効果的な方法について紹介します。

まずは現状を知ろう

作業に取り掛かる前に、まずは現状を知っておきましょう。ウェブ開発をしているのであれば、おそらく高速なインターネット環境をお持ちでしょう。多数の計測ツールがリリースされていますので、お好きなものを使って読み込み時間を計測してください。

画像を最適化する

効果が大きいのは画像の最適化です。画像が増えればページ全体のサイズも大きくなります。画像の読み込み完了までユーザーを待たせてしまうのはいいUXとは言えません。少しでもそうした時間を短縮するには、次のことを検討してみてください。

1. 1.画像形式：通常はJPEGを使うことが多いでしょうが、ロゴやサイン、アイコン、イラスト、テキストにはPNGが適しています。GIFも使用できますが、現在は小さく単純な画像にのみ使うのが無難でしょう。TIFFやBMPはサイズが非常に大きいのでウェブでは使わないでください。
2. 2.圧縮：画質に大きな影響を与えずにサイズを小さくすることができます。JPEGでは70%の設定で画質とサイズのバランスが取れることが多いようです。
3. 3.画像の数：ビジュアルを多用するビジネスを行っているのでない限り、画像の数をあまり増やしてはいけません。本当に必要なもののみに絞ってください。

CSSを最適化する

CSSとJavaScriptのおかげで豪華なウェブを作ることができますが、CSSも読み込み時間に影響します。少しの最適化で快適なページを作ることができますよ。

1. 1.できるだけ簡潔に書く：宣言や演算を最小限にすることでコードのサイズを小さくすることができます。
2. 2.特定ブラウザ向けのコードを取り除く：特定のブラウザに向けたコードはCSSのサイズを増加させます。簡潔で軽量なCSSを目指しましょう。

コードをできるだけ小さくする

パフォーマンスの最適化においては通信を減らすことも重要です。コードを出来る限り短くすることで通信と読み込み時間を削減できます。Googleによれば、4096バイトを超えるJavaScriptはユーザー側に問題を起こすことなく小さくできると言います。これに加えて、余分なスペースや行を削除するのも効果的です。

画像、CSS、コードの3つを小さくすることでウェブページの読み込み時間を短縮し、スムーズな体験を作ることができます。無料のツールでできることばかりですので、ぜひ挑戦してみてください。

※本記事は、How to improve loading times of your websiteを翻訳・再構成したものです。