bootstrapサイトあるいはjqueryサイトの高速化手法について
jqueryというレガシーなjsフレームワークを使用した古いサイトの初期表示を高速化する手法について述べる。
PageSpeed Insightsで「Poor」と断ぜられてしまうと、Googleの検索結果にも影響を与えるため、解決しておきたいところだ。
特に、「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」について見ていく。
・JQuery JS
JSファイルの読み込み方法を非同期に変える。
<ＳＣＲＩＰＴ src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
↓
<ＳＣＲＩＰＴ defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
jqueryだけを使用したサイトであればこれでいいのだが、jqueryに依存するフレームワークを用いているbootstrapサイトなどでは defer によるJSファイルの非同期読み込みでは順序を制御することができないのだ。
・Bootstrap JS
Promise#then を使い、jquery jsとbootstrap jsを2段階に分けて読み込む。
<ＳＣＲＩＰＴ>
function first_phase() {
var promise = new Promise(function(resolve, reject) {
// (1) read jquery js here.
var head = document.getElementsByTagName('head')[0];
var js_insert_here = document.getElementById('js_insert_here');
var s_2 = document.ｃｒｅａｔｅＥｌｅｍｅｎｔ('script');
s_2.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js';
s_2.onload = resolve;
head.insertBefore(s_2, js_insert_here);
});
promise.then(function() {
second_phase();
});
};
function second_phase() {
// (2) read bootstrap js here.
var head = document.getElementsByTagName('head')[0];
var js_insert_here = document.getElementById('js_insert_here');
var s_3 = document.ｃｒｅａｔｅＥｌｅｍｅｎｔ('script');
s_3.defer = 'true';
s_3.src = './js/bootstrap.min.js';
head.insertBefore(s_3, js_insert_here);
};
// run first_phase on loaded html file.
var requestAnime = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (requestAnime) requestAnime(first_phase);
else window.addEventListener('load', first_phase);
<／ＳＣＲＩＰＴ>
(1) jsファイルの読み込みはjquery jsファイルの読み込み完了のonloadイベントでbootstrapを読み込み開始する。
(2) jsファイルは、deferディレクティブをつけて非同期で読み込む。
| 2023年12月 | ||||||
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | ||||||
iOS
web
アプリの著作権
ブロックチェーン／暗号技術
新しい社会
禅・大乗仏教
日本のなりたち
