HTML5 EXPERTS.JPパフォーマンス・チューニング

なかゆうすけ＠HTML5 Experts.jp運営

自己紹介

■ 仲裕介（なかゆうすけ）

■ Twitter : @Tukimikage

■ 職業：エンジニア（フロントエンド、インフラ、運用）

■ 仕事：HTML5 Experts.jp運営

お断り＆今日話すこと

■ HHVMでパフォーマンス・チューニングしてみたという仮タイトルでしたが、実はあまりHHVMの話はしません・・・すみません。

■ HHVMを使うのは正直ハードルはあまり高くないです

（だって、apt-get install hhvmしてservice hhvm start するだけだし）

■ 昨年 HTML5 Experts.jpで行ったWebパフォーマンス改善のお話をします

HTML5 Experts.jpとは？

■ 2013年7月に白石俊平氏と共同で、NTTコミュニケーションズが立ち上げWeb技術情報メディア

■ このメディアの特徴

– 日本最高峰のWebエキスパートが記事を執筆– 限りなく非営利に近いこと

– 限り無く中立に近いこと

■ 「すべての記事が永久保存版」を目指し、日本のWeb技術者のために高品質な情報を発信している

■ エキスパート・コントリビュータ募集中

HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか？

■ HTML5 Experts.jp編集部の企画会議で、ある日、ある編集部員から・・・

「うちのメディア、なんとなく遅くないっすか？レスポンスとか、こう、クリックしてからしばらく応答が返ってこないとか・・・」

HTML5 Experts.jpはなぜこんなにパフォーマンスが悪いのか？

■ この一言からパフォーマンスの話題が盛り上がり、

「よし、うちのメディアをネタにWebパフォーマンス改善企画をやろう！自虐ネタはウケるよ！（笑）」

24時間365日計測してますか？

■ Webパフォーマンス界隈では有名な竹洞陽一郎さんにアドバイスを貰うことに

https://html5experts.jp/takehora/

24時間365日計測してますか？

■ 竹洞氏からのアドバイス– 場当たり的にやってもWebパフォーマンス改善は意味が無い– Webパフォーマンスに影響を及ぼす物は、コンテンツ、ホスティングサーバ、サイト閲覧者の環境など様々な物があり、それはら日々変化している。

まずは現状を見極めるために定期的に計測することが必要

約三ヶ月の測定• 計測対象ページは２つ

端末 利用ブラウザ、端末等 回線

PC1 Chrome 31.0.1650.63 LAN（ブロードバンド回線）

PC2 Firefo 14.0.1 LAN（ブロードバンド回線）

PC3 Internet Explorer 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回線

• 計測条件

問題点の分析（１）

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

問題点の分析（２）

■ コンテンツダウンロード時間の遅延

– 竹洞氏いわくダウンロード時間は50ms以内で終わらないと体感的に遅いと感じる– サーバのディスク性能などが起因している可能性がある

– 画像サイズを適正サイズに圧縮したり、キャッシュを効かせるなどの対処が必要

問題点の分析（３）

■ パフォーマンスを考慮していないWeb制作– JSやCSSの数が多すぎる– 並列ダウンローを無視したマークアップ

– マークアップ改善、JSやCSSの最適化、ソーシャルボタンの見直し、HTTP2やSpdyの利用の検討

改善目標の設定

• パフォーマンストレンドが２秒を切れるように• モバイル端末3G回線からのアクセス品質をブロードバンド回線に近づけるアクセスタイムのばらつきを無くし品質を一定に

• 詳しくは https://html5experts.jp/yusuke-naka/13671/

パフォーマンストレンド パフォーマンストレンド（スキャッタープロット）

改善施策

■ ソーシャルメディアのシェアボタンを自作＆キャッシュを活用

■ 表示サイズより大きな画像の適正化

■ マークアップの改善

■ WordPressでキャッシュプラグインを導入

■ Nginxの設定を変更しSafariに対してキャッシュが効くように改善

■ PHP実行環境をphp5-fpmからhhvmに変更

■ SSL対応しSPDYを導入（並列ダウンロードは早くなるが、SSLによるオーバーヘッドが増すため、パフォーマンスには悪影響が出ていた）

※具体的な改善内容はこちらを御覧ください

https://html5experts.jp/yoshikawa_t/14608/

改善結果（１）

■ パフォーマンストレンドの改善

PC／ブロードバンド回線 モバイル端末／3G回線

２秒以内達成！

画像ファイル数が多いというサイトの特性が効いている。目標には届いていないが仕方ないかもしれない

改善結果（２）

■ パフォーマンストレンド（スキャッタープロット）の改善

PC／ブロードバンド回線 モバイル端末／3G回線

約95%の計測値が2.5秒以下で収まっている。良い結果！

画像ファイル数が多いというサイトの特性が効いている。目標には届いていないが仕方ないかもしれない

HHVMの導入（１）

■ HTML5 Exerts.jpのサーバ環境

ホスティング：NTT Communications Cloudn FLAT Typeデータベース：NTT Communications Cloudn RDB（MySQL）

WebServerの構成OS：Ubuntu 14.04.4 LTSWebServer：Nginx Ver1.8.0PHPEnv：HipHop VM 3.11.0(rel)

http://www.ntt.com/cloudn/

HHVMの導入（２）

■ 導入手順

HTML5 Experts.jpではJenkins+Ansible+ServerSpecによる自動化を実施

HHVMの導入（３）- name: hhvmをインストールapt: name=hhvm state=installednotify:- 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（サンプル）

HHVMの導入（４）

■ コンフィグレーション抜粋（Nginx）

※必ずsocket通信にすること

fastcgi_pass unix:/var/run/hhvm/hhvm.sock;

HHVMの導入（５）

■ コンフィグレーション例（php.ini/server.ini）

丁寧なドキュメントありhttps://docs.hhvm.com/hhvm/configuration/INI-settings

HHVMの導入（６）

■ hhvmのプロセス監視– 去年のGW頃頃はよく落ちてました・・– Monitをいれてプロセスが落ちたら強制的に叩き起こす対応をしてました・・・

check process hhvm with pidfile /var/run/hhvm/pidgroup

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

※今は多分必要ありません

HHVMの運用

■ 特にやることはphp5-fpmと変わりません

– アップデートは apt-getで他のパッケージと一緒に入ってくれます– 安定しています

– 更新サイクルはかなり早いのでその辺りシビアなシステムは注意

HHVM vs php5-fpm

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

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

【余談】KUSANAGI for Cloudn

■ ここまで話をしてあれですが、HHVM+WordPressで高速化したい方は是非ご利用下さい！

http://kusanagi.tokyo/cloud/kusanagi-for-Cloudn/