2019/12/07【第6回】浜松IT合同勉強会2019 LT大会にて発表させていただきました

1. アセアンB2CWebサイト
パフォーマンス改善への取り組み
2019/12/7
栗原 由加⾥

2. ⾃⼰紹介
栗原 由加⾥
B2C/B2BWebサイト運⽤担当
– Webサイトコンテンツ更新
– CMS運⽤
– インフラ運⽤
猫 ⽝ 旅
グルメ ランニング 登⼭
…来年名古屋ウィメンズマラソン出場します︕
2

3. 東京モーターショー爆速サイト ご覧になりましたか︖
3
https://global.yamaha-motor.com/jp/showroom/event/tokyo-motorshow-2019-bs/
ちょっとソースを
⾒てみてください

4. Webパフォーマンスを評価してみると…
4
https://developers.google.com/speed/pagespeed/insights/?hl=JA

5. とあるインドネシアB2CWebサイトの課題
5
運⽤体制の強化
脱『現地ベンダーに丸投げ』運⽤
ページ表⽰速度のスピードアップ
ITセキュリティの強化
脆弱な構成の⾒直し セキュアな環境へ

6. インドネシア通信事情
6
https://www.nperf.com/en/map/ID/-/5119.Telkomsel/signal/
今後“攻めたい”商圏エリアほど3G/2G回線

7. Web表⽰が〇秒遅いと離脱率はどうなる︖
7
https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
1秒と⽐較した時
3秒は離脱率32%UP
︓
10秒は
離脱率123%UP

8. なぜパフォーマンス改善をしなければならないか
8
ビジネスへの影響
ユーザー体験（UX）の悪化
ランディングページにたどり着く前に
お客様が『離脱』してしまう
Webサイトが『重い』『使いづらい』『⾒られない』
ブランドのイメージ悪化

9. なぜパフォーマンス改善をしなければならないか
9
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
SEOの影響
Googleがページの読み込み速度を
検索ランキング要素に使⽤

10. パフォーマンス改善で最も重要なこと
“推測するな 計測せよ”
10
1. 計測ツールを⽤いて現状速度を計測
2. ボトルネック調査
3. ボトルネックに対する施策実施
4. 再度計測
・効果有無をチェック
・ダメな時は「切り戻す」
様々な要因でパフォーマンスは⽇々変化
継続的に計測を続けることが重要

11. パフォーマンス改善コーディング
11
4139 ⾏ 2091 ⾏ 5734 ⾏ 2763 ⾏
Webページ描画処理を“軽く”する改善
同時にファイルサイズを⼤幅に圧縮
トップページ 下層ページ
改善前 改善後 改善前 改善後

12. インフラ/CMS 構成⾒直し
12
改善前
CMS（コンテンツマネジメントシステム）
Webサイト アプリケーション
データベース すべて同⼀サーバ上で稼働
エンドユーザーからの⼤量アクセス含め
すべての機能を処理するのが単独サーバ1台のみ

13. インフラ/CMS 構成⾒直し
13
CMS（コンテンツマネジメントシステム）
Webサイト アプリケーション
データベース ４つのサーバに完全分離
フロントにWAF+CDNを適⽤
改善後

14. Webサイト運⽤体制の⾒直しと画像圧縮周知徹底
14
現地Web制作ベンダーに運⽤を“丸投げ”
Webサイト アプリケーション インフラ
すべてブラックボックス状態
改善前
改善後
関連メンバー⼀丸となってパフォーマンス改善に取り組む
Webサイト アプリケーション インフラ
弊社が責任もって運⽤管理

15. Webサイト運⽤体制の⾒直しと画像圧縮周知徹底
15
担当者が
画像をオリジナルサイズのままWebサイトに掲載
⼤量の “重い”ファイルが
Webパフォーマンスのボトルネック
改善前
改善後
Webパフォーマンス改善での
画像圧縮の重要性を担当者に周知徹底
運⽤への折り込み ボトルネック解消

16. 16
JavaScriptの読み込み順番の変更
Script 1
Script 1
Script 2
Script 2
Script 1
Script 2
Script 1
Script 2
Script 3 Script 3
Script 3 Script 3
Script execution
Script loaded
Rendering
DOMContentLoaded
finish
finish
(times)
(times)
改善前
改善後

17. 17
3.8秒
⽬標KPI
4秒以下を達成︕
6.7秒
2019年7月
2018年12月
17.4秒
2018年10月
改善後のWebパフォーマンス

18. 本⽇の発表 まとめ
Webパフォーマンスはとても⼤切な要素
“推測するな計測せよ”
18

19. パフォーマンス改善ご参考
19
https://qiita.com/usagi-f/items/10f35969f08dd01fa635
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Tips_for_authoring_fast-
loading_HTML_pages

20. ⽬指せ
阿部 寛のホームページ
パフォーマンス︕
20