Webサイトの

パフォーマンス

改善

宇都宮 諒(@ryo511)

第17回 WordBench羽田

2018-02-10

自己紹介

  • 宇都宮 諒(うつのみや りょう)​
  • 株式会社 一休 宿泊事業本部 マーケティング部
  • 職種は「フロントエンドエンジニア」
  • 主なお仕事
  • ​WordPress歴
    • ​ユーザとして3年くらい
    • 開発者として半年くらい
  • ​Twitter: @ryo511
  • 個人ブログ( https://ryo511.info/ )

一休コンシェルジュ

  • 上質なホテル・旅館を紹介するメディア
  • powered by WordPress!

パフォーマンスとは

  • ざっくりいうと、ページの表示されるまでの待ち時間のこと
  • 最近はコンテンツがリッチ化しているので、単なる表示時間ではなく、「ページのコンテンツが利用可能になるまでの待ち時間」を指標にすることが多い
  • たとえば、YouTubeは、「とにかく動画は先に表示する、他は後回し」

パフォーマンスの重要性(1)

  • パフォーマンスが向上するとユーザの離脱率が低下する
  • ↓はFT.com(Financial Times)の事例

パフォーマンスの重要性(2)

  • パフォーマンスの低いサイトは検索順位においてペナルティを受ける

よくある誤解

  1. サーバの性能をアップすれば/サーバを増やせば、パフォーマンスは向上する?
  2. PHPやMySQLのバージョンを上げれば、パフォーマンスを向上する?
  3. プログラムをチューニングすれば、パフォーマンスは向上する?

=> 向上するとは限らない

ボトルネックの解消が重要

  • パフォーマンスを低下させる要因は様々
  • 最も遅い部分を改善しないと、全体としてのパフォーマンスは向上しない

=> でも、どうすればボトルネックが見つかるの?

推測するな、計測せよ

  • 計測しないとボトルネックはわからない
  • Webサイトのパフォーマンスを計測するツールは色々ある
  • 代表的なツールは下記

一休コンシェルジュの場合

  • サーバサイドはそんなに遅くない
    • SQLのクエリ数は気になるけど、パフォーマンスに響くほどではない
  • フロントエンドが遅い
    • 画像が異常に大きい
    • JS/CSSのレンダリングブロックとか、他にも色々

=> 画像の最適化が一番効きそう

一休コンシェルジュの改善事例

  1. WordPressの設定を見直し、解像度のバリエーションを最適化
  2. 既存画像のリサイズ

=> ↑だけで、体感できるレベルで速度が向上した

 

PC版だと、もう一段階画像の最適化が必要そう

まとめ

  1. Webサイトのパフォーマンスにはビジネス上のインパクトがある
  2. パフォーマンス改善には計測が必須