PageSpeed Insightsの速度をUPさせる方法3選

ページの表示スピードを速くする方法のシェアです！
表示が遅いページは離脱しちゃいますし、やった方がいいと思います。

before↓

after↓

画像はSPのみの結果ですが、PCも40点台→90点台までアップしました。

僕は以下の3点を実行し速度アップすることができました。

1.画像の遅延読み込み

2.Webフォントをサーバーにアップして利用

（アップする際にはこちらのような記事を参考に、ライセンスを十分に確認してください）

3.WebP対応

順番に解説していきます。

1.画像の遅延読み込み

遅延読み込みとは？→参考サイト
表示領域の画像を先に読み込んで、画像の読み込みを早く済ませよう、みたいな意味で捉えました。以下コードです↓

<!-- ② ↓ classに「lazyload」を追加, widthとheightを指定, srcをdata-srcに変更 -->
<img class="lazyload" style="width: 100%; height: 100%;" data-src="https://like-amber.com/wp-content/uploads/2022/02/john-mcarthur-TWBkfxTQin8-unsplash-1.jpeg" alt="テスト">

<!-- ① ↓bodyタグ直前にscriptタグを配置 ※呼び出しと実行の二つのコードが必要です -->
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
<script>lazyload();</script>
</body>

・scrpitタグの簡単解説
scriptタグの上の行でlazyloadというJavaScriptライブラリを読み込み、下の行でlazyloadを呼び出しています。

・imgタグの簡単解説
classにlazyloadを追加して横幅と高さを指定しています。
横幅と高さをHTMLで判別できるようにする必要があるため直接記述しています。height: auto; にすると結果表示画面で「明示的に指定してください」と表示されたので、○%とか○pxみたいにしてあげるといいかもしれません。（デザイン上問題なければ）
src → data-srcにしています。lazyloadで読み込む時には必要になる記述です。

2.Webフォントをサーバーにアップして利用

ダウンロードして利用がOKなフォントはサーバーに設置しましょう。
※Adobeフォントの場合は、ライセンス認証してから表示する流れなので（しょうがないのですが）スコアが非常に悪くなりました。涙

例↓


<!-- ①srcでフォントを読み込んで、font-familyで名前を定義する -->
@font-face {
    font-family: "font-notosans-jp";
    src: url(../font/SawarabiGothic-Regular.ttf);
}

<!-- ②呼び出したい箇所で、①で定義したfont-familyを指定する -->
.font-section {
    font-family: "font-notosans-jp", sans-serif;
}

3.WebP対応

imgタグをWebP対応するためのコードです。

<!-- Before -->
<img src="./assets/img/img01.jpg" alt="画像">

<!-- After -->
<picture>
    <!-- webP対応ブラウザ用のWebP -->
    <source data-srcset="./assets/img/img01.webp" type="image/webp">
    <!-- webP非対応ブラウザ用のjpg -->
    <img src="./assets/img/img01.jpg" alt="画像">
</picture>

↑のコードをみていただくとわかると思うのですが、jpgとwebpを用意する必要があります（面倒ですね涙）
こちらでWebPに変換できるので用意しましょう。webpに変換すると容量が軽くなります。

↓はWebP対応に加え、遅延読み込みのlazyloadも対応する場合のコードです。
※遅延読み込みによる表示のされ方に問題がなければ、こちらの方が早くなるかなと思います。

<picture>
    <!-- WebPは変化なし -->
    <source data-srcset="./assets/img/img01.webp" type="image/webp">
    <!-- srcをdata-srcにして、classにlazyloadを追加、widthとheightを追加しています -->
    <img data-src="./assets/img/img01.jpg" alt="画像" class="lazyload" style="width: 100%; height: 100%;">
</picture>