2014/04/26(土) - 04/27(日)に開催されたニコニコ超会議3の、超チューニング祭に参加してきました。
SP版ニコニコ動画のトップページをチョッパヤにしてくれ、という課題に友人と二人で二日間かけて取り組んできました。
特に賞には引っかからなかったのですが、せっかく参加したので今回行った高速化の施策を軽く紹介しようと思います。
- jQueryからZepto.jsに変更
- JavaScriptの結合・圧縮
- 画像をCSSスプライトにまとめる
- 画像を減色
- HTMLの書き直しと圧縮
- CSSの書き直しと圧縮
- ファーストビューより下の画像を遅延読み込み
1. jQueryからZepto.jsに変更
共通ライブラリとして読み込まれていたjQueryをZepto.jsに変更しました。
これだけで、68KBくらい削減できます
2. JavaScriptの結合・圧縮
トップページだけで10個ものJavaScriptファイルが読み込まれていたので、uglify.jsを利用して1ファイルに結合・圧縮してしまいました。
また、アカウント設定なしでGoogle Analyticsのurchin.jsが読み込まれていたので削除してしまいました(なお本番のトップページでもアカウント設定なしで読み込まれている模様)。そもそもurchin.jsとかかなり古いコードなのでやめてほしいですね…
3. 画像をCSSスプライトにまとめる
サムネイルとか動的に切り替わる画像以外はCSSスプライトにまとめると、リクエスト数が減っていい感じです。
画像のスプライト化には自作のGruntタスクであるgrunt-spritesheet-generatorを利用しました。
4. 画像を減色
imageoptimとimagealphaを使って画像を減色します。特にpng画像はimagealphaを使うことで60-70%ほどサイズを削減できます。
5. HTMLの書き直しと圧縮
UIの改善のための書き直しと併せて、タグのネストを浅くしたりしました。
その上でgrunt-contrib-htmlminを使いコメントや改行コード、不要なスペースを削除しました。
6. CSSの書き直しと圧縮
grunt-cssoを使ってcssの圧縮をしました。cssoを利用すると、コメントや空行の削除だけでなくcssの構造的な最適化まですることができます。
また、SASSに書き直して利便性を上げるとともに未使用のCSSプロパティを消しています。
7. ファーストビューより下の画像を遅延読み込み
CSSスプライトにまとめられない画像(バナーや動画のサムネイルなど)は、ユーザーのスクロールに合わせて遅延読み込みされるようにしています。こうするとファーストビューより下の画像のリクエストを遅らせることができます。表示領域に入らなかった画像はリクエストされることもありません。この機能の実装にはlazyloadというライブラリを使っています。
以上です。
js/css/画像をすべてインラインで書いてしまいリクエストを一つにする、とか思いもよらない(でも言われてみれば合理的)な施策があったり、なかなか勉強になりました。(個人的には画像をローカルストレージにキャッシュするのが面白かったです)
他の人と同じ課題をもらって実装を競うとかしたことのない経験だったのでなかなか面白かったです。
次こんな機会があったらLTもしてみたいですね。
※一応実際のコードもおいておきます
参考(他の参加者の記事):
- 本の虫: 超会議3の超チューニング祭の感想
- レポート - 超チューニング祭で努力賞(最速賞)をとるためにやったこと - Qiita
- ニコ動 超チューニング祭で最優秀賞もらいました
- 超チューニング祭に参加した - masarakki's blog
- JavaScript - 超チューニング祭に参加＆表彰した - Qiita
- kmizu/slide_cho_tuning
- 超会議の偏った感想 - mizchi's blog
0 件のコメント:
コメントを投稿