ZeroPlus Media > L_HTML/CSS > Webサイトのページ表示速度を上げる方法について解説

Webサイトのページ表示速度を上げる方法について解説

2023/08/31

2023/09/01

この記事では「Webサイトのページ表示速度を上げる方法」について解説します。

Webサイトのページ表示速度は、ユーザーのストレスや直帰率に影響します。

サイト構築者としてページ表示速度を上げる施策を行うのは必須の工程です。

ページ表示速度が速いことのメリット
ページ表示速度が速いサイトを作る方法
ページ表示速度を確認する
まとめ

ページ表示速度が速いことのメリット

ネットサーフィンをしているときに、Webページの表示が遅くて、見ようとしていたページを戻ってしまったことはありませんか？

Webページの表示速度が早いほど、ユーザーは快適にWebページやコンテンツを閲覧できます。次々とページを表示したり、他のページを見て商品やサービスをすぐにチェックできるからです。

ページ表示速度が遅いと、ユーザーはストレスを感じてしまい、他のWebサイトを見たり、画面を閉じたりします。

また、ページ表示速度が遅い場合は、ユーザーの直帰率に影響します。直帰率とは、サイトに訪れたユーザーが最初の1ページを見て、そのサイトから離脱した割合のことです。

ページ表示速度が1秒から3秒になると、直帰率が32%増加、6秒では106%増加、10秒になると123%増加するといわれています。

さらに、ページ表示速度はSEOの評価にも影響します。

「ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。」
引用：Google検索セントラル「ページの読み込み速度をモバイル検索のランキング要素に使用します」

Googleは、サイトのページ表示速度が検索順位に影響を与えるとしています。

ページ表示速度を改善することは、自身のWebサイトを多くのユーザーに快適に見てもらうための第一歩となります。

ページ表示速度が速いサイトを作る方法

ページ表示速度を上げるには、下記のような方法があります。

ファイル圧縮
画像圧縮
WebP形式の画像を使う
画像サイズを指定する
画面スクロールに応じて画像を読み込む
フォントの読み込み時間を無くす

また、この記事では解説しませんが、WordPressサイトでは上記に加え次のような方法があります。

不要なプラグイン削除
PHPのバージョンを上げる
WordPressのキャッシュ化プラグインを導入する

ファイル圧縮

CSSやJavaScriptのファイルを圧縮すると、ページ表示速度が向上します。

CSSやJavaScriptのファイル圧縮をすると、ファイルのはたらきはそのままに、ファイルのサイズが軽減されます。ファイルのサイズが小さくなることで、読み込みに必要な時間が短縮され、ページ表示速度の向上につながります。

CSSファイル圧縮前（style.css）：354B（バイト）

.l-container {
  max-width: 80%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
}

.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-card__img {
  width: 100%;
  display: block;
}

.p-card__img img {
  border: 3px solid red;
  width: 100%;
  display: block;
  height: auto;
}

CSSファイル圧縮後（style.min.css）：258B（バイト）

.l-container{max-width:80%;margin-top:20px;margin-right:auto;margin-left:auto}.p-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.p-card__img{width:100%;display:block}.p-card__img img{border:3px solid red;width:100%;display:block;height:auto}

JavaScriptファイルも同様に圧縮することができます。

圧縮後のファイルは、例えばstyle.cssはstyle.min.css、main.jsであればmain.min.jsのように、ファイル名と拡張子の間に「min」が付きます。

ファイルを圧縮する場合、下記の方法があります。

Gulpを使う
拡張機能を使う

Gulpを使う

Gulpを使うと、CSSやJavaScriptファイルを自動で圧縮して出力してくれます。例えば、開発中は非圧縮、納品時に圧縮するなど切り替えすることもできます。

拡張機能を使う

VSCodeの拡張機能でファイルを圧縮することもできます。例えば、下記「Minify」のような拡張機能でファイル圧縮が可能です。

こちらの場合、下記動画のように、圧縮したいファイルを選択した状態で「Ctrl＋Shift＋P」→「Minify」とコマンドを打つと圧縮したファイルが生成されます。

画像圧縮

画像のファイルサイズを軽くすることで、ページ表示速度が改善します。

画像圧縮の方法には、次のようなものがあります。

Gulpを使う
オンラインツールを使う

Gulpを使う

Gulpを使って画像を自動で圧縮することができます。Gulpの場合、開発中に画像を追加し都度圧縮して出力するなどもできます。

オンラインツールを使う

「TinyPNG」や「IloveIMG」などのオンラインツールを使って画像を圧縮することができます。

〇 TinyPNG

TinyPNGのサイトにアクセスしたら、圧縮したい画像ファイルをドラッグアンドドロップします。
すると下記画面のように自動で圧縮され、圧縮後の画像ファイルをダウンロードできます。

ただし、無料プランでは1画像ファイルにつき上限5MBまで、一度に圧縮できるのは20ファイルまでと上限があります。上の画像の場合、sample.pngが6.6MBで上限5MBを超えているので、圧縮されていません。

もし圧縮したい画像ファイルが上限5MBを超えている場合は、他のオンラインツールを使用するか、プロプランに登録しましょう。

WebP形式の画像を使う

WebP（ウェッピー）形式の画像を使うと、ページ表示速度が向上します。

WebP形式は比較的新しい画像形式で、圧縮率が高く、画像サイズが非常に軽いのが特徴です。WebP形式の画像を使うと、画像サイズの軽量化とページ表示速度の改善に役立ちます。

2023年現在、WebPは最新のすべてのブラウザで対応しています。（Internet Explorerを除く）

WebPを使う場合は、下記のように記述します。

<div class="p-imgbox">
  <picture>
    <source srcset="images/sample3.webp" media="(min-width: 1024px)" type="image/webp">
    <source srcset="images/sample.png" media="(min-width: 768px)" type="image/png">
    <img src="images/sample2.png" alt=”代替テキスト”>
  </picture>
 </div>

type=”image/○○”の形式で記述し、○○の部分にpng, jpg, svg, webpなど画像形式を指定します。

pitctureタグの詳しい使い方に関しては、下記の記事をご覧ください。

【HTML】pictureタグで画像をレスポンシブに切り替える方法を解説

WebP形式の画像を作成する場合は次のような方法があります。

PhotoShopを使う
WordPressのプラグインを使う
Gulpを使う
オンライン変換ツールを使う

PhotoShopを使う

バージョン23.2以降のPhotoShopであれば、WebP形式の画像作成・編集と、保存ができます。古いバージョンのPhotoShopでも、PhotoShop用プラグインの「WebShop」プラグインを導入すれば対応できます。

WordPressのプラグインを使う

WordPressサイトを構築するなら、WordPressのプラグインでjpgやpng形式の画像をWebP形式に変換することができます。代表的なプラグインとして「EWWW Image Optimizer」があります。

Gulpを使う

Gulpを使ってjpgやpng形式の画像を自動でWebPに変換して出力することもできます。Gulpの場合、画像ファイルを追加すれば、都度自動でWebPに変換できます。

オンライン変換ツールを使う

オンラインツールを使って、画像をWebP形式に変換することもできます。例えば「サルワカ道具箱」で画像をWebP画像に変換できます。

〇サルワカ道具箱

WebP形式に変換したい画像ファイルをドラッグアンドドロップすれば、WebP画像に変換された画像がダウンロードできます。

例えば、WebP変換前のpng画像でファイルサイズが1.12MBだった画像が、WebPに変換すると147KBになりました。
このように、WebPに変換するだけで大幅にファイルサイズを軽減できます。

画像サイズを指定する

ページ表示速度とは直接関係ないですが、画像サイズを指定しないと、後述するページ表示速度インサイトでも指摘されます。その場合、画像に対して横幅と高さを指定するといいでしょう。

例えば、下記のように画像に横幅と高さを指定していない場合を見てみましょう。

<div class="l-container">
    <div class="p-cards">
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>

.l-container {
  max-width: 80%;
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
}

.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.p-card__img {
  width: 100%;
  display: block;
}

.p-card__img img {
  border: 3px solid red;
  width: 100%;
  display: block;
  height: auto;
}

表示結果

画面を更新すると、一瞬だけ画像がカクついて表示されます。これは、「レイアウトシフト」と呼ばれる現象で、Webサイトのページが読み込みから表示されるまでの間にレイアウトがずれたり、崩れたりする現象です。

下記のように画像にwidth属性とheight属性でそれぞれ横幅と高さを指定することで、レイアウトシフトを回避できます。

<div class="l-container">
    <div class="p-cards">
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="" width="280" height="188">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="" width="280" height="188">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="" width="280" height="188">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
      <div class="p-card">
        <h2>タイトルタイトル</h2>
        <div class="p-card__img">
          <img src="dummy.png" alt="" width="280" height="188">
        </div>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>

表示結果

こちらの場合、画面を更新しても画像がカクついて表示されることはありません。
画像に横幅と高さを指定することによって、Webサイトのページが読み込まれるときに、画像分のスペースがあらかじめ確保されるため、レイアウトずれが起きないのです。

画面スクロールに応じて画像を読み込む

Webページ内に多くの画像があると、一般的にページ表示速度が遅くなります。
これを改善するには、画像の遅延ロードで対応します。

画像の遅延ロードとは、ブラウザの画面領域内にある画像のみ読み込みし、領域外にある画像は読み込まないことで、画面表示を早くするやり方のことです。

画像の遅延ロードを行うためには、imgタグ内にloading="lazy"の記述をします。

<img src="dummy.png" loading="lazy" width="280" height="188">

loading属性とは、画像などの読み込みタイミングを指定できる属性で、遅延読み込みを明示的に指定することができます。

ChromeやEdge、safariではloading属性をサポートしています。

ただし、ファーストビューやファーストビューに近いエリアの画像にはloading属性は付けないようにしましょう。
ファーストビューやファーストビューに近い画像はすぐに表示する必要があるため、loading=”lazy”を付けてしまうとかえってスピードが遅くなってしまうためです。

フォントの読み込み時間を無くす

例えば、Googleフォントなどでフォントを外部から読み込んでいる場合、ページが読み込まれるたびに外部からフォントを読み込むことになるので、ページの表示速度が遅くなります。

これを改善するには、例えばフォントをローカルから読み込むことで対応できます。

例えばGoogleフォントで「Zen Kaku Gothic New」を使いたい場合、画面右上の「Download family」からフォントをダウンロードします。

圧縮ファイルがダウンロードできたら、それを解凍します。解凍すると下記のようなファイルが確認できます。

使いたいフォントを、プロジェクトファイル内に配置し、CSSで下記のように記述します。

すると、ブラウザで指定したフォントが適用されます。
ローカルでファイルを読み込んでいるので、サイトスピードも改善されます。

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
}

@font-face {
  src: url("./font/ZenKakuGothicNew-Regular.ttf") format("ttf");
  font-family: "Zen Kaku Gothic New";
  font-style: normal;
}

font-faceに関しては、下記の記事で詳しく解説しています。