PageSpeed でフォントの「過大なネットワーク ペイロードの回避」対策で速度改善

PageSpeed Insights の表示で、「過大なネットワーク ペイロードの回避」をせよと指示されるケースの対策です。
中でも、ウェブフォントが上位に指摘されているのでフェブフォントの対応です。

ネットワークペイロードの回避

PageSpeed の指摘としてはフォントのロードに負担がかかるので遅延読み込みをせよとあります。

改善対策

負担をかけているのはウェブフォントなので、CSS を改善して読み込みを遅延読み込みさせます。

CSS で font-display 指定を swap にする

CSS の @font-face を利用してフォントを遅延読み込みさせます。
CSS を編集して @font-face に swap を設定します。

    @font-face {
        font-family: 'Noto Sans Japanese';
        font-style: normal;
        font-weight: 100;
        src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Thin.otf) format('opentype');
        font-display: swap;
    }
    
    @font-face {
        font-family: 'Noto Sans Japanese';
        font-style: normal;
        font-weight: 200;
        src: url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff2) format('woff2'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.woff) format('woff'), url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Light.otf) format('opentype');
        font-display: swap;
    }

今回の PageSpeed の指摘では Google の Noto Sans Japanese が原因だったので、そこに font-display を追加しています。

font-display で swap を指定しておけば、font のロード待ちを回避してくれます。

パフォーマンスの確認

PageSpeed Insights を確認して「過大なネットワーク ペイロードの回避」という記述が消えていれば OK です。

パフォーマンスへの影響

実はこのウェブフォントのロードは大きな影響があります。

swap設定前の点数

swap 設定なしでは、0点でした😇

Swap なしのロード

swap ありの点数

swap ありでは点数が大幅に改善しました。

なんと驚きの36点もの改善となりました😁
「過大なネットワーク ペイロードの回避」は速度改善では外せない項目ですね。