ページ読み込み速度を
改善する4つのポイント

ページ読み込み速度を改善するポイントをまとめました。
比較的簡単に取り組めるものを中心に紹介していますので参考にしてみて下さい。

※専門的なWebの知識はないが、自分でWebサイトを管理している個人事業主の方やページ読み込み速度を特に気にしていなかった制作者の方向けの内容になっています。

そもそもWebサイトのページ読み込み速度って重要？

1.Webサイトの使いやすさとの相関性

Webサイトのページ読み込み速度が遅いとユーザーは使いにくく感じ、サイトから離れてしまう可能性が高くなります。そのため、ページの読み込み速度を最適化し、使いやすいインターフェースのWebサイトであることが大切です。

2.検索順位を決める一つの指標

検索エンジンはページ読み込み速度を検索順位を決める指標の一つとしています。そのため、ページの読み込み速度の改善は検索エンジン最適化の一環としても重要です。

ページ読み込み速度を改善する4つのポイント

1.画像ファイルの最適化

画像ファイルを圧縮する

ファイルサイズが大きくなりがちな画像ファイルは圧縮ツール等で適切なファイルサイズにすることが大切です。比較的簡単に取り組め、ページ読み込み速度改善の効果も得られやすいです。

私はImageOptimというアプリを使っています。
アプリを開いて、ファイルをドラッグ&ドロップするだけで圧縮でき、簡単でわかりやすい操作性と画質の劣化も少なく、気に入っています。
ImageOptim

遅延読み込み

ブラウザ画面外にある画像の読み込みを遅らせ、画面内にある画像から優先し、読み込みませます。下記のようにimgタグのloading属性にlazyの値を付与します。

<img src="xxx.jpg" loading="lazy">

WebPを使う

WebP（ウエッピー）はGoogleが開発している次世代の画像フォーマットです。JPEG、PNGよりさらに軽く、ページ読み込み速度の向上が期待できます。
jpgやpngファイルをサクッと変換したい場合は下記のサイトがオススメです。PNG・JPEGをWebP画像に一括変換｜サルワカ道具箱

2.動画ファイルの最適化

動画ファイルを圧縮する

Webサイトに動画を使用する場合はファイルサイズに注意が必要です。
大きくても、10MB以内には抑えたいところです。
自社のネット環境では問題なく表示されていても、ユーザーの環境によっては動画の読み込みに時間がかかっているケースもあります。解像度を下げる、不要な部分はカットするなどし、なるべく、ファイルサイズを軽くすることが大切です。

3.JavaScriptの最適化

jsファイルを圧縮する

不要なスペース等は削除し、ファイルサイズを縮小します。
オンラインで簡単に圧縮できるツールもあります。
JavaScript / Css 圧縮・軽量化（Minify）：ファイルを圧縮して表示速度を上げる | ラッコツールズ

複数に分かれているjsファイルを統合する

複数のファイルを統合することで、ブラウザからサーバーへのリクエスト回数を減らします。
※統合することでファイルサイズが大きくなりすぎると、逆効果の可能性もあるので注意も必要です。

非同期で読み込む

scriptタグにasync、またはdeferを付与し、ファイルを非同期で読み込ませ、HTML・CSSの読み込みを妨げないようにします。
scriptの動作に関わる場合もあるので、少し注意が必要です。

async（エイシンク）
HTML・CSSを読み込みつつ、scriptの読み込みが完了した時点で実行

<script src=“xxx.js” async></script>

defer（ディファー）
scriptの実行を遅延し、HTML・CSS読み込みが完了してから実行

<script src=“xxx.js” defer></script>

4.CSSの最適化

jsファイルを圧縮する

不要なスペースは削除し、ファイルサイズを縮小します。
オンラインで簡単に圧縮できるツールもあります。
JavaScript / Css 圧縮・軽量化（Minify）：ファイルを圧縮して表示速度を上げる | ラッコツールズ

複数に分かれているcssファイルを統合する

複数のファイルを統合することで、ブラウザからサーバーへのリクエスト回数を減らします。

まとめ

ページの読み込み速度はユーザーにとってのサイトの使いやすさであり、コンバージョン率や直帰率・離脱率に影響を与えます。

また、検索エンジンはページの読み込み速度を検索順位を決める指標の一つとしています。ただし、あくまでも数ある指標の中の一つに過ぎません。

ページの読み込み速度を改善するために様々な手段がありますが、画像ファイルの圧縮は比較的簡単に取り組むことができ、改善効果も出やすいので、まずはここから見直すのがオススメです。