はじめに

※ こちらの記事はまだ未完成のため、しばらくは煩雑な内容が含まれている可能性があります

対応したことの知見を随時メモしていく予定です。

背景

現在、業務でRailsのプロダクトを扱っておりLighthouseの点数を上げる施策を行っているため、その対応内容をメモしていきます。

業務プロダクトのため、実際のコード等は割愛しております。

Rubyバージョン: 2.5.5
Railsバージョン: 5.2.5

本番ビルド時に以下コマンドで圧縮

./bin/rails assets:precomoile RAILS_ENV=production

ローカルに独自のフォントを用意している場合はpreloadの設定を行う

<link as="font" crossorigin="" href="Rails内フォントパス" rel="preload" type="font/woff2">

必要なRsource Hintsは追加、不要なRsource Hintsは削除する

<link href="" rel="preconnect dns-prefetch">

head タグ内でjsのライブラリを読み込んでおりかつ、asyncなどで読み込むと後続のjs処理に影響が出る場合はwebpackでまとめれば不要なレンダリングブロックを除外できる。

こちらは言わずもがなと思います。
chromeの場合は imgタグに loading="lazy" でも可能になっている。

画像同様、chromeの場合は iframeタグに loading="lazy" が可能になっている
google mapなどはiframeで読み込むこともあると思われるので使用している場合は設定を行う。