質問: Webアプリのスピードアップを図るため、Googleが提供するPageSpeed Insightsで調べてみました。 https://developers.google.com/speed/pagespeed/insights/ すると、「レンダリングをブロックするJavaScript を除去してください」というのが出てきました。 原因は、下記のとおりです。 1. HTMLのテンプレートファイルにおいて、base.htmlという基本となるテンプレートを作り、個別のページはそれを継承してhtmlを読み込んでいます。 2. jqueryやbootstrapといったCDNから読み込むものを、base.htmlにおいて読み込んでいます。本来であれば、これらの読み込みはbodyの最後に行うべきだと思いますが、個別のhtmlにおいてjqueryのコードを動かすためには、base.htmlのheadの所で読み込まないと、そのCDNを受けてコードが動いてくれません。 ``` {% block extrahead %}{% endblock %} {% block content %} {{ content }} {% endblock %} ``` ``` {% extends "base.html" %} {% block content %} {% endblock content %} ``` 結果として、jqueryをhtmlより先に読み込ませることになるので、ページの読み込みスピードが遅いと指摘されています。 考えられる方法として、base.htmlでは、CDNからjqueryを読み込むことをせず、各ページの個別のhtmlでCDNを読み込むことにすれば解決するのかと思いますが、全てのページに配置しておくのも、スマートなやり方ではないのかとも思います。 一般的に、このようにbase.htmlを引き継ぐ形で個別のhtmlを作る場合、jqueryのCDNへのリンクはどちらに配置すべきでしょうか。
回答: > > jqueryのCDNへのリンクはどちらに配置すべきでしょうか。 > > > 動作に問題無ければ、テンプレートと個別ページのどちらから読み込んでも「問題ない」と思います。 JSの読み込み速度については通常は同期を取るので、「asyc属性」または「defer属性」を加えて「非同期」で読み込ませてはどうでしょうか? async 属性 defer 属性