概要 「ページの表示速度をあげるため、JavaScriptやCSSファイルがレンダリングを妨害しないようにする」 という目的にたいして調べたことをまとめる。 分析ツール ページ表示速度を測定するために Lighthouse を利用しており、 分析結果の Eliminate render-blocking resources を減らすことがゴール。 Lighthouseは、Chrome検証モードのAuditsタブからも利用できる。 PageSpeed Insights(PSI)はlocalやstaging環境では利用できないが、 PSIの分析エンジンとして Lighthouse を使用しているため、Lighthouse を利用すると参考にしやすいかも。 (Lighthouse と PSI は、以前は異なる仕組みでパフォーマンスを測定していたため、チェックする指標は同一ではなく、同じ指標だった
![レンダリングを妨げるJavaScriptとCSSを削除するためにやったこと - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/282baa22cefb1b731b4245a0e62b3257a9d39b86/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgzJUFDJUUzJTgzJUIzJUUzJTgzJTgwJUUzJTgzJUFBJUUzJTgzJUIzJUUzJTgyJUIwJUUzJTgyJTkyJUU1JUE2JUE4JUUzJTgxJTkyJUUzJTgyJThCSmF2YVNjcmlwdCVFMyU4MSVBOENTUyVFMyU4MiU5MiVFNSU4OSU4QSVFOSU5OSVBNCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBQiVFMyU4MiU4NCVFMyU4MSVBMyVFMyU4MSU5RiVFMyU4MSU5MyVFMyU4MSVBOCUyMCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MDA2YjdjMTk5ODRhNjNiZjNjNTQ3ZjEzODJmZGY5ZTg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGFydW5hLW5hZ2F5b3NoaSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzA2YTk2ZThkODg3NTM4NTk1MmRhZjIzOTI4YWFiNzg%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5910a8adfd040b61b81d6c00501e16db)