PagespeedのLCPとTTIが遅い場合は font awesome を疑え

5225 ワード
Ruby Rails FontAwesome Ruby テキストリンク

このfontawesomeの記述を削除でスコア上昇

javascriptでfontawesomeのアイコンを読み込んでいる。

これがかなりスコアに悪影響を与えていたようだ。

<script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0+hogehogeWMzSS+hogehoge/5++hogehoge" crossorigin="anonymous"></script>

SVG画像をインラインで読み込むように変更

実際には削除ではなく、SVG画像をインラインで読み込むように変更した

コードはこちらを参考にした。
https://coderwall.com/p/d1vplg/embedding-and-styling-inline-svg-documents-with-css-in-rails

SVGのインライン読み込みをapplication_helperに実装
def embedded_svg(filename, options = {})
  file = File.read(Rails.root.join('app', 'assets', 'images', filename))
  doc = Nokogiri::HTML::DocumentFragment.parse file
  svg = doc.at_css 'svg'
  svg['class'] = options[:class] if options[:class].present?
  doc.to_html.html_safe
end
アイコンの読み込み
 <%= embedded_svg("common/font-awesome-icons/check-square.svg", class: 'check-square') %>

fontawesomeの読み込み速度

ネットワークタブで見る限り全然負荷は高く見えない。
230msで読み込みが完了しているのでスコアに大きな影響を与えていそうではない。

LCPとTTI

TTIとLCPはネットワークタブを見てもわからない、実際にレンダリングが完了したタイミング
ユーザーが操作可能になった状態とGoogleが判断したタイミングがスコアになるからだ。

特に後者のTTIは詳細が不明だ。

しかし今回スコアが上がったところを見ると、フォントやアイコンの読み込み完了タイミングまで見ていることは分かった。
もしくは font awesome の js の実行完了とともにアイコンが表示されるため
このjsが実行されないとユーザーはなにも操作可能にならないとGoogleが判断した可能性が高い。

fontawesomeを消したらスコア爆上がりした。

TTIとLCPのスコアが大きく改善。

変更前

変更後