[パフォーマンス] FontAwesomeのfont-display:swap設定・フォントpreload追加

[masaton0216]

背景

https://pagespeed.web.dev/analysis/https-opensource-workshop-jp/bkpc8r3mtv?form_factor=mobile
PageSpeed Insightsのモバイルスコアが44点で、FCP: 23.8秒と非常に遅い状態です。
FontAwesomeのフォントファイル（solid: 420KB、brands: 208KB、regular: 68KB）に font-display: swap が設定されておらず、フォント読み込み完了までテキストが非表示になります（FOIT: Flash of Invisible Text）。

また、最も使用頻度の高いsolidアイコンフォントのpreloadを追加することで、フォントの読み込み開始を早めます。

スコープ外とした項目

app.js / 707.js への defer 属性追加

影響調査の結果、複数プラグイン（外部プラグイン含む）にわたり、合計37件のインラインスクリプトが defer 追加により動作しなくなることが判明しました。リグレッションリスクが高いため、今回はスコープ外とします。

実装手順

Step 1: FontAwesomeのfont-display: swapを設定

ファイル: resources/sass/_variables.scss

FontAwesome 6は $fa-font-display 変数をサポートしています。以下を追加:

$fa-font-display: swap;

これにより、フォント読み込み完了前にフォールバックフォントでテキストが表示されるようになります（FOIT解消）。

Step 2: 主要フォントのpreload

ファイル: resources/views/layouts/app.blade.php（94行目の後）

最も使用頻度の高いsolidアイコンフォントをpreload:

<link rel="preload" href="{{ url('/') }}/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2" as="font" type="font/woff2" crossorigin>

検証方法

1. npm run prod でビルドが成功すること
2. 生成された public/css/app.css 内のFontAwesome @font-face に font-display: swap が含まれること
3. 一般ページ・管理画面でFontAwesomeアイコンが正常に表示されること
4. Chrome DevTools の Network タブで、solidフォント（woff2）がpreloadされていること
5. Lighthouse でフォント関連の警告が解消されていること