Webニュース by Sozo Lab

Webサイトを高速化させよう

一通り実装出来るようになったら、Webサイトを高速化するための記述・対策を意識するようにしましょう。

なぜ、高速化する必要があるのか？
サイトの表示スピードが遅いと、そのサイトからユーザーが離脱してしまうからです。
特にスマホは、PCよりスペックが劣るので、処理に時間がかかります。
企業サイトやECサイトなどの場合は、特に損失が大くなってしまいます。


画像サイズを圧縮

「1000pxの画像を500pxにしましょう」というわけではありません。
肉眼では分からないレベルですが画像の質を落としたり、メタデータ（位置情報、解像度などの目には見えない情報）を画像から削除するということです。
読み込む画像サイズが小さくなると、サーバーが画像を読み込む時間が短くなります。
結果として、サイトの表示スピードが向上します。

具体的には、下記のようなサービスを使用します。
平均で50%前後、画像サイズが小さくなります。
https://tinypng.com
https://www.iloveimg.com/ja/compress-image



画像を次世代フォーマットに対応

2024年6月現在だと、WebPは全ブラウザで対応されていますが、AVIFはOpera Miniのみ対応されていません。

ブラウザの対応状況
WebP：https://caniuse.com/?search=webp
AVIF：https://caniuse.com/?search=avif

GoogleによるとWebPの具体的な圧縮率は、ほぼ同等の画質でPNGよりも約26％、 JPGよりも約25～34％容量を軽くできると発表されています。
引用元：https://ds-b.jp/dsmagazine/what-is-webp/

AVIFは、PNGやJPEGと比べて70〜90%程度圧縮できるため、SEO 対策の一つである画像軽量化に適しています。
しかし、AVIF に対応しているブラウザは増えているものの、古いブラウザには対応していないものがあります。
引用元：https://fastest.jp/blog/avif/


古いブラウザに対応させるには、下記のようにpictureタグを用いて実装しましょう。

<picture>
  // 1.AVIF
  <source srcset="assets/images/sample.avif" type="image/avif">
  // 2.WebP
  <source srcset="assets/images/sample.webp" type="image/webp">
  // 3.JPG、もしくはPNG
  <img src="assets/images/sample.jpg">
</picture>

上の記述では、優先順位が1.AVIF→2.Webp→3.JPGの順になっています。
1.AVIFに対応しているブラウザの場合、AVIFの画像が表示されます。
2.AVIFに対応していないが、WebPに対応しているブラウザの場合、WebPの画像が表示されます。
3.AVIF、WebPに対応していないブラウザの場合、JPGの画像が表示されます。



画面幅による画像の切り替えには、pictureタグを使用

PC,スマホ（画面幅）によって画像を切り替える場合は、pictureタグを使うようにしましょう。

良くない例

<div>
  <img class="pc" src="image-pc.png" alt="pc用の画像">
  <img class="sp" src="image-sp.png" alt="スマホ用の画像">
</div>

上記のように、HTMLを記述し、cssでpcの時はスマホの画像を非表示、スマホの時はpcの画像を非表示するようにしていたと思いますが、pictureタグを使用するとHTMLのみで実装出来ます。CSSによる切り替えは不要です。

pictureタグでの記述例

<picture>
  // 1.PC
  <source srcset="assets/images/sample-pc.png" media="(min-width: 769px)">
  // 2.スマホ
  <source srcset="assets/images/sample-sp.png" media="(max-width: 768px)">
  // 3.その他（上記どちらにも該当しない場合、imgタグの画像が表示されます。）
  <img src="assets/images/sample.png">
</picture>


画像の遅延読み込み

<img
  src=“assets/images/sample.jpg”
  loading=“lazy”
  decoding=“auto”
/>

※videoタグ、pictureタグの中のimgタグには効きません。



CSS・JavaScriptの最適化

reset.css,common.css,style.cssのように、複数css,jsファイルを読み込んでいる場合は、1つのファイルの時と比べ読み込みに時間がかかります。
原因は、サーバーへのリクエスト数が増えるからです。
なので、1つのファイルにまとめましょう。
可能であれば、圧縮もしましょう。
※1つのファイルで実装するという意味ではなく、複数ファイルで実装し、最終的に下記方法などで1つのファイルとして書き出すということです。

方法1：Vite、webpack、gulpなどのタスクランナー・ビルドツールを使用する方法

Vite：https://ja.vitejs.dev/
webpack：https://webpack.js.org/
gulp：https://gulpjs.com/

タスクランナー、ビルドツールでは、例えば下記のようなことが出来るため、より効率的に実装することが出来ます。
・sass（scss）での記述（header,footer,トップページ、下層ページごとにcssファイルを分けて開発し、最終的に1つのcssファイルとして出力するなど
・header,footerなどの共通パーツとして扱いたいものは、wordpressのように扱えるようになります。
・postcssを使用して、ベンダープレフィックス（-webkit-、-ms-など）を自動追記など

そのため、制作会社などではこれらを使いのが一般的です。
具体的な使用方法については、ここでは省略します。


方法2：VSCodeの拡張機能のLive Sass Compilerを使用する方法

方法1と比べると、出来ることが限られます。

出来ること
・heder,footer,トップページ,下層ページごとにcssファイルを作成して、最終的に1つのcssにまとめる
・cssをネストで記述出来る

<div class="card">
  <div class="card__image">
    <img src="" alt="">
  </div>
  <h3 class="card__title">タイトル</h3>
  <p class="card__text">テキスト</p>
</div>

.card {
  width: 50%;
  @media (min-width: 769px) {
    width: 30%;
  }

  &__image {
    aspect-ratio: 2/1;
  }

  &__title {
    font-size: 20px;
  }

  &__text {
    color: red;
  }
}

上記cssを保存すると、下記のように変換されcssのファイルが書き出されます。

.card {
  width: 50%;
}

@media (min-width: 769px) {
  .card {
    width: 30%;
  }
}

.card__image {
  aspect-ratio: 2/1;
}

.card__title {
  font-size: 20px;
}

.card__text {
  color: red;
}

設定方法は、下記YouTubeにて解説しています。
https://www.youtube.com/watch?v=CT_nu91hUqE
※限定公開にしている関係上、他者への共有はNGです。ご自身のみの閲覧としてください。



その他

・サーバーの見直し
・使用するwebフォントを2〜3つに抑える
・WordPressの使用プラグインを減らす（各プラグインのcss,jsファイルは独立しているので、リクエスト数が増える）



参考になる記事

https://www.seohacks.net/blog/1145/
https://zenn.dev/necscat/articles/cdd4c17d52f1bc