akiyoko blog

akiyoko の IT技術系ブログです

「第51回 HTML5とか勉強会」に参加してきました

今日は、「HTML5とか勉強会」に初参加してきました。
会場のサイバーエージェントにも初潜入。大きな会場はほぼ満員でした。


金曜の放課後だったので、疲れで後半ウトウトしてしまってました。。



第51回 HTML5とか勉強会 - connpass


主催

html5j

会場

株式会社サイバーエージェント
東京都渋谷区道玄坂1丁目12番1号 (渋谷マークシティ 13F)

YouTubeライブ配信



今回のテーマは「パフォーマンス」でした。




ブラウザのパフォーマンスを限界まで高める、HTMLコーディングの考え方

川田 寛氏(NTTコムウェア株式会社)

html5j パフォーマンス部




今日のアジェンダ

  • 戦略の立て方
  • 改善の方法
  • 最近のWeb標準の動向


戦略の立て方

  • いろいろ書籍化してきたが、パフォーマンスのノウハウはたった半年でレガシー化してしまった。。
  • Webを取り巻く環境は酷くなった。
    • ナビゲーション(画面遷移)・・・ネットワーク環境の悪化
    • ランタイム(アニメーション)・・・Androidは辛い
  • パフォーマンスで重要なポイントは「頑張り過ぎないこと」
    • 職人魂ダメ!
    • パフォーマンス改善は果てが無い
  • どれくらい頑張るかをはじめに決める
  • 「90パーセンタイルで1秒以下になるように」というのが鉄板
    • パーセンタイル? ⇒ レアケースを取り除くこと
    • Dev ツールのネットワーク(Timeline, ウォータフォール)でボトルネックを探すのがひとつの戦略


改善の方法

  • 重要な3つのポイント
    • Initial Render, Visually Complete, Load Complete の観点が重要
  • Initial Render・・・最初のレンダリングが開始される時間
  • 対策に必要なこと
    • DNSの最適化
    • リダイレクトの最適化
    • TCP/SSLの接続の最適化
    • ファーストバイトダウンロードの最適化
  • Visually Complete・・・見た目が完成している状態(スクリプト実行は含まない)
    • Speed Index」って? Webページの速さを測る指標
    • 最近ブームになって来ている
    • unload -> load の発火までの時間だけでなく、Webページが表示される過程も評価
  • Speed Indexを高めるには?
    • glunt使ってたら普通に対策できる
    • CSS, JavaScriptの最適化(Minify、小さいサイズのものは Combine 他)
    • 画像ファイルの最適化(optimize, JPG化, CSS Sprite 他)
  • より全体から対策するなら、Critical Rendering Path
    • レンダリング完了の最短パスを調整するためのもの
    • JS/CSSはHTMLパースを停止させる
    • 実はCSSはインライン化した方がよいとの説も・・
  • Make the Web Faster
  • Load Complete・・・全ての読み込みが完了


最近のWeb標準の動向

  • Web Performance Working Group
    • W3C内のワーキンググループ
  • Web Timing
    • いろんなログをJS上で取得する
  • いかにして限界を引き上げるのか?
    • Page Visibility, Page Visibility 2
    • Timing control for script-based animations
    • Resource Hints
  • 日本Cordovaユーザ会を立ち上げたよ!



 

ブラウザーに優しくして、アニメーションを滑らかに

Brian Birtles氏(Mozilla Japan

  • 10年ずっと Firefox のアニメーションの開発
  • UIを増やさなくても、アニメーションで説明できることも多い
    • アニメーションのおかげで、小さい画面でも情報量を増やすことができる
    • 特にモバイルデバイス
    • ただし、パフォーマンスが必要(パフォーマンスが良くなければ情報が欠落してしまう)
  • ブラウザの内部では、いろんなツリーを持っている(DOMツリー、レンダー(フレーム)ツリー)
    • 作戦その1)display:none を利用して、画面外に出たなノードをツリーから消去する
  • 「リフローを避ける」戦略
  • 実は、レイアウト(リフロー)の過程が重い
    • 作戦その2) リフローさせてしまうCSSプロパディを避けるという戦略
    • top, left, margin-top などより、transformを使ってみる
    • font-size はアニメーションさせない
  • 描画の重さは、領域と重さの掛け算
    • 領域を小さくする
  • 事前描画をすれば速くなる(SVGをimg要素で出す)
  • レイヤーを使う
  • ためらっているブラウザ(ブラウザが忙しくなるとカクカク)
    • コンポジター




 

部分最適化から全体最適化へ ― Webの情報品質管理手法

竹洞 陽一郎氏(株式会社Spelldata 代表取締役社長、html5j パフォーマンス部部長)



  • Spelldata のHPは、Navigation Timingで作成しているのでおそらく日本で最速
  • パフォーマンスと情報品質の関係
  • 情報の三要素
    • 整合性(情報の「主題」がぶれていない)
    • 完全性(必要な情報が全て含まれている)
    • アバウトネス(情報の「主題」が読み手の意図と合致している)