Webアプリのスピードアップを図るため、Googleが提供するPageSpeed Insightsで調べてみました。
https://developers.google.com/speed/pagespeed/insights/
すると、「レンダリングをブロックするJavaScript を除去してください」というのが出てきました。
原因は、下記のとおりです。
0. HTMLのテンプレートファイルにおいて、base.htmlという基本となるテンプレートを作り、個別のページはそれを継承してhtmlを読み込んでいます。
0. jqueryやbootstrapといったCDNから読み込むものを、base.htmlにおいて読み込んでいます。本来であれば、これらの読み込みはbodyの最後に行うべきだと思いますが、個別のhtmlにおいてjqueryのコードを動かすためには、base.htmlのheadの所で読み込まないと、そのCDNを受けてコードが動いてくれません。
html
1<!--base.html--> 2<!DOCTYPE html> 3<html lang="{{ LANGUAGE_CODE|default:"en-us" }}"> 4<head> 5 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 6 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 7 {% block extrahead %}{% endblock %} 8</head> 9<body> 10{% block content %} 11 {{ content }} 12 {% endblock %} 13</body>
html
1<!--個別のhtml--> 2 3{% extends "base.html" %} 4{% block content %} 5<!--コンテンツやjqueryのコードをここに記載--> 6{% endblock content %}
結果として、jqueryをhtmlより先に読み込ませることになるので、ページの読み込みスピードが遅いと指摘されています。
考えられる方法として、base.htmlでは、CDNからjqueryを読み込むことをせず、各ページの個別のhtmlでCDNを読み込むことにすれば解決するのかと思いますが、全てのページに配置しておくのも、スマートなやり方ではないのかとも思います。
一般的に、このようにbase.htmlを引き継ぐ形で個別のhtmlを作る場合、jqueryのCDNへのリンクはどちらに配置すべきでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/06/28 23:02