外部JavaScriptを非同期（async / defer）で読み込みレンダリングを高速化する | web helog - HTML、CSS、JavaScriptなどWebに悩む人のネタ帳です。Googleのサービス「PageSpeed Insights」の解析結果で「修正が必要：スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という項目があります。 レンダリング中にJavaScriptを読み込むことで、画面表示に遅延が生じているという警告のようです。 （CSSについては別途考えます） そこで、HTML5から追加された属性「async」と「defer」を使って、スクリプトの読み込みを非同期にし、画面表示の高速化を図ってみたいと思います。 概要 HTMLのソースは上から順に解析されます。 ソース上部に大量のJavaScriptを読み込んだ場合、その読み込みに時間がかかる分だけ画面の表示が遅くなります。 少し前までは、JavaScriptはhead部分ではなく、bodyの閉じタグの直前で読み込むことが奨励されていました。 読
