Webサイトの
パフォーマンス
改善
宇都宮 諒(@ryo511)
第17回 WordBench羽田
2018-02-10
自己紹介
- 宇都宮 諒（うつのみや りょう）
- 株式会社 一休 宿泊事業本部 マーケティング部
- 職種は「フロントエンドエンジニア」
- 主なお仕事
-
WordPress歴
- ユーザとして3年くらい
- 開発者として半年くらい
- Twitter: @ryo511
- 個人ブログ( https://ryo511.info/ )
一休コンシェルジュ
- 上質なホテル・旅館を紹介するメディア
- powered by WordPress!
パフォーマンスとは
- ざっくりいうと、ページの表示されるまでの待ち時間のこと
- 最近はコンテンツがリッチ化しているので、単なる表示時間ではなく、「ページのコンテンツが利用可能になるまでの待ち時間」を指標にすることが多い
- たとえば、YouTubeは、「とにかく動画は先に表示する、他は後回し」
パフォーマンスの重要性(1)
- パフォーマンスが向上するとユーザの離脱率が低下する
- ↓はFT.com(Financial Times)の事例
パフォーマンスの重要性(2)
- パフォーマンスの低いサイトは検索順位においてペナルティを受ける
よくある誤解
- サーバの性能をアップすれば／サーバを増やせば、パフォーマンスは向上する？
- PHPやMySQLのバージョンを上げれば、パフォーマンスを向上する？
- プログラムをチューニングすれば、パフォーマンスは向上する？
=> 向上するとは限らない
ボトルネックの解消が重要
- パフォーマンスを低下させる要因は様々
- 最も遅い部分を改善しないと、全体としてのパフォーマンスは向上しない
=> でも、どうすればボトルネックが見つかるの？
推測するな、計測せよ
- 計測しないとボトルネックはわからない
- Webサイトのパフォーマンスを計測するツールは色々ある
- 代表的なツールは下記
-
PageSpeed Insights
- 診断のアドバイスが参考になる
-
WebPagetest
- 実ブラウザのアクセス結果が見える
- Linuxならtop、sar等
- New Relic (有料サービス)
-
PageSpeed Insights
一休コンシェルジュの場合
- サーバサイドはそんなに遅くない
- SQLのクエリ数は気になるけど、パフォーマンスに響くほどではない
- フロントエンドが遅い
- 画像が異常に大きい
- JS/CSSのレンダリングブロックとか、他にも色々
=> 画像の最適化が一番効きそう
一休コンシェルジュの改善事例
- WordPressの設定を見直し、解像度のバリエーションを最適化
- 既存画像のリサイズ
=> ↑だけで、体感できるレベルで速度が向上した
PC版だと、もう一段階画像の最適化が必要そう
まとめ
- Webサイトのパフォーマンスにはビジネス上のインパクトがある
- パフォーマンス改善には計測が必須