CDNによる

WordPressサイト

パフォーマンス改善

Ryo Utsunomiya(@ryo511)

WorBench Haneda

2018-07-29

自己紹介

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

アジェンダ

  • ページスピードの重要性
  • CDNによるコンテンツ配信の最適化

ページスピード

  • 速ければユーザが快適に使える…だけではない
  • ビジネス的なインパクトも大きい
  • メディアサイトの場合、ページスピードが速いほど、離脱率が低下する
  • Google等の検索エンジンもページスピードを考慮してランキングを決めている

遅いWebサイト

  1. 画像が大きすぎ・多過ぎ
  2. サーバからのレスポンスが遅すぎ
  3. JavaScriptやCSSが多過ぎ
  4. その他、色々

サイト高速化の方法

  • 色々あるが、メディアサイトでは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を上手に活用すると、低コストでパフォーマンスを改善できる

あわせて読みたい

告知

Made with Slides.com