3つのステップとは
サイトのコーディングがほぼ完了した際に、パフォーマンスが低すぎるとびっくりして、
なにが方法がないのか、色々調べて、検証してみた結果をまとめた記事です。
早速ですが、3つのステップはこちらです。
- CSSファイル、JSファイルを圧縮・軽量化(Minify)する
- img要素を「loading=“lazy”」を付与する
- content-visibility: auto;でコンテンツの遅延読み込み
※IEと戦う戦士なら諦めましょう。
1. CSSファイル、JSファイルを圧縮・軽量化(Minify)する
2021年のサイト制作現場で、ファイルを圧縮しない選択肢はないでしょう。
Webpackで開発する際に、ミニファイは当たり前ですが、
Webpackを使う以外の場合でも、ファイルを簡単にミニファイする方法がございます。
こちら、VScodeの**「JS & CSS Minifer」**という拡張機能です。
使い方について、Google先生に聞けば、丁寧に教えるから、ここで省略します。
一度圧縮されたファイルを元に戻る便利な拡張機能もあります。
「Prettier – Code formatter」
ただし、圧縮されたファイルを**「Prettier – Code formatter」**で戻ったあと、最後のセミコロンが省略されてしまう場合があります。
p {
color: #000;
font-size: 16px;
margin: 15px auto /* ここのセミコロンがなくなっちゃう！！！ */
}
何も仕掛けていないときのサイトは36点！ ひどすぎる！！
ミニファイ後
がっかり！ほとんど変わっていないじゃん。
でも、大丈夫！次の策があります。
2. img要素をloading=“lazy”を付与する
使い方はとっても簡単、img属性にloading=“lazy”を追加するだけです。
<img src="pic.png" alt="画像の詳細" loading="lazy">
loading=“lazy”の効果はどうだい？
ちょっと微妙ですね！
最後、最新のやり方を導入してみたいと思います。
3. content-visibility: auto;でコンテンツの遅延読み込み
使い方も簡単。セクションごとに指定するだけです。
section {
content-visibility: auto;
contain-intrinsic-size: 500px;
}
MDNの解説はこちらです。
https://developer.mozilla.org/ja/docs/Web/CSS/content-visibility
参考記事はGoogleのブログです。
https://web.dev/content-visibility/
ちなみに、後こちらの日本語記事もみつけました。
すぐ検証してみました。
さすが最新技術！ 早くなりました！
今度、もっと掘り下げてみたいと思います。