はじめに
※ こちらの記事はまだ未完成のため、しばらくは煩雑な内容が含まれている可能性があります
対応したことの知見を随時メモしていく予定です。
背景
現在、業務でRailsのプロダクトを扱っておりLighthouseの点数を上げる施策を行っているため、その対応内容をメモしていきます。
対応内容
業務プロダクトのため、実際のコード等は割愛しております。
Rubyバージョン: 2.5.5
Railsバージョン: 5.2.5
assetsをminify化する
本番ビルド時に以下コマンドで圧縮
./bin/rails assets:precomoile RAILS_ENV=production
web fontをpreloadする
ローカルに独自のフォントを用意している場合はpreloadの設定を行う
<link as="font" crossorigin="" href="Rails内フォントパス" rel="preload" type="font/woff2">
Rsource Hints追加もしくは削除
必要なRsource Hintsは追加、不要なRsource Hintsは削除する
<link href="" rel="preconnect dns-prefetch">
CDNで読み込んでいるjsライブラリをwebpackから取得する
head タグ内でjsのライブラリを読み込んでおりかつ、asyncなどで読み込むと後続のjs処理に影響が出る場合はwebpackでまとめれば不要なレンダリングブロックを除外できる。
firstview外の画像をlazyloadにする
こちらは言わずもがなと思います。
chromeの場合は imgタグに loading="lazy" でも可能になっている。
firstview外のiframeをlazyloadにする
画像同様、chromeの場合は iframeタグに loading="lazy" が可能になっている
google mapなどはiframeで読み込むこともあると思われるので使用している場合は設定を行う。