https://daitai.dev/tags/%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9/Recent content in パフォーマンス on 大体動かないHugojaThu, 09 Apr 2026 23:54:48 +0900https://daitai.dev/posts/lighthouse-audit/Thu, 09 Apr 2026 23:54:48 +0900https://daitai.dev/posts/lighthouse-audit/<p>Chrome の Lighthouse でこのブログのパフォーマンスを測ったら 64/100 という微妙なスコアが出た。<br> 「さすがにまずいかな」と思って調査してみたら、想定外の結論にたどり着いたのでメモ。</p> <h2 id="状況">状況</h2> <p>Lighthouse の JSON レポートを取得して Claude Code に分析させた。</p> <p>スコアはこんな感じ:</p> <table> <thead> <tr> <th>カテゴリ</th> <th>スコア</th> </tr> </thead> <tbody> <tr> <td>Performance</td> <td>64</td> </tr> <tr> <td>Accessibility</td> <td>94</td> </tr> <tr> <td>Best Practices</td> <td>100</td> </tr> <tr> <td>SEO</td> <td>100</td> </tr> </tbody> </table> <p>Performance と Accessibility に問題あり。</p> <h2 id="accessibility-の問題-コントラスト比">Accessibility の問題: コントラスト比</h2> <p>こっちはシンプルだった。</p> <p>シンタックスハイライトの CSS（monokai テーマ）で、JSON のキー名や XML タグに使われるピンク赤（<code>#f92672</code>）が、背景色（<code>#272822</code>）に対してコントラスト比 3.92:1 しかなかった。WCAG AA 基準は 4.5:1 以上なので落第。</p> <p>Lighthouse のレポートで指摘されていた要素:</p> <pre tabindex="0"><code>selector: code.language-json &gt; span.line &gt; span.cl &gt; span.nt explanation: contrast ratio of 3.92 (foreground: #f92672, background: #272822) </code></pre><p>該当するトークンを全部拾うと <code>.nt</code>（NameTag）、<code>.kn</code>（KeywordNamespace）、<code>.o</code>（Operator）、<code>.ow</code>（OperatorWord）、<code>.gd</code>（GenericDeleted）の 5 種類。</p> <p><code>#f92672</code> を <code>#ff5c8d</code> に変更した。コントラスト比は 5.1:1 になって AA 準拠。monokai のピンク赤の雰囲気はそのまま、明度を少し上げただけなので見た目の変化はほぼわからない。</p>