Lighthouseのスコアを改善する 〜Preload編〜 2日目

前回、jsのサイズを削減すべく、font-awesomeをフル読み込みしていたのを、使用するアイコンのみに絞り込む事で、jsのサイズを削減しました。
今回も引き続き、Lighthouseのスコアを改善してきます。
で、作業着手直後のスコアがこれ。

Lighthouseのレポート画面。

何故か前回よりスコアが改善していますね(妖精さんありがとー)
今回は、提案に従ってpreloadを付けていく。

Lighthouseの改善提案

一応、検証のために開発者ツールのNetworkタブをスクショしておく。

前回、preloadの仕様についてざっくり理解したつもりだったが、改めて読み返すとpreloadは、以下の画像の様に<link rel="preload">を書いた箇所で先に読み込んでくれる仕組みという事だった。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

それはそうと、Chromeの開発者ツールを眺めていて気づいたのだが、前回駆逐したはずのfont-awesome関連のファイルがまだ読み込まれている事に気づいた。

そして、lighthouseから「preloadしたら?」と勧められているファイルがこの3つなのである。
この3ファイル使ってないはずだし読み込んでいる箇所を消してしまえばpreloadする必要もなく解決しそう。

調べた所、scssに記載されているコイツを消せば、上記3つのファイルが読み込まれなくなった。
サイトの動作も問題ない。

@import '~@fortawesome/fontawesome-free/css/all.css';

で、リリースして再度、lighthouseでチェックすると・・・

・・・

ベベンッ!

9点 → 11点
ヤッタァ2点かぁ・・・。

「Lighthouseのスコアを改善する 〜Preload編〜 2日目」への1件のフィードバック

コメントする