RailsでLighthouseのPerformanceスコアを44から〇〇に改善したときのメモです。
前提条件
- Rails
- Heroku
- S3
改善前のLighthouseのPerformanceスコアは44点
やったこと一覧
指摘されているものを上から順につぶしていく
Defer offscreen images
Consider lazy-loading offscreen and hidden images after all critical resources have finished loading to lower time to interactive.
Lozad.js を導入して画像を遅延読み込み
Defer offscreen images が指摘されたので、Lozad.js を導入
Reduce initial server response time
Keep the server response time for the main document short because all other requests depend on it.
1回目叩いたときにスコアが良かったので一旦放置。
Preload key requests
Consider using
<link rel=preload>to prioritize fetching resources that are currently requested later in page load.
ファーストビューの表示に必要な要素を先読みするためにpreloadを設定する。
Googleさんから指摘されたのはfontawesomeのアイコンの模様。
~/assets/font-awesome/fa-regular-400.woff2