はじめに
こんにちは、株式会社HRBrainでデザインエンジニアをしている @Mozu1206 です。
Webパフォーマンス改善。なんとも面倒くさそうな響きですよね。
「やり方もよく分からないし、一旦置いておこう…」
と思ってるそこのあなた！
この記事では、そんなあなたに向けたサクッと1人日で出来る、効果が期待できるパフォーマンス改善策をいくつか紹介します！
具体的な方法をステップごとにご説明しますので、ぜひ参考にしてみてください！
1人日で出来るWebパフォーマンス改善
1. 画像を圧縮する
画像ファイルは、Webサイトの読み込み時間を大きく左右する要素の一つです。画像を圧縮することで、ファイルサイズを小さくし、読み込み時間を短縮できます。
-
ImageMagickなどのツールで圧縮する:
ImageMagickなどのツールを使って画像を圧縮することで、品質を保ちながらファイルサイズを削減できます。
ImageMagickでは、次のコマンドでJPEG画像を圧縮できます。
convert input.jpg -quality 70 output.jpg
2. 適切な画像フォーマットの画像を出し分ける
画像フォーマットの選択も重要です。新しいフォーマットであるAVIFやWebPを使用することで、従来のJPEGやPNGに比べて大幅にファイルサイズを減らすことができます。HTMLの<picture>タグを使用して、ブラウザが最適なフォーマットを選択するように設定できます。
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="example image" />
</picture>
画像のAVIFとWebP変換も、先程のImageMagickで可能です。
// AVIFに変換
convert a.png output.avif
// WebPに変換
convert a.png output.webp
3. CLS（Cumulative Layout Shift）を改善する
CLSは、ページのレイアウトが読み込み中に変化することで発生する、ユーザー体験を損なう問題です。CLSを改善することで、ユーザーがページをスムーズに閲覧できるようになります。
-
<img>タグにwidthとheight属性を指定する: 画像の表示領域を確保するために、<img>タグに適切なwidthとheight属性を追加しましょう
<img src="image.jpg" width="600" height="400" alt="example image" />
<img>タグに設定するwidthとheightは、画像の実サイズを入れればOKです。ブラウザが必要なのは、表示画像の比率だからです。
つまり、上記例は下記に書き換えても成り立ちます。
CSSで適切なwidthとheightを当てるのは忘れないでください。
<img src="image.jpg" width="3" height="2" alt="example image" />
4. 遅延読み込み
遅延読み込みは、ページの読み込み時間を短縮するために、必要なコンテンツのみを最初に読み込み、残りのコンテンツはユーザーがスクロールしたときに読み込む手法です。
ページ上部など、初期描画に必要ない要素は遅延読込させましょう。
-
<img>タグのloading="lazy"属性: 画像を遅延読み込みします -
<iframe>タグのloading="lazy"属性: iframeを遅延読み込みします
<img src="image.jpg" loading="lazy" alt="example image" />
<iframe src="https://www.example.com" loading="lazy"></iframe>
まとめ
この記事では、1人日で出来るWebパフォーマンス改善策をいくつか紹介しました。これらの改善策を実践することで、ユーザー体験を向上させ、SEOの改善、コンバージョン率の向上など、様々なメリットが期待できます。
ぜひ、この記事を参考に、あなたのWebサイトのパフォーマンス改善に取り組んでみてください！
おまけ
この記事で紹介したパフォーマンス改善は、Astroという静的サイトに特化したフレームワークを使うことでより簡単に行うことができます。
試しにAstroでデモサイトを作ってみたら、パフォーマンス指標によく使われるPageSpeed Insightsで100点を取れました 
PR
株式会社HRBrainでは、一緒に働く仲間を募集しています！
Webパフォーマンス改善に興味がある方、ぜひご応募ください！