レンダリングブロックを考慮したリソースの読み込み（CSS編） - Qiita

はじめに こちらの記事はレンダリングブロックを考慮したリソースの読み込み（レンダリングの基本）の続きです。 前述の記事を読んでおくと、当記事の内容も理解しやすいかもしれません。 やるべきこと CSSファイルが読み込まれるとパース後にCSSOM（CSS版のDOMのようなもの）の構築が行われます。 CSSOMの構築中はJavaScriptの実行やページのレンダリングがブロックされます。（DOMの構築はブロックしません。） しかし、以下の対策を行うことでこのような問題が解消されます。 1. CSSを非同期で読み込み 2. クリティカルCSSをインラインで記述 具体的にどのような記述をすれば良いのか紹介していきます。 CSSを非同期で読み込み CSSを非同期で読み込むとCSSOMの構築も非同期になり、JavaScriptの実行やレンダリングがブロックされるといった問題が解消されます。 CSSの非同