詳しくはこちら
【最新版】Webサイトの表示スピードを高速化させる手法「26選」
Webサイトの表示スピードを高速化させると、ユーザー体験が向上し、最終的にコンバージョンに繋がりやすくなります。
最近、表示スピードの改善案件に携わり、そのときに対応したことや覚えたことを中心に、主にフロントサイドで改善出来ることを紹介します。（一部サーバーサイドもあります）
各見出しに「優先度」を「低・中・高」で記載しているので、「対応する、しない...」などの参考にしてみて下さい。
この「優先度」は以下3点を基準に付けています。
- どの程度表示スピードを改善できるかどうか
- 対応の難易度
- 実務上で許可をもらいやすいか
目次
はじめに
Webサイトの表示スピードは主に以下の点で決まります。
- サーバーへの「リクエスト回数」
- サーバーへ「リクエストした内容のサイズ」
- サーバーへの「リクエストタイミング」
他にも要因はたくさんありますが、今回紹介する内容ではこの3点を中心に改善してきます。
リクエスト回数
「リクエスト回数」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「回数」です。
ダウンロードの回数が多ければ多いほど、サイトの表示に時間がかかります。
なので、ダウンロードする回数を減らすことで、ページ読み込みのスピードが早くなります。
リクエストした内容のサイズ
「リクエストした内容のサイズ」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードした時の「ファイルサイズ」です。
ファイルサイズが大きければ大きいほどダウンロードに時間がかかるので、その分サイトの表示も時間がかかります。
なので、ファイルサイズを小さくすることで、ページ読み込みのスピードが早くなります。
リクエストタイミング
「リクエストタイミング」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「タイミング」です。
何も対策をしていなければ、サイト訪問時に全ての情報をダウンロードします。
しかし、このダウンロードするタイミングを以下のようにするとします。
- サイト訪問時には、「ファーストビューに関する情報のみ」ダウンロードする
- ページをスクロールすると、「他の情報（画像など）」をダウンロードする
このようにすることで、サイト訪問時には必要最低限の情報のみをダウンロードするので、ページ読み込みのスピードが早くなります。
CSS
CSSファイルの非同期読み込み「優先度：中」
ブラウザがWebサイトを読み込む順番は以下のようなイメージです。
- HTMLを上から順番に読んでいく
- CSSやJSファイルの読み込みの記述（<link>や<script>）があったら、HTMLの読み込みをストップ
- CSSやJSファイルをダウンロードする
- ダウンロード後に実行
- 実行が終わったら、HTMLの読み込みを再開
この繰り返しでWebサイトは表示されます。
上記の通り、ファイルのダウンロード中はHTMLの読み込みは行われないので、ファイルのダウンロードする時間が長ければ長いほど、サイトの表示が遅くなります。
しかし、ファイルのダウンロード中でもHTMLを読み込ませる方法があり、それが「非同期読み込み」になります。
CSSの非同期読み込みは、以下のように<link>を読み込ませるだけです。
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">media="print" onload="this.media='all'"を追加することで、CSSが非同期読み込みになります。
この書き方の詳しい仕組みはこちらの記事で解説されています。
注意点
CSSファイルを非同期読み込みすると、CSSファイルの実行（HTMLにスタイルを付与する処理）はHTMLが全て読み込まれた後に行われます。
つまり、HTMLに対してスタイルが付与されない状態で、文章などが画面に表示される時間が発生します。
いわゆる「表示崩れ」です。なので、サイト訪問時に見えるファーストビューには先にスタイルを付与させておく対応が必要です。
この対応をするには、ファーストビューに関係するCSSを<head>の中に<style>を使ってインラインで読み込ませます。
もっと凝りたい方は、「HTML読み込み中はファーストビュー以降のコンテンツを非表示にさせたり、代わりにローディング画像を表示させる」などの対応をしてもいいと思います。
@importは使わない「優先度：高」
CSSファイル内で他のCSSファイルを読み込ませる手段として@importが存在します。
@importを使うとファイルのリクエスト数が増えるので極力使わないようにして、1つのファイルにすべてのCSSを書くようにしましょう。
JavaScript
jsファイルの非同期読み込み「優先度：高」
CSSファイルと同様、jsファイルも非同期読み込みできます。
<script src="path" defer>
<script src="path" async>このように「defer」「async」のどちらかの属性を付与するだけです。
「defer」「async」の違いは以下の通りです。
| HTMLが全て読み込まれたらjsを実行する | jsのダウンロードが完了したら即時実行する |
| defer | async |
「async」を使うと、HTMLが最後まで読み込まれていない状態でjsが実行されるので、「要素が無いよ」「ライブラリが無いよ」などのエラーになる可能性があるので気をつけてください。
「defer」「async」の詳しい仕組みはこちらの記事で解説されています。
https://qiita.com/phanect/items/82c85ea4b8f9c373d684
<script>の読み込ませる位置について
<script>は</body>の手前で読み込ませるのが一般的でした。
しかし、非同期で読み込ませる場合は<head>の出来るだけ上のほうで読み込ませましょう。
注意点
<meta charset="UTF-8">より上に<script>を記述するとW3Cのバリデートでエラーになります。
jsの書き方を見直す「優先度：高」
jsは書き方次第で無駄な処理をしてしまい、その結果サイトスピードに影響を与えます。
以下は書き方の改善例になります。
| 改善前 | 改善後 |
| 同じ要素を何度も取得している | 変数に取得した要素を格納して、以後その変数を利用する |
| セレクタの指定を「クラス」で行う | セレクタの指定を「ID」で行う |
| スクロールイベントを何度も行う | スクロールイベントの発生回数を減らす |
jsの書き方の改善方法はこれらの記事で解説されています。ぜひ一度目を通してみて下さい。
https://w3g.jp/blog/intermittent_event_load_reduce
https://liginc.co.jp/programmer/archives/5183
https://news.mynavi.jp/article/20091111-a015/
jQueryを使わない「優先度：低」
「jQueryを使う＝jQueryのライブラリを読み込む」なので、サーバーへのリクエスト数が「1回分」増えます。とはいえ、既存のプロジェクトに既にjQueryが使われていて、それを全て生のJavaScriptに書き直すのは至難の業です。
既存のjQueryを書き直すには大幅な工数が必要なので、それなら他のスピード改善対応をするほうが良いと思います。
なので、新規でサイト制作をするときに「jQueryを使わないでコーディングできそうならそうする」程度の感覚で大丈夫です。
CSS、JavaScript共通
読み込ませるファイルを減らす「優先度：高」
「自作のCSSやJSファイル」や「外部ライブラリ」の読み込みが多ければ多いほど、サーバーへのリクエスト数が増えてしまい、その結果サイトの表示速度に影響を与えます。
なので、自身で作成したCSSとJSは、それぞれ「1ファイル」にまとめましょう。
外部ライブラリに関しては、「本当に必要かどうか？」「自分でその処理を書けないか？」などを検討してみましょう。
外部ライブラリをCDNで読み込ませる「優先度：高」
外部ライブラリを使用している場合は「CDN」で読み込みましょう。
jQueryの本体もCDNで読み込めます。
CDNとは
Contents Delivery Networkの略で、大容量のウェブコンテンツを云々かんぬんと説明されていることが多いですが、IT系おじさんにわかりやすいように一言で伝えるなら「URLが同じまま使えるミラーサイト」です。一昔前は大きめのファイルを配布する場合など、負荷分散を目的としてミラーサイトを複数立ち上げて、重い場合はこちらをお使いください的なことをやってましたよね。
それをURL同じままで実現している仕組み。格安な海外レンタルサーバーを借りつつCDNを利用して日本にあるサーバーと変わらないくらいの速度でアクセスできるようにする、なんて利用方法もあったりします。厳密にはミラーサイトではなくキャッシュサーバーなので、キャッシュされていないコンテンツへのアクセスは遅くなるのですが、JavaScriptライブラリのような変更されないコンテンツの配信には最適なわけです。
引用元：https://blog.ver001.com/cdnjs_jsdelivr/
ファイルサイズの圧縮（minify化）「優先度：中」
CSS、JSファイルの無駄な改行やコメントを削除して、ファイルサイズを圧縮させることを「minify化（ミニファイ化）」と言います。
昨今、minify化させる手段はたくさんあるので、ご自身の環境にあった方法で対応しましょう。
Webフォント
サブセット化（容量を減らす）「優先度：中」
Webフォントは種類によってファイルサイズが大きい場合があります。
特に日本語のWebフォントは、ひらがなや漢字が含まれるのでファイルサイズが大きくなりがちです。
そこで、ファイルサイズを減らす手法として「サブセット化」という方法があります。
サブセット化＝普段使うものだけを抜き出す作業。「第一水準漢字＋ひらがな＋記号」この辺りを抜き出せば普通のwebサイトであれば十分にまかなえるでしょう。 「第一水準漢字」などで検索すれば一覧などが出てきます。
引用元：以下URL
Webフォントをサブセット化する方法はこちらの記事で紹介されています。
https://qiita.com/tomonari-t/items/aa962786469640df415d
日本語のWebフォントをサブセット化すると、数十MB単位で容量を減らせますが、実務ではなかなか許可が降りない場合もあるので、対応するときは周りの人に相談するようにしましょう。
日本語Webフォントを使わない「優先度：中」
前述の通り、日本語のWebフォントは英語のWebフォントに比べファイルサイズが圧倒的に大きいです。
なので、もし、なんとなく日本語のWebフォントを使っているのであれば、デフォルトのフォントを使うようにしましょう。
画像
ファイルサイズの圧縮「優先度：高」
画像のファイルサイズは必ず圧縮（低く）しましょう。これだけでも、表示スピードはかなり変わります。
ファーストビューなど大きい画像以外は、基本的に300KB〜400KB以下にするようにしましょう。
画像のファイルサイズを圧縮するには、いくつか方法があります。
- ファイルサイズを外部サービスなどで圧縮する
- 適切な画像サイズ（縦横の幅）にする
- Data URI 形式に変換する
- ファイル形式をSVGに変換する
- ファイル形式をWebPやJPEG 2000に変換する
適切な画像サイズ（縦横の幅）にする「優先度：高」
ファーストビューは画面幅100%で表示することが多いので画像サイズが大きくなりがちです。
これに関しては仕方がないですが、それ以外の画像は基本的に1000px以下にしましょう。（もちろん画像サイズはデザインによって適宜変えましょう）
Data URI 形式に変換する「優先度：低」
アイコンなど単純な画像は「Data URI 形式」にすることで、サーバーへのリクエスト数を減らせます。
「Data URI」に関してはこちらのサイトで解説されています。
https://app.codegrid.net/entry/datauri-basic
また、Data URI にする画像はアイコンなど単純なものだけにしましょう。
写真など複雑な画像に対して適用すると逆効果です。
ファイル形式をSVGに変換する「優先度：低」
昨今、ロゴやアイコンをSVG形式で使用するサイトが増えてきました。
SVGにすることで、JPGやPNGよりファイルサイズが小さくなります。
ファイル形式をWebPやJPEG 2000に変換する「優先度：低」
Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。
これらの形式を利用すると、ファイルサイズが小さくなりますが、対応するブラウザが限られます。
もし実際に利用する場合は、未対応ブラウザでも画像が表示されるような書き方をしましょう。
こちらの記事で実装例が紹介されています。
https://qiita.com/ishimasar/items/bf92e22004fcaf870d9b
画像の遅延読み込み「優先度：中」
サイト訪問時には、ファーストビューに関する画像だけ先に読み込み、残りはスクロールして画面内に画像が表示される時に読み込むという手法を「遅延読み込み」と言います。
対応ブラウザが限られますが、<img>タグの属性だけで対応することができます。
<img src="path/to/img.jpg" alt="" width="600" height="300" loading="lazy" decoding="async">参考：decoding="async"の使い方とloading="lazy"との違いのまとめ
すべてのブラウザに対応したり、<img>タグの画像だけでなく、背景画像など他の画像や動画も遅延読み込みさせたい場合はプラグインを使う方法もあります。
参考：画像を遅延読み込みしてみよう！Intersection Observer編
YouTube動画の遅延読み込み「優先度：中」
昨今、YouTube動画を埋め込むサイトが増えてきました。
YouTube動画の埋め込みは、公式サイトから埋め込み用コードをコピーしてHTMLに貼り付けるだけで簡単に表示できます。
しかし、YouTube動画を埋め込むと、サイト訪問時にYouTube動画も読み込まれるので、その分表示スピードに影響を与えます。
なので、以下のような対応で表示スピードへの影響を最小限にできます。
- サイト訪問時にはYouTube動画は読み込ませない
- YouTube動画のサムネイルをクリックした時に読み込ませる
詳しい実装方法はこちらの記事で解説されています。
https://myscreate.com/youtube-defer/
WordPress関係
プラグインを見直す「優先度：高」
WordPressには便利なプラグインがたくさんあります。
しかし、プラグインを使いすぎるとサイトスピードに著しく影響を与える場合があります。
本当に必要なもの以外は「無効」にするか「削除」しましょう。
WordPress独自のjQueryは使わない「優先度：低」
WordPressはデフォルトで独自のjQueryファイルを読み込ませています。
前述で説明した通り、jQueryはCDNで読み込ませるほうが良いです。
なので、WordPressのデフォルトのjQueryは読み込ませず、CDN経由でjQueryを読み込みましょう。
注意点
この対応をするとプラグインが正しく動作しない場合があるので気をつけましょう。
詳しい実装方法はこちらの記事で解説されています。
プラグインのCSSやJSは関係あるページでのみ読み込ませる「優先度：中」
WordPressのプラグインを有効にすると、プラグイン独自のCSSやJSを全部のページで読み込んでいる場合があります。
しかし、お問い合わせに関するプラグインの場合、お問い合わせページ以外でそのCSSやJSを読み込ませる必要はありません。
なので、プラグインを利用するページでのみ関係ファイルを読み込ませましょう。
以下は「Contact Form 7」のCSSとJSを任意のページでのみ読み込む解説記事です。
https://neco913.kirara.st/post-2828/
投稿一覧系のページで表示する件数を設定する「優先度：中」
投稿一覧ページで表示する件数をWordPressでは設定できます。
しかし、この設定をしないと、投稿した全ての記事が表示される場合があります。
なので、投稿を表示する件数は10〜20件程度で設定をして、それ以上の件数がある場合はページャーを利用しましょう。
計測タグや広告系のタグ
未使用のタグの削除「優先度：低」
公開されて何年も経つサイトの場合、未使用の計測タグや広告系のタグが埋め込まれている場合があります。
計測タグなどに限らず、使わない無駄なタグは削除しましょう。
実務の場合は、削除する前にちゃんと許可をとりましょう。
最新バージョンのタグの書き方に変える「優先度：低」
計測タグや広告系のタグの書き方はアップデートされる場合があります。
GoogleアナリティクスやGoogle広告のタグも何回かアップデートされています。
アップデートされた書き方にすることで、「予期せぬエラーが起きにくい」「サイトのパフォーマンスが低下しない」などのメリットがあるので定期的に確認すると良いでしょう。
無駄なリダイレクトは避ける「優先度：中」
例えば、「PCとSPのURLが別々で、スマホでPCサイトにアクセスしたらSPサイトにリダイレクトされる」設定をしているとします。
その場合、スマホでPCサイトにアクセスしたら以下のような流れになります。
- PCサイトにアクセス
- リダイレクト処理が行われる
- SPサイトにリダイレクトされる
このように、SPサイトにアクセスするだけなのに、「PCサイトにアクセス」と「リダイレクト処理」という無駄な処理がされます。
もし、このサイトがレスポンシブでPCもSPも同じURLの場合、スマホでPCサイトにアクセスすると...
- PCサイトにアクセス（だけどレスポンシブだから見た目はSP用になっている）
これだけでSPサイトを表示できます。
サイトの構成上、仕方のない場合もありますが（特に昔のサイト）、これから新規でサイトを制作する時はできるだけレスポンシブにしましょう。
その他
.htaccessでgzip圧縮「優先度：低」
Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。
ファイルサイズをサーバーサイドで減らせます。
詳しい実装方法はこちらの記事で解説されています。
ブラウザキャッシュを活用する「優先度：低」
キャッシュを利用することで、以前アクセスした際のデータを再利用して、その分表示スピードを向上できます。
しかし、このキャッシュをもとにサイトを表示させると「CSSを変更したのにサイトに反映されない...」のようなことが起きる場合があります。
キャッシュを利用するときは、キャッシュさせるファイル、させないファイルをしっかりと決めましょう。
サーバーからデータをダウンロードするには処理が多く時間がかかります。
その処理はサーバーとダウンロード側で複数回行われることもあり、処理が遅延することで表示速度の妨げになります。
そこで、以前ダウンロードしたデータを再利用してよいか、また再利用するなら有効期限はいつまでにするのかをサーバーに指示することで、処理の工数を減らし表示速度を早めます。
このデータの再利用が、キャッシュの活用になります。引用元：以下URL
詳しい実装方法はこちらの記事で解説されています。
まとめ
Webサイトの表示スピードを改善する方法はたくさんあります。
中には、この対応をしても全然変わらない...というものもあります。
しかし、表示スピードの改善はコツコツ行うことが重要で、いずれ必ず結果が返ってきます。
なので、「優先度」を参考に少しずつ取り組んでみてはいかがでしょうか。
関連記事
