Webサイトを作っていると、「なんだかページの表示が遅いな……」と感じることがありますよね。サイトの読み込み速度は、訪問者がサイトに留まるか離れるかを決める重要なポイントです。
今回は、初心者でも簡単に実行できる施策から、少し手間がかかるけれど効果的な施策まで、サイトを高速化してパフォーマンスを上げる方法をご紹介します。
- サイトの読み込みが遅くて困っている人
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
手軽にできる施策編
1．画像のリサイズ・変換・圧縮
サイトに使う画像は必要以上に大きい場合が多く、これが読み込み速度を遅くする原因になります。
まずは「iLoveIMG」などの画像編集ツールを使って適切なサイズにリサイズし、画像形式をPNGやJPEGから、より軽量な形式であるWebP（ウェッピー）に変更しましょう。
それでも読み込みが遅い場合は、画質を落として圧縮することでサイズを軽くすることができます。
画像編集に便利なオンラインツールを紹介します。インストール不要で、簡単にリサイズなどの編集ができます！
【リサイズ】
【画像形式の変換】
【圧縮】
画像の容量削減について詳しくは、こちらの記事で解説していますので、ご覧ください！
2．スマホとPCで画像を出し分ける
画像を出し分けるときは、<picture>タグを使う方法があります。<picture>タグは、画面サイズに応じて最適な画像を出し分けられるタグです。
例えば、スマホでは容量の小さい画像を表示し、PCではより高解像度の画像を使うなどの調整ができます。デバイスごとに適したファイルサイズで表示することで、無駄なデータの読み込みを防げます。
使い方はシンプルです。<source>タグを使って条件を指定し、最後に<img>タグでデフォルト画像を設定します。
<picture>
<source media="(min-width: 1024px)" srcset="image-large.jpg">
<source media="(min-width: 600px)" srcset="image-medium.jpg">
<img src="image-small.jpg" alt="サンプル画像">
</picture>このコードでは、
- 1024px以上の画面には、大きな画像
- 600px以上1023px以下には、中くらいの画像
- それより小さい画面には、軽量な小さい画像
を表示します。
<source>タグは何個でも書くことができますが、<img>タグよりも上に書いてください。
それぞれのサイズの画像をあらかじめ用意しておきましょう。
なお、画像の出し分けは、CSSを使う方法でも実装できます。
3．遅延（defer）属性を使ってJavaScriptを読み込む
JavaScriptファイルを読み込む際にdefer属性を使用しましょう。
deferはHTMLがすべて読み込まれた後にJavaScriptを実行します。JavaScriptを装飾等で使用している場合は、JavaScriptの優先度が低いので、 </head> にまとめて配置したJavaScriptをdeferで後から読み込むことが推奨されます。
4．プレローディングを導入する
重要なファイル（CSS、JS、フォントなど）を事前に読み込ませるよう、
<link rel="preload">を利用しましょう。ブラウザが重要なファイルを早期に取得できるため、ページ表示がスムーズになります。
例：<link rel="preload" href="style.css" as="style">
プレローディングを導入すると、最初に読み込みが入るので表示スピードが遅くなるような気がしますが、基本的には表示スピードは速くなります。
例えばファーストビューの表示に関係するファイルを先に読み込むようにすることで、ファーストビューの表示を高速化できます。
ただ、不必要なファイルをpreloadしすぎると、逆に初期読み込みが重くなる可能性もあります。必要なファイルのみを対象にしましょう！
5．Webフォントの使用を見直す
Webフォントはサイトデザインを美しくしますが、読み込み速度の遅延につながることがあります。利用しているフォントを必要最低限に絞り込みましょう。
Google Fontsであれば表示文字を限定して読み込む設定ができます。
6．不要なプラグインやコードを削除する
WordPressなどを使っている場合、不要なプラグインを削除しましょう。また、自作サイトの場合も、使わないコード（コメントアウトされたコードなど）を整理しましょう。
不要なコードやプラグインが減ることで、ブラウザが読み込むファイルが減少し、ページ表示が速くなります。
少し手間がかかるが効果が高い施策編
7．コードを分割する
CSSやJavaScriptのコードを分割することで、初期読み込みを軽くし、体感速度を上げることができます。ページや機能に応じて必要なコードだけを読み込みましょう。
特にJSファイルが大きい場合や、ページごとの機能が大きく異なる場合に効果的です。「共通処理」と「ページ別処理」をファイル分けするだけで十分効果があります。
分割しすぎると逆効果なので、「必要なときに読み込む」ことが大切です！
8．CSSやJavaScriptファイルを圧縮する
CSSやJavaScriptのコードも、CSS MinifierやJSCompressなどのオンラインツールを使って無駄な記述を削除し、圧縮することができます。
圧縮後にエラーが出たり、表示や挙動がおかしくなってしまうことがあるので、かならずテストしてから本番環境に反映させてください。圧縮前は事前にエラーがないコードにしておきましょう。
9．遅延読み込みを導入する
サイト内で画像や動画がたくさんある場合は、「遅延読み込み」を導入しましょう。
「遅延読み込み」とは、ユーザーが画面をスクロールした時に画像や動画を読み込むようにする設定です。最初のページ表示に必要な画像や動画のみが読み込まれるため、初期表示速度が劇的に改善します。
WordPressなら「a3 Lazy Load」などのプラグインで、通常のサイトなら「Lazy Load」などのJavaScriptライブラリを使って簡単に設定できます。
10．HTMLを最適化する
ページ内に不必要に多くのHTML要素（DOM要素）があると、ブラウザの描画処理が遅くなります。HTML構造を見直し、できるだけ簡潔にすることを意識しましょう。
【まとめ】
Webサイトの表示速度が遅いと感じたら、まずは手軽な施策からスタートしてみてください。画像のリサイズや拡張子変更はすぐにできて効果も実感しやすいためおすすめです。
サイトが高速になると訪問者の満足度も向上し、SEO効果も期待できます。一歩ずつ実践してサイトのパフォーマンスをアップさせましょう！
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
