【パフォーマンス】Next.js から学ぶCSSのインライン化こんにちは、@kaa_a_zu です。Zennにおける処女作であるこの記事では、スタイルをCSSファイルとして定義し読み込むのではなく、インライン化することが何故パフォーマンスに影響を及ぼすのか、またインライン化を行うときに何に注意をしないといけないのかについて書こうと思う。 インラインCSS の効果 まず、「CSSをインライン化することでパフォーマンスが改善される」ことが分かる事象について紹介する。 Next.js の automatic-webfont-optimization Reactのフレームワークである Next.js v10.2 で導入された automatic-webfont-optimization が機能したことで、WebFontを利用しているサイトでは、以下のようなパフォーマンス改善が(ほぼ)起こる (※LightHouseでのスコアが全てではないが、パフォーマンスが
