Download as PDF, PPTX
HTML5 Experts.jp パフォーマンス・チューニング
- 1.
- 2. 自己紹介 ■ 仲裕介（なかゆうすけ） ■ Twitter: @Tukimikage ■ 職業：エンジニア（フロントエンド、インフラ、運用） ■ 仕事：HTML5 Experts.jp 運営
- 3. お断り＆今日話すこと ■ HHVMでパフォーマンス・チューニングしてみたという仮タイトルでしたが、 実はあまりHHVMの話はしません・・・すみません。 ■ HHVMを使うのは正直ハードルはあまり高くないです （だって、apt-getinstall hhvmしてservice hhvm start するだけだし） ■ 昨年 HTML5 Experts.jpで行ったWebパフォーマンス改善のお話をします
- 4. HTML5 Experts.jpとは？ ■ 2013年7月に白石俊平氏と共同で、NTTコミュニ ケーションズが立ち上げWeb技術情報メディア ■このメディアの特徴 – 日本最高峰のWebエキスパートが記事を執筆 – 限りなく非営利に近いこと – 限り無く中立に近いこと ■ 「すべての記事が永久保存版」を目指し、日本の Web技術者のために高品質な情報を発信している ■ エキスパート・コントリビュータ募集中
- 5. HTML5 Experts.jpはなぜこんなにパ フォーマンスが悪いのか？ ■ HTML5Experts.jp編集部の企画会議で、ある日、ある編集部員から・・・ 「うちのメディア、なんとなく遅くないっすか？レスポン スとか、こう、クリックしてからしばらく応答が返ってこ ないとか・・・」
- 6.
- 7.
- 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.
- 16.
- 17. HHVMの導入（１） ■ HTML5 Exerts.jpのサーバ環境 ホスティング：NTTCommunications 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.
- 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_passunix:/var/run/hhvm/hhvm.sock;
- 21.
- 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/