CDNによる
WordPressサイト
パフォーマンス改善
Ryo Utsunomiya(@ryo511)
WorBench Haneda
2018-07-29
自己紹介
- 宇都宮 諒（うつのみや りょう）
- 株式会社 一休 宿泊事業本部 マーケティング部
- 職種は「フロントエンドエンジニア」
- やってること
-
WordPress歴
- ユーザとして3年くらい
- 開発者として半年くらい
- Twitter: @ryo511
- 個人ブログ( https://ryo511.info/ )
アジェンダ
- ページスピードの重要性
- CDNによるコンテンツ配信の最適化
ページスピード
- 速ければユーザが快適に使える…だけではない
- ビジネス的なインパクトも大きい
- メディアサイトの場合、ページスピードが速いほど、離脱率が低下する
- Google等の検索エンジンもページスピードを考慮してランキングを決めている
遅いWebサイト
- 画像が大きすぎ・多過ぎ
- サーバからのレスポンスが遅すぎ
- JavaScriptやCSSが多過ぎ
- その他、色々
サイト高速化の方法
- 色々あるが、メディアサイトではCDNの活用によって大きなパフォーマンス改善が見込める
CDNとは
- Contents Delivery Network
- 画像、動画、HTML、JavaScript、CSS等の静的コンテンツを配信してくれるサービス
- Akamai, Fastly, CloudFlareのような専業CDNのほか、Amazon CloudFrontのようにクラウドサービスに付随するものや、imgixのように画像に特化したCDN等、様々なサービスがある
- 従量課金制のことが多い
WordPressの画像
- WordPressにアップロードした画像は、自動でリサイズされる
- サムネイル／中サイズ／大サイズ
- サイズは固定なので、画像のサイズがテーマに合っていないことも。。。
- テーマがちゃんとしていれば、使用される画像のサイズは適正に保たれる
- 自作テーマの場合は、大きな画像がアップロードされた場合に、適切な扱いができているか注意が必要
画像CDN
- 画像コンテンツを、代わりに配信してくれるサーバ
- …というだけではなく、様々な追加機能が利用できる
- 画像の自動圧縮、リサイズ、切り抜き、フォーマット変換等
- WordPressの場合、JetPackのImage CDNが簡単に導入可能
DEMO
WordPressの仕組み
ボトルネックはDB
- Webサーバ・PHP(WordPress)・データベースのうち、最も遅いのはデータベース
- データベースへのアクセスをいかに減らすかが、WordPressのサーバサイド最適化の基本
キャッシュの利用
- メディアサイトは、ユーザに関係なく同じコンテンツを配信するのが基本
- 一度HTMLを返したら、そのHTMLを保存しておけば良いのでは 🤔
- W3 Total Cache等、キャッシュによってWordPressの高速化を行うプラグインはこのような考え方に基づいている
- ただし、WordPressプラグインなので、Webサーバ + WordPressのオーバーヘッドは発生する
CDNの利用
- 一度HTMLを作り終わったら、WordPressにアクセスする必要はないのでは 🤔
- CDNを利用することで、WordPressを設置しているサーバへのアクセスを減らすことができる
- サーバのスペックアップを考える前に、CDNの活用を考えるべき
- キャッシュの破棄(perge/invalidate)をしないと、古いコンテンツが残り続ける点に注意が必要
今日話さなかったこと
- AMP
- ブラウザキャッシュ
- JavaScript/CSSの最適化（高速なテーマの選定）
- gzip圧縮
- ミドルウェア(Apache/nginx, PHP, MySQL)のバージョンアップやキャッシュ活用
- 等々、WordPressのサイトパフォーマンスを向上させる手段は他にも色々ある
まとめ
- パフォーマンス改善はビジネスの観点からも重要
- WordPressサイトのボトルネックは画像とDB
- 大規模メディアサイトでは、CDNを上手に活用すると、低コストでパフォーマンスを改善できる
あわせて読みたい
-
日経電子版 サイト高速化とPWA対応
- WordPressではないけど、メディアサイトの高速化の方法について
告知
CDNによるWebサイトパフォーマンス改善
By Ryo Utsunomiya
CDNによるWebサイトパフォーマンス改善
WordBench Haneda(2018-07-29)
