PageSpeed Insightsに従ってサイトを最適化してみた
PageSpeed Insightsという, googleが提供する, webサイトのパフォーマンスを測定して, 速度上昇の提案をしてくれるツールがある.
今回はそれに従って, パフォーマンスの向上を目指してみた.
まあ, 元々そんなに重いwebサイトではないのであまり最適化する必要はないのだが(早すぎる最適化), webの学習の一環として最適化を試みることにする.
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
このサイトで<head>に使っているcssはdefault.css1つだけである.
googleの提案する手法は,
- 小さな CSS ファイルのインライン化の例
- 大きなデータ URI をインライン化しない
- CSS 属性をインライン化しない
であるが,
- 大きなデータ URI をインライン化しない
- CSS 属性をインライン化しない
はそもそも行っていない.
そして,
- 小さな CSS ファイルのインライン化の例
はbootstrapを使ってcssファイルを1つにまとめている以上, 困難である.
しかし,
私はgulpもgruntも使わずにbootstrap4をカスタムビルド - ncaqしているので,
そういうことなら使ってないモジュールを@importするのをやめて,
cssファイル自体のサイズを減らしてみることにした.
さらにsassに--style compressedオプションを追加して圧縮する.
行の長さが2048を超えてしまって,
POSIX的なテキストファイルでなくなってしまうのが嫌だったので,
適度に改行を入れたかったのですが…
この世はバイナリ時代,
あまり気にすることもないのかもしれません.
これでdefault.cssのサイズは128Kから68Kになりました.
実際にはcssはnginxによって圧縮されて配信されるので, ネットワーク的な負荷は大差ないかもしれませんが, cssの場合パースの時間がかかるので, 効果がないこともないのではないでしょうか.
画像を最適化する
この内自分が制御できるのはfavicon.pngだけなので, これを圧縮してみることにする.
一応gimpの最大圧縮オプションで保存したはずだが, google的には物足りなかったようだ.
googleの推奨するOptiPNGを使って圧縮をしてみる.
OptiPNG を使って PNG 画像を最適化する - eTuts+ Server Tutorialを参考にした.
optipng -o7 -zm9 favicon.pngを実行してみたところ,
なんとfavicon.pngのサイズは99Kから87Kに圧縮出来ました.
gimpの圧縮オプションは最大でも結構甘いことがわかった.
ブラウザのキャッシュを活用する
https://www.google-analytics.com/analytics.js (2 時間)が指定されているんですけど, googleお前ー!!!
JavaScript を縮小する
たしかにdefault.jsのサイズは704Kでこの中では非常に大きいため, 圧縮はしておきたい.
しかし, jsの圧縮は難読化を伴うため, 常々他のサイトの難読化に困らされていた私としては, あまり圧縮はしたくないのである.
しかし, よく考えればこのサイトのコードはgithubで公開しているので, 別に難読化されても問題がないことに気がついた.
というわけでいつもは忌み嫌っていたuglifyjsでサクッと圧縮してみる.
"default.js": "browserify default.ts -p [ tsify ]|uglifyjs --compress -"
default.jsは704Kから536Kに縮小されました.
タップ ターゲットのサイズを適切に調整する
こういうのを避けたいからbootstrap使ってるの! デフォルトで設定してくれ!
.nav-item {
line-height: 3em;
}
にしてみた.
改善後
あんまり変わらないですね… 元々そこまでスコアが悪くなかったので仕方がない.
Google Playのスコアだって60 / 100速度なので, そんなに神経質になる必要はないでしょう.
モバイルで閲覧しにくいサイトのリファクタリングには役に立つと思います.
hatena-bookmark
