レンダリングブロックについて

今日は JavaScript / CSS の遅延読み込みを実装した。そんなに複雑なものではなくて、あとから link 要素や script 要素を追加するだけのもの。

モバイル端末向けの Single Page Application で初回起動時にすべてのデータを転送するようなものをつくっていたのだけど、JavaScript や CSS のサイズが大きくて 3G 回線などで数秒間何も描画されず、真っ白になることに気づいた。

いわゆるレンダリングブロックというものらしく、読み込みが完了するまでレンダリングがブロックされるもの。都合が良い場面もあるのだけど、今回のようなファイルサイズになるとちょっと考えものだ。

そこで、まずは小さい CSS (ローディングの通知を表示) と小さい JavaScript (他の CSS / JavaScript を読み込む) を読み込んで、そこから遅延させたものを読み込むようにした。

全体時間 (すべての読み込みが完了するまでの時間) としては増えるのだけど、体感時間 (レンダリングされるまでの時間) としては減ったように思う。

これに際してちょうど良い gulp プラグインなどが見当たらないのだけど、みんな組み合わせてやっているのかな。JavaScript を一括でまとめるようなものはあっても、まとめて rev つけたものを遅延でとかあんまり見ない気がする。

週ぶり (shuburi) 2015-W15

bouzuya/torzder 。手元では再生の制御まで進んでいるのだけど、まだ公開していない。

よもやまばなし

アップル、新MacBookを発売。当初はオンライン限定、税別14万4800円から - Engadget Japanese 12インチの新型｢MacBook｣、今日は発売されない?! | 気になる、記になる…

朝の「発売されない」のニュースで笑ったけど、どうやら無事に発売されたようだ。