3つのステップとは

サイトのコーディングがほぼ完了した際に、パフォーマンスが低すぎるとびっくりして、
なにが方法がないのか、色々調べて、検証してみた結果をまとめた記事です。
早速ですが、3つのステップはこちらです。

※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点！ひどすぎる！！

ミニファイ後

がっかり！ほとんど変わっていないじゃん。

でも、大丈夫！次の策があります。

使い方はとっても簡単、img属性にloading=“lazy”を追加するだけです。

<img src="pic.png" alt="画像の詳細" loading="lazy">

loading=“lazy”の効果はどうだい？

ちょっと微妙ですね！

最後、最新のやり方を導入してみたいと思います。

使い方も簡単。セクションごとに指定するだけです。

section {
  content-visibility: auto;
  contain-intrinsic-size: 500px;　
}

参考記事はGoogleのブログです。
https://web.dev/content-visibility/

すぐ検証してみました。

さすが最新技術！　早くなりました！

今度、もっと掘り下げてみたいと思います。