JavaScriptの最小化を行いページの表示速度を上げる はてなブログ

f:id:gamelifecompany55:20190201132618j:plain

JavaScriptの最小化を行いページの表示速度を上げる はてなブログ

PageSpeed Insightで表示される「JavaScriptの最小化」についての解説と考察
主に、はてなブログ使用者に向けて。

JavaScript最小化とは?

JavaScriptの余分なコードや空きを削除して、コードの容量を減らすこと。らしい

今回は、こちらで紹介されている方法を使用して
JavaScriptの最小化 前後でどのくらいページ表示速度が変化するか調べてみる。

www.keicode.com


JavaScript の最小化を行う手順

packerを使用してコードの最小化を行う。
dean.edwards.name


最小化したいJavaScriptのコードを入力して、出力したテキストに変更します。
必ず、バックアップを取りJavaScriptの最小化を行ってください。


最小化したJavaScriptのコードをすべて
PackerのPaste:部分に張り付け、Packを押すと最小化されたコードがCopy:に出力されます。

出力されたコードをそれまであったところに張り付けるだけで、作業は完了です。

わたしは、
Googleアドセンスのコードをすべて最小化しました。
最小化する前のページスピードのスコアは60点でしたが

f:id:gamelifecompany55:20190210032123j:plain
JavaScript最小化 前

アドセンスコードをすべて最小化すると、60->66点に変化しました。

f:id:gamelifecompany55:20190210032127j:plain
JavaScript最小化 後


最小化する前にコードのバックアップすることの大切さ

最小化する前のコードは、人間が読むことができるコードですが
コードを最小化すると、いらない空白やワードすべてなくなるので
最小化さいたあとにコードの変更を加えることが大変難しくなります。

その為、最小化する前に
データのバックアップをとってを必要になったときに、また修正を行い
コードの最小化をすればよいだけです。

バックアップをとることを心がけましょう。



はてなブログ 軽量化についてまとめた記事はこちら
www.glco.xyz