#15 ポケモンタイプ別検索アプリを作る-高速化編【ぴよぴよコーダーの開発日記】

なんとなく脱jQueryのブログを読んでいたら、ページスピードが気になったので、先日作ったページをDev toolのAuditsで測定してみた。

７０点。。。ダサい。。

とりあえずjsはheadじゃなくてbodyの閉じタグの上に書くのが高速化の定石なんだっけ、とjQueryの読み込みタグを下のほうに、bodyの閉じタグの上あたりに移動して、もう一回測定。

おぉ。いきなり15点も上がりました！でも、せっかくなら90点以上取りたい。緑色になりたい。エラーメッセージをちゃんと読んでみます。

Reduce the impact of third-party code（サードパーティ(jQuery)のコードの影響を減らせ）Third-party code blocked the main thread for 660 ms（サードパーティのコードはメインスレッドを660ミリ秒ブロックした）

ふむふむ

Third-party code can significantly impact load performance. （サードパーティのコードはロードパフォーマンスにかなり影響する）Limit the number of redundant third-party providers（冗長なサードパーティのプロバイダ数を制限して） and try to load third-party code after your page has primarily finished loading（主にページの読み込みが終了した後にサードパーティのコードを読んでくれ）

なんとなく、読んでるjsの本数減らせばいいんだね。と読み解く。CDNで落としていたjQueryと、サーバに落としていたjQueryUIのAutocompleteのjsを合体させて1本にして再度テストしてみた。

おぉ。93点まであがりました。なんというか高速化のはじめの一歩みたいな記事になってしまいましたが、無事に高速化ができてよかったです。

＜後日談＞さらに、HTMLパースをブロックしないようjQueryのタグにdefer属性をつけてみましたが、なぜか91点に落ちました。。。なんでだろう。まぁ、多言語処理自体がHTMLのパースに関わる処理なんで、やはり多言語処理はPHPなどで書くべきだなという学び。ユーザー操作が絡むイベント処理なんかはJSでいいと思いますが。

参考：<script> タグに async / defer を付けた場合のタイミング

参考：Async, defer使うときの注意点