HHVM/Hack言語勉強会#1 発表資料

1. HTML5 EXPERTS.JP
パフォーマンス・チューニング
なかゆうすけ＠HTML5 Experts.jp運営

2. 自己紹介
■ 仲裕介（なかゆうすけ）
■ Twitter : @Tukimikage
■ 職業：エンジニア（フロントエンド、インフラ、運用）
■ 仕事：HTML5 Experts.jp 運営

3. お断り＆今日話すこと
■ HHVMでパフォーマンス・チューニングしてみたという仮タイトルでしたが、
実はあまりHHVMの話はしません・・・すみません。
■ HHVMを使うのは正直ハードルはあまり高くないです
（だって、apt-get install hhvmしてservice hhvm start するだけだし）
■ 昨年 HTML5 Experts.jpで行ったWebパフォーマンス改善のお話をします

4. HTML5 Experts.jpとは？
■ 2013年7月に白石俊平氏と共同で、NTTコミュニ
ケーションズが立ち上げWeb技術情報メディア
■ このメディアの特徴
– 日本最高峰のWebエキスパートが記事を執筆
– 限りなく非営利に近いこと
– 限り無く中立に近いこと
■ 「すべての記事が永久保存版」を目指し、日本の
Web技術者のために高品質な情報を発信している
■ エキスパート・コントリビュータ募集中

5. HTML5 Experts.jpはなぜこんなにパ
フォーマンスが悪いのか？
■ HTML5 Experts.jp編集部の企画会議で、ある日、ある編集部員から・・・
「うちのメディア、なんとなく遅くないっすか？レスポン
スとか、こう、クリックしてからしばらく応答が返ってこ
ないとか・・・」

6. HTML5 Experts.jpはなぜこんなにパ
フォーマンスが悪いのか？
■ この一言からパフォーマンスの話題が盛り上がり、
「よし、うちのメディアをネタにWebパフォーマンス改善企
画をやろう！自虐ネタはウケるよ！（笑）」

7. 24時間365日計測してますか？
■ Webパフォーマンス界隈では有名な竹洞陽一郎さんにアドバイスを貰うことに
https://html5experts.jp/takehora/

8. 24時間365日計測してますか？
■ 竹洞氏からのアドバイス
– 場当たり的にやってもWebパフォーマンス改善は意味が無い
– Webパフォーマンスに影響を及ぼす物は、コンテンツ、ホスティングサーバ、
サイト閲覧者の環境など様々な物があり、それはら日々変化している。
まずは現状を見極めるために定期的に計測することが必要

9. 約三ヶ月の測定
• 計測対象ページは２つ
端末 利用ブラウザ、端末等 回線
PC1 Chrome 31.0.1650.63 LAN（ブロードバンド回線）
PC2 Firefo 14.0.1 LAN（ブロードバンド回線）
PC3 InternetExplorer 9 LAN（ブロードバンド回線）
Android1 Sony SO-04D（Android 4.0.4の標準ブラウザ） 3G回線
iPhone1 iPhone6（Mobile Safari） LAN（ブロードバンド回線）
iPhone2 iPhone6（Mobile Safari） 3G回線
iPhone3 iPhone6S（Mobile Safari） 3G回線
• 計測条件

10. 問題点の分析（１）
■ ファーストバイトダウンロードタイム（TTFB）の遅延問題
– TTFB：サーバへの初回接続から１バイト目を受信するまでの時間
– サーバサイドで動的Webページ生成に時間がかかっている可能性があるので
サーバのスペックアップなどの検討が必要

11. 問題点の分析（２）
■ コンテンツダウンロード時間の遅延
– 竹洞氏いわくダウンロード時間は50ms以内で終わらないと体感的に遅いと感じる
– サーバのディスク性能などが起因している可能性がある
– 画像サイズを適正サイズに圧縮したり、キャッシュを効かせるなどの対処が必要

12. 問題点の分析（３）
■ パフォーマンスを考慮していないWeb制作
– JSやCSSの数が多すぎる
– 並列ダウンローを無視したマークアップ
– マークアップ改善、JSやCSSの最適化、ソーシャルボタン
の見直し、HTTP2やSpdyの利用の検討

13. 改善目標の設定
• パフォーマンストレンドが２秒を切れるように
• モバイル端末3G回線からのアクセス品質をブロードバンド回線に近づけるアクセスタ
イムのばらつきを無くし品質を一定に
• 詳しくは https://html5experts.jp/yusuke-naka/13671/
パフォーマンストレンド パフォーマンストレンド（スキャッタープロット）

14. 改善施策
■ ソーシャルメディアのシェアボタンを自作＆キャッシュを活用
■ 表示サイズより大きな画像の適正化
■ マークアップの改善
■ WordPressでキャッシュプラグインを導入
■ Nginxの設定を変更しSafariに対してキャッシュが効くように改善
■ PHP実行環境をphp5-fpmからhhvmに変更
■ SSL対応しSPDYを導入（並列ダウンロードは早くなるが、SSLによるオーバーヘッ
ドが増すため、パフォーマンスには悪影響が出ていた）
※具体的な改善内容はこちらを御覧ください
https://html5experts.jp/yoshikawa_t/14608/

15. 改善結果（１）
■ パフォーマンストレンドの改善
PC／ブロードバンド回線 モバイル端末／3G回線
２秒以内達成！
画像ファイル数が
多いというサイト
の特性が効いてい
る。目標には届い
ていないが仕方な
いかもしれない

16. 改善結果（２）
■ パフォーマンストレンド（スキャッタープロット）の改善
PC／ブロードバンド回線 モバイル端末／3G回線
約95%の計測値が2.5
秒以下で収まってい
る。良い結果！
画像ファイル数が
多いというサイト
の特性が効いてい
る。目標には届い
ていないが仕方な
いかもしれない

17. HHVMの導入（１）
■ HTML5 Exerts.jpのサーバ環境
ホスティング：NTT Communications Cloudn FLAT Type
データベース：NTT Communications Cloudn RDB（MySQL）
WebServerの構成
OS：Ubuntu 14.04.4 LTS
WebServer：Nginx Ver1.8.0
PHPEnv：HipHop VM 3.11.0(rel)
http://www.ntt.com/cloudn/

18. HHVMの導入（２）
■ 導入手順
HTML5 Experts.jpではJenkins+Ansible+ServerSpecによる自動化を実施

19. HHVMの導入（３）
- name: hhvmをインストール
apt: name=hhvm state=installed
notify:
- start hhvm
- name: curlをインストール
apt: name=curl state=installed
- name: php.iniを配置
copy: src=php.ini dest=/etc/hhvm/php.ini owner=root group=root mode=0644
notify:
- restart hhvm
- name: server.iniを配置
copy: src=server.ini dest=/etc/hhvm/server.ini owner=root group=root mode=0644
notify:
- restart hhvm
- name: hhvmを自動起動
service: name=hhvm enabled=yes state=started
- name: hhvmのmonit用configファイルを配置
copy: src=hhvm.conf dest=/etc/monit/conf.d/hhvm.conf owner=root group=root mode=0644
- name: monitを再起動
command: service monit restart
- name: hhvmをmonitの監視対象に追加
command: monit start hhvm
Ansibleのtask（サンプル）

20. HHVMの導入（４）
■ コンフィグレーション抜粋（Nginx）
※ 必ずsocket通信にすること
fastcgi_pass unix:/var/run/hhvm/hhvm.sock;

21. HHVMの導入（５）
■ コンフィグレーション例（php.ini/server.ini）
丁寧なドキュメントあり
https://docs.hhvm.com/hhvm/configuration/INI-settings

22. HHVMの導入（６）
■ hhvmのプロセス監視
– 去年のGW頃頃はよく落ちてました・・
– Monitをいれてプロセスが落ちたら強制的に叩き起こす対応をしてました・・・
check process hhvm with pidfile /var/run/hhvm/pid
group
hhvm start program = "/usr/sbin/service
hhvm start" with timeout 60 seconds stop
program = "/usr/sbin/service hhvm stop"
If failed unixsocket /var/run/hhvm/hhvm.sock then restart
※ 今は多分必要ありません

23. HHVMの運用
■ 特にやることはphp5-fpmと変わりません
– アップデートは apt-getで他のパッケージと一緒に入ってくれます
– 安定しています
– 更新サイクルはかなり早いのでその辺りシビアなシステムは注意

24. HHVM vs php5-fpm
■ ネタ的にやろうとしてら、php5-fpmの環境がちゃんと動かなかったｗ

25. そんな野暮なことやっちゃダメ
ご清聴ありがとうございました

26. 【余談】KUSANAGI for Cloudn
■ ここまで話をしてあれですが、HHVM+WordPressで高速化したい方は是非ご利
用下さい！
http://kusanagi.tokyo/cloud/kusanagi-for-Cloudn/