2020.7.1

【2020年版】Webサイトの表示スピードを高速化させる手法「22選」

Webサイトの表示スピードを高速化させると、ユーザー体験が向上し、最終的にコンバージョンに繋がりやすくなります。
最近、表示スピードの改善案件に携わり、そのときに対応したことや覚えたことを中心に、主にフロントサイドで改善出来ることを紹介します。
(一部サーバーサイドもあります)
各見出しに「優先度」を「低・中・高」で記載しているので、これは対応する、これは対応しなくていいかな...などの参考にしてみて下さい。
この「優先度」は以下3点を基準に付けています。
  • どの程度表示スピードを改善できるかどうか
  • 対応の難易度
  • 実務上で許可の下りやすさ
目次
  1. はじめに
    1. リクエスト回数
    2. リクエストした内容のサイズ
    3. リクエストタイミング
  2. CSS
    1. CSSファイルの非同期読み込み「優先度:高」
      1. 注意点
    2. @importは使わない「優先度:高」
  3. JavaScript
    1. jsファイルの非同期読み込み「優先度:高」
      1. <script>の読み込ませる位置について
    2. jsの書き方を見直す「優先度:高」
    3. jQueryを使わない「優先度:低」
  4. CSS、JavaScript共通
    1. 読み込ませるファイルを減らす「優先度:高」
    2. 外部ライブラリをCDNで読み込ませる「優先度:高」
      1. 余談
    3. ファイルサイズの圧縮(minify化)「優先度:中」
  5. Webフォント
    1. 非同期読み込み「優先度:高」
    2. サブセット化(容量を減らす)「優先度:?」
  6. 画像
    1. ファイルサイズの圧縮「優先度:高」
      1. ファイルサイズを外部サービスなどで圧縮する「優先度:高」
      2. 適切な画像サイズ(縦横の幅)にする「優先度:高」
      3. Data URI 形式に変換する「優先度:低」
      4. ファイル形式をSVGに変換する「優先度:低」
      5. ファイル形式をWebPやJPEG 2000に変換する「優先度:低」
    2. 画像の遅延読み込み「優先度:中」
  7. YouTube動画の遅延読み込み「優先度:中」
  8. WordPress関係
    1. プラグインを見直す「優先度:高」
    2. WordPress独自のjQueryは使わない「優先度:低」
    3. プラグインのCSSやJSは関係あるページでのみ読み込ませる「優先度:中」
    4. 投稿一覧系のページで表示する件数を設定する「優先度:中」
  9. 計測タグや広告系のタグ
    1. 未使用のタグの削除「優先度:低」
    2. 最新バージョンのタグの書き方に変える「優先度:低」
  10. 無駄なリダイレクトは避ける「優先度:中」
  11. その他
    1. .htaccessでgzip圧縮「優先度:低」
    2. ブラウザキャッシュを活用する「優先度:低」
  12. まとめ

はじめに

Webサイトの表示スピードは主に以下の点で決まります。

  • サーバーへの「リクエスト回数
  • サーバーへ「リクエストした内容のサイズ
  • サーバーへの「リクエストタイミング

他にも要因はたくさんありますが、今回紹介する内容では主にこれらを改善してきます。

リクエスト回数

「リクエスト回数」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「回数」です。

ダウンロードの回数が多ければ多いほど、サイトの表示に時間がかかります。

なので、ダウンロードする回数を減らすことで、表示スピードを向上できます。

リクエストした内容のサイズ

「リクエストした内容のサイズ」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードした時の「ファイルサイズ」です。

ファイルサイズが大きければ大きいほどダウンロードに時間がかかるので、その分サイトの表示も時間がかかります。

なので、ファイルサイズを小さくすることで、表示スピードを向上できます。

リクエストタイミング

「リクエストタイミング」とは、CSSやJavaScript、画像などの情報をサーバーからダウンロードする「タイミング」です。

何も対策をしていなければ、サイト訪問時に全ての情報をダウンロードします。

しかし、このダウンロードするタイミングを以下のようにするとします。

  • サイト訪問時には、ファーストビューに関する情報のみダウンロードする
  • ページをスクロールすると、他の情報をダウンロードする

こうすることで、サイト訪問時のページ読み込みのスピードを向上できます。

CSS

CSSファイルの非同期読み込み「優先度:高」

ブラウザがWebサイトを読み込む順番は以下のようなイメージです。
  1. HTMLを上から順番に読んでいく
  2. CSSやJSファイルの読み込みの記述があったら、HTMLの読み込みをストップ
  3. CSSやJSファイルを「ダウンロード」する
  4. 「ダウンロード」が終わったら「実行」する
  5. 「実行」が終わったら、HTMLの読み込みを再開

この繰り返しでWebサイトは表示されます。

 

上記の通り、ファイルのダウンロード中はHTMLの読み込みは行われません。

つまり、ファイルのダウンロードする時間が長ければ長いほど、サイトの表示が遅くなります。

 

しかし、ファイルのダウンロード中でもHTMLを読み込ませる方法があります。

それが「非同期読み込み」です。

 

CSSの非同期読み込みは、以下のようにCSSを読み込ませるだけです。

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
<link>「media="print" onload="this.media='all'"」を追加することで、非同期読み込みになります。
詳しい仕組みはこちらの記事で解説されています。

注意点

CSSファイルを非同期読み込みすると、CSSファイルの実行(HTMLにスタイルを付与する処理)はHTMLが全て読み込まれた後に行われます。
つまり、HTMLに対してスタイルが付与されない状態で、文章などが画面に表示される時間が発生します。
いわゆる「表示崩れ」です。
なので、サイト訪問時に見えるファーストビューにはスタイルを付与させる対応が必要です。
この対応をするには、ファーストビューに関係するCSSを<head>の中に<style>を使ってインラインで読み込ませる処理に変えれば解決です。
もっと凝りたい方は、「HTML読み込み中はファーストビュー以降のコンテンツを非表示にさせたり、代わりにローディング画像を表示させる」などの対応をしてもいいと思います。

@importは使わない「優先度:高」

CSSファイル内で、他のCSSファイルを読み込ませる、Webフォントを読み込ませるなどの手段として@importが存在します。
@importを使うと、ファイルのリクエスト数がその分増えます。
なので、@importは使わずに以下のようにしましょう。
  • CSSファイルは複数読み込ませず、1ファイルにまとめる
  • WebフォントはCSSファイル内では読み込まず、<head>内で<link>を使い読み込む

JavaScript

jsファイルの非同期読み込み「優先度:高」

CSSファイルと同様、jsファイルも非同期読み込みできます。
<script src="path" defer>
<script src="path" async>
このように「defer」「async」のどちらかの属性を付与するだけです。
「defer」「async」の違いは以下の通りです。
deferasync
HTMLが全て読み込まれたらjsを実行するjsのダウンロードが完了したら即時実行する
「async」を使うと、HTMLが最後まで読み込まれていない状態でjsが実行されるので、「要素が無いよ」「ライブラリが無いよ」などのエラーになる可能性があります。
なので、「defer」を使うのがとりあえずは安全です。
「defer」「async」の詳しい仕組みはこちらの記事で解説されています。

<script>の読み込ませる位置について

<script></body>の手前で読み込ませるのが一般的でした。
しかし、非同期で読み込ませる場合は<head>の出来るだけ上のほうで読み込ませましょう。
注意点
<meta charset="UTF-8">より上に<script>を記述するとW3Cのバリデートでエラーになります。

jsの書き方を見直す「優先度:高」

jsは書き方次第で無駄な処理をしてしまい、その結果サイトスピードに影響を与えます。

以下は書き方の改善例になります。

 

改善前改善後
同じ要素を何度も取得している変数に取得した要素を格納して、以後その変数を利用する
セレクタの指定を「クラス」で行うセレクタの指定を「ID」で行う
スクロールイベントを何度も行うスクロールイベントの発生回数を減らす
jsの書き方の改善方法はこれらの記事で解説されています。ぜひ一度目を通してみて下さい。

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/

余談

私は今まで「外部ライブラリはCDNで読み込ませればいいもの」と思っていました。

しかし、昨今は利用するjsのライブラリなどをnpmで1つにまとめ、それを読み込ませるという手法があります。

CDNと比べ、どちらのほうが早いのか検証しているサイトや記事はありませんかね...。
(利用する量や環境などで変わりそうですが...)

ファイルサイズの圧縮(minify化)「優先度:中」

CSS、JSファイルの無駄な改行やコメントを削除して、ファイルサイズを圧縮させることを「minify化(ミニファイ化)」と言います。

昨今、minify化させる手段はたくさんあるので、ご自身の環境にあった方法で対応しましょう。

Webフォント

非同期読み込み「優先度:高」

Webフォントも非同期で読み込めます。
Webフォントを読み込ませる方法は主に2種類あります。
  • CSSファイルで@importで読み込ませる
  • <head>内で<link>を使い読み込ませる

 

表示スピードを向上させるには、Webフォントは<head><link>を使い非同期で読み込ませましょう。
以下例です。
<link rel="stylesheet" href="Webフォントのパス" media="print" onload="this.media='all'">

サブセット化(容量を減らす)「優先度:?」

Webフォントは種類によってファイルサイズが大きい場合があります。

特に日本語のWebフォントは、ひらがな漢字が含まれるのでファイルサイズが大きくなりがちです。

そこで、ファイルサイズを減らす手法として「サブセット化」という方法があります。

サブセット化=普段使うものだけを抜き出す作業。「第一水準漢字+ひらがな+記号」この辺りを抜き出せば普通のwebサイトであれば十分にまかなえるでしょう。 「第一水準漢字」などで検索すれば一覧などが出てきます。

引用元:以下URL

Webフォントをサブセット化する方法はこちらの記事で紹介されています。

日本語Webフォントの流行の最適化「NotoSans」「サブセット化」 - Qiita
日本語Webフォントを最適化 そもそもなぜ フォントはそもそも機種依存 欧米フォントは、字数が限られている為ファイルサイズがそもそも小さい約250KB。しかし、日本語は16MBとか。(orz)なので、欧米フォントのように...

 

私自身、サブセット化をしたことが無いので、今回優先度は「?」としました。

もし、サブセット化をすることで、MB単位でファイルサイズが減るのであれば、絶対にするべきでしょう。

画像

ファイルサイズの圧縮「優先度:高」

画像のファイルサイズは必ず圧縮(低く)しましょう。

これだけでも、表示スピードはかなり変わります。

ファーストビューなど大きい画像以外は、基本的に400KB以下にするようにしましょう。

 

画像のファイルサイズを圧縮するには、いくつか方法があります。

  • ファイルサイズを外部サービスなどで圧縮する
  • 適切な画像サイズ(縦横の幅)にする
  • Data URI 形式に変換する
  • ファイル形式をSVGに変換する
  • ファイル形式をWebPやJPEG 2000に変換する

ファイルサイズを外部サービスなどで圧縮する「優先度:高」

昨今、様々な画像圧縮サービスがあります。

こちらは私がよく使っているサービスです。

オンラインで画像を圧縮。最高の画質および圧縮方式
複数のJPG、PNG、GIF画像を選んで瞬時に圧縮。オンラインで画像を無料で簡単に圧縮できます。

 

透過していない画像はpngではなくjpgにする、Photoshopで画像を書き出す際は「Web用に保存する」で書き出す...なども普段から心がけるようにしましょう。

適切な画像サイズ(縦横の幅)にする「優先度:高」

ファーストビューは画面幅100%で表示することが多いので画像サイズが大きくなりがちです。

これに関しては仕方がないですが、それ以外の画像は基本的に1000px以下にしましょう。

Data URI 形式に変換する「優先度:低」

アイコンなど単純な画像は「Data URI 形式」にすることで、サーバーへのリクエスト数を減らせます。

「Data URI」に関してはこちらのサイトで解説されています。

表示速度改善 Data URIスキーム - 仕組みとメリット | CodeGrid
ページの表示速度を改善するData URIスキームとはなんでしょう。今回はその仕組みと、メリットやデメリット、使いどころを紹介します。

 

また、Data URI にする画像はアイコンなど単純なものだけにしましょう。

写真など複雑な画像に対して適用すると逆効果です。

ファイル形式をSVGに変換する「優先度:低」

昨今、ロゴやアイコンをSVG形式で使用するサイトが増えてきました。

SVGにすることで、JPGやPNGよりファイルサイズが小さくなります。

ファイル形式をWebPやJPEG 2000に変換する「優先度:低」

Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。

これらの形式を利用すると、ファイルサイズが小さくなりますが、対応するブラウザが限られます。

もし実際に利用する場合は、未対応ブラウザでも画像が表示されるような書き方をしましょう。

こちらの記事で実装例が紹介されています。

WebP(ウェッピー)対応はじめました!実装例とカンタン一括変換する方法 - Qiita
暑過ぎる夏到来!ということで冷やし中華はじめまし… ではなく、WebP対応はじめました。暑さ関係なし。 WebPなんぞや? Google開発のオープンな静止画フォーマット。ファイル拡張子「.webp」 Googleが使用を推...

画像の遅延読み込み「優先度:中」

サイト訪問時には、「ファーストビューに関する画像だけ先に読み込み残りはスクロールして画面内に画像が表示される時に読み込む」手法が「遅延読み込み」です。

この対象となる画像は<img>の画像だけでなく、background-imageで設定している背景画像も遅延読み込みできます。

遅延読み込みの導入は少々ハードルが高いので、既に公開されているサイトに対して導入するのはなかなか厳しいと思います。

こちらの記事で実装例が紹介されています。

画像を遅延読み込みしてみよう!Intersection Observer編 | 株式会社LIG
最近よく聞く「lazyload」「遅延読み込み」。ページ表示を高速化するために、ページロード初期時には画像は読み込まず、表示したいタイミングでロードを開始するアレです。LIGのフロントエンドエンジニア・ザワが、Intersection observerを使った画像の遅延読み込みの方法をご紹介します。

 

YouTube動画の遅延読み込み「優先度:中」

昨今、YouTube動画を埋め込むサイトが増えてきました。

YouTube動画の埋め込みは、公式サイトから埋め込み用コードをコピーしてHTMLに貼り付けるだけで簡単に表示できます。

しかし、YouTube動画を埋め込むと、サイト訪問時にYouTube動画も読み込まれるので、その分表示スピードに影響を与えます。

なので、以下のような対応で表示スピードへの影響を最小限にできます。

  • サイト訪問時にはYouTube動画は読み込ませない
  • YouTube動画のサムネイルをクリックした時に読み込ませる

 

詳しい実装方法はこちらの記事で解説されています。

埋め込みyoutubeが想像以上に戦犯級だった件 | ma-ya's CREATE / WEB DESIGN
2019/1/11 記事内容を大幅に加筆・修正しました。 こんにちわ、ma-ya's CREATE[まーやずくりえいと]です。 youtubeの埋め込み動画をサイトに設置したいときありますよね。 そんな時は簡単です。見たい動画のページから埋め込みコードを取得してソースに張り付けるだけ。 簡単ですね、ではさようなら。 と...

WordPress関係

プラグインを見直す「優先度:高」

WordPressには便利なプラグインがたくさんあります。

しかし、プラグインを使いすぎるとサイトスピードに著しく影響を与える場合があります。

本当に必要なもの以外は「無効」にするか「削除」しましょう。

WordPress独自のjQueryは使わない「優先度:低」

WordPressはデフォルトで独自のjQueryファイルを読み込ませています。
前述で説明した通り、jQueryはCDNで読み込ませるほうが良いです。
なので、WordPressのデフォルトのjQueryは読み込ませず、CDN経由でjQueryを読み込みましょう。
注意点
この対応をするとプラグインが正しく動作しない場合があるので気をつけましょう。
詳しい実装方法はこちらの記事で解説されています。

プラグインのCSSやJSは関係あるページでのみ読み込ませる「優先度:中」

WordPressのプラグインを有効にすると、プラグイン独自のCSSやJSを全部のページで読み込んでいる場合があります。

しかし、お問い合わせに関するプラグインの場合、お問い合わせページ以外でそのCSSやJSを読み込ませる必要はありません。

なので、プラグインを利用するページでのみ関係ファイルを読み込ませましょう。

 

以下は「Contact Form 7」のCSSとJSを任意のページでのみ読み込む解説記事です。

「Contact Form 7」を必要なページにだけ読み込む | きららとジュレのブログ
「Contact Form 7」で「reCAPTCHA」を Ver.3にすると 全てのページに「reCAPTCHA で保護されています」のバッジが画面右下に出現します。 しかも、...

投稿一覧系のページで表示する件数を設定する「優先度:中」

投稿一覧ページで表示する件数をWordPressでは設定できます。

しかし、この設定をしないと、投稿した全ての記事が表示される場合があります。

なので、投稿を表示する件数は10〜20件程度で設定をして、それ以上の件数がある場合はページャーを利用しましょう。

計測タグや広告系のタグ

未使用のタグの削除「優先度:低」

公開されて何年も経つサイトの場合、未使用の計測タグや広告系のタグが埋め込まれている場合があります。

計測タグなどに限らず、使わない無駄なタグは削除しましょう。

実務の場合は、削除する前にちゃんと許可をとりましょう。

最新バージョンのタグの書き方に変える「優先度:低」

計測タグや広告系のタグの書き方はアップデートされる場合があります。
GoogleアナリティクスやGoogle広告のタグも何回かアップデートされています。
アップデートされた書き方にすることで、「予期せぬエラーが起きにくい」「サイトのパフォーマンスが低下しない」などのメリットがあるので定期的に確認すると良いでしょう。

無駄なリダイレクトは避ける「優先度:中」

例えば、「PCとSPのURLが別々で、スマホでPCサイトにアクセスしたらSPサイトにリダイレクトされる」設定をしているとします。

その場合、スマホでPCサイトにアクセスしたら以下のような流れになります。

  1. PCサイトにアクセス
  2. リダイレクト処理が行われる
  3. SPサイトにリダイレクトされる

このように、SPサイトにアクセスするだけなのに、「PCサイトにアクセス」と「リダイレクト処理」という無駄な処理がされます。

 

もし、このサイトがレスポンシブでPCもSPも同じURLの場合、スマホでPCサイトにアクセスすると...

  1. PCサイトにアクセス(だけどレスポンシブだから見た目はSP用になっている)

これだけでSPサイトを表示できます。

 

サイトの構成上、仕方のない場合もありますが(特に昔のサイト)、これから新規でサイトを制作する時はできるだけレスポンシブにしましょう。

その他

.htaccessでgzip圧縮「優先度:低」

Googleが提供するサイトスピードを計測するPageSpeed Insightsで指摘される項目のひとつです。

ファイルサイズをサーバーサイドで減らせます。

 

詳しい実装方法はこちらの記事で解説されています。

ブラウザキャッシュを活用する「優先度:低」

キャッシュを利用することで、以前アクセスした際のデータを再利用して、その分表示スピードを向上できます。

しかし、このキャッシュをもとにサイトを表示させると「CSSを変更したのにサイトに反映されない...」のようなことが起きる場合があります。

キャッシュを利用するときは、キャッシュさせるファイル、させないファイルをしっかりと決めましょう。

サーバーからデータをダウンロードするには処理が多く時間がかかります。
その処理はサーバーとダウンロード側で複数回行われることもあり、処理が遅延することで表示速度の妨げになります。
そこで、以前ダウンロードしたデータを再利用してよいか、また再利用するなら有効期限はいつまでにするのかをサーバーに指示することで、処理の工数を減らし表示速度を早めます。
このデータの再利用が、キャッシュの活用になります。

引用元:以下URL

詳しい実装方法はこちらの記事で解説されています。

まとめ

Webサイトの表示スピードを改善する方法はたくさんあります。
中には、この対応をしても全然変わらない...というものもあります。
しかし、表示スピードの改善はコツコツ行うことが重要で、いずれ必ず結果が返ってきます。
なので、「優先度」を参考に少しずつ取り組んでみてはいかがでしょうか。
シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア