SlideShare a Scribd company logo
WordPressのパフォーマンス改善
∼ホスティングの状況に応じた改善手法のアレとかコレとか∼
WordPress Performance Optimization for Beginners
Komori, Masaaki: WordPress Performance Optimization for Beginners
まず、WordPressの配信の仕組みをおさらいしておきましょう
Webサーバで何が起こっているのか
• MovableTypeなどと異なり、
静的なHTMLを配信する仕組みではない
• ブラウザからのリクエストによって、
それに応じたテンプレート中のPHPが実行される
• データを格納しているデータベースへ接続
• HTMLを生成して、Webブラウザに送り返す
Komori, Masaaki: WordPress Performance Optimization for Beginners
Apache + PHP、MySQLの関係図はこんな感じになっている
その流れを図解してみると…
Komori, Masaaki: WordPress Performance Optimization for Beginners
ホスティングの環境やサイト構築の仕方次第でパフォーマンスが悪くなることも
状況次第で重くなってしまうことも・・・
• チューニングされていないホスティングだったり
• ベストエフォート型で回線自体が貧弱だったり
• マシンパワーがそもそも非力だったり
• プラグインを大量に使ってサイト構築していたり
• テンプレート設計で余計なことをしていたり
とまぁ、いろんなことが絡んで重く感じてしまう
Komori, Masaaki: WordPress Performance Optimization for Beginners
オンラインサービスやWebブラウザのプラグインで自サイトの現状を把握する
とりあえず、現状を把握してみよう
• Pagetest(www.webpagetest.org)
• Load Impact(loadimpact.com/pageanalyzer)
※同時接続数50クライアントまで負荷チェックも可能
• Firebug + YSlow!、Firebug + Page Speed
• Safari、Google ChromeのWebインスペクタ
Komori, Masaaki: WordPress Performance Optimization for Beginners
バックエンドのPHPとDBの処理なのか、フロントエンドの構造なのか
ボトルネックがどこなのかを判断する
Komori, Masaaki: WordPress Performance Optimization for Beginners
まずは、自分のホスティング環境がどういう状態か確認
パフォーマンスの改善に入る前に
1. システム管理まで可能なVPSやDelegated Server?
2. Webサーバのモジュールが比較的自由に利用できる?
3. 上の2つのいずれも不可能…
Komori, Masaaki: WordPress Performance Optimization for Beginners
環境にあわせて、できる対応策を適用していく
パフォーマンスを改善するには?
1. システム管理まで可能なVPSやDelegated Serverなら
→バックエンドのPHPやSQLの処理速度を改善してみる
2. Webサーバのモジュールが比較的自由に利用できるなら
→プラグインで静的なHTMLをキャッシュして配信する(可能ならgzip化)
3. 上の2つのいずれにも当てはまらないなら
→head要素内のコンテンツを整理(JS/CSSの結合など)
→プラグインによる画像の最適化
→その他のパフォーマンス最適化の手法の適用
Komori, Masaaki: WordPress Performance Optimization for Beginners
APCやeAccelerator、xCache、memcacheなどを導入してみる
1. PHPそのものの処理速度をあげる
• 実行されたPHPスクリプトのデータをキャッシュさせる
• 代表的なPHPアクセラレータ
→APC(Alternative PHP Cache)
→eAccelerator
→xCache
→memcache などなど
※WordPressのキャッシュプラグインとも併用可能
• インストール後、環境にあわせて設定変更
Komori, Masaaki: WordPress Performance Optimization for Beginners
mod_rewrite、mod_expire、mod_gzip(mod_deflate)が使える環境なら
2. Webサーバのモジュールが利用できる
• 「WP Super Cache」や「W3 Total Cache」の導入
→mod_rewrite、mod_expire、mod_gzip(mod_deflate)
※キャッシュしたからといってすべての環境で効果があるわけではない。
 HTMLの設計次第ではほとんど効果のないこともある
• 可能ならテキストデータをgzipで符号化しておく
→mod_gzip(mod_deflate)
※上記プラグインでも設定可能。転送データ量が約1/3∼1/2に減少
• ついでに画像やJavaScript、CSSなどに有効期限を設定
→mod_expire
Komori, Masaaki: WordPress Performance Optimization for Beginners
書き出されるHTMLのhead要素内を最適化したり、テンプレートを改善する
3. ここまでの方法が採れない場合
• 使っているプラグインの数を減らしてみる
→場合によっては、それがパフォーマンス低下の原因かも
• HTMLのhead要素内を見直してみよう
→JavaScriptやCSSの結合、Minify化、挿入場所の変更
→head cleanerプラグインなどの導入の検討
• サイト内で使用する画像を最適化してみよう
→WP Smush.itプラグインの導入
• その他の表示パフォーマンスの最適化手法の導入
→画像の配信ホストを分割するなど
Komori, Masaaki: WordPress Performance Optimization for Beginners
なんでもかんでもプラグインで解決できるわけではなく…
というわけで、まとめると
• まずは、現状をしっかり把握
• 何でもできるなら、PHPの処理速度を改善してみる
• モジュールが使えるなら、静的なHTMLを配信する
• いずれも無理なら、HTMLの構造変更や画像最適化
できることから始めましょう
Komori, Masaaki: WordPress Performance Optimization for Beginners
作り手の都合だけでなく、見る人に優しいサイト作りを
ありがとうございました

More Related Content

PDF
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
PDF
CDNで高速化!Drupal認証ユーザーむけページキャッシュ設定
PDF
DrupalとWEB高速化 CDNについて
PDF
Word camptokyo2012セッション資料
PPTX
Web 01
PDF
WP Booster WordBench Tokyo 20120701
PDF
Windows azure webサイトの紹介
PDF
本番環境で使いたいPHP
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
CDNで高速化!Drupal認証ユーザーむけページキャッシュ設定
DrupalとWEB高速化 CDNについて
Word camptokyo2012セッション資料
Web 01
WP Booster WordBench Tokyo 20120701
Windows azure webサイトの紹介
本番環境で使いたいPHP

What's hot (18)

PDF
Web Site Optimization for Beginners
PDF
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
PPTX
20121112 jaws-ug sapporo8
PDF
マルチサイトの構築
PPT
Csawわーくしょっぷ(仮)
PDF
Web体験を向上させるcdnと表示速度の重要性
PDF
VCCW + Wordmove でデプロイが劇的に簡単になった話
PDF
サーバーのおしごと
PDF
PWA for beginner#2
PDF
WordCampOsaka2012セッション資料
PPT
Honjo Seminar 6.10
PDF
PHPで大規模ブラウザゲームを開発してわかったこと
PDF
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
PPTX
初心者向け負荷軽減のはなし
PDF
Post by email for pulse cms
PPTX
Google AMP (Accelerated Mobile Pages) を纏めてみた
PDF
子テーマを使ったサイト制作
PDF
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Web Site Optimization for Beginners
2012/5/19 Webのパフォーマンスを考える ~WordPressと付き合うために~ @ WB Osaka
20121112 jaws-ug sapporo8
マルチサイトの構築
Csawわーくしょっぷ(仮)
Web体験を向上させるcdnと表示速度の重要性
VCCW + Wordmove でデプロイが劇的に簡単になった話
サーバーのおしごと
PWA for beginner#2
WordCampOsaka2012セッション資料
Honjo Seminar 6.10
PHPで大規模ブラウザゲームを開発してわかったこと
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
初心者向け負荷軽減のはなし
Post by email for pulse cms
Google AMP (Accelerated Mobile Pages) を纏めてみた
子テーマを使ったサイト制作
ノンプログラマーのためのWordPressプラグイン開発超入門v1.0
Ad

Viewers also liked (9)

PDF
CSS Nite Vol.39 - komori -
PDF
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
PDF
レスポンシブ・ウェブデザイン基礎
PDF
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
PDF
UXのためのUIデザイン
PDF
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
PDF
デザインのためのデザイン
PDF
見やすいプレゼン資料の作り方 - リニューアル増量版
PDF
TEDx Manchester: AI & The Future of Work
CSS Nite Vol.39 - komori -
アジャイル開発の現在・過去・未来~今を知り、源流を訪ね、先を見据える~
レスポンシブ・ウェブデザイン基礎
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
UXのためのUIデザイン
[Slide]闇アジャイラーvs光アジャイラーforDevLOVE(EnergizedWorkLT祭)
デザインのためのデザイン
見やすいプレゼン資料の作り方 - リニューアル増量版
TEDx Manchester: AI & The Future of Work
Ad

Similar to WP Performance Optimization (7)

PDF
WordPress 高速化 Pro Tips: フロントエンドの最適化
PDF
WordCamp Yokohama 2010 Komori
PDF
WordPress を使いこなそう
PDF
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
PDF
awm-20200215
PDF
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
PDF
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordCamp Yokohama 2010 Komori
WordPress を使いこなそう
WordPressのオススメスライドとか記事とか集めました。(2012.10.13 WordBench神戸)
awm-20200215
接客するホームページを育てるための WordPress(ワードプレス)基礎講座(2014/2/8)
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える

More from masaaki komori (20)

PDF
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
PDF
InstaVR使ってみた
PDF
Framerで始めるプロトタイプコーディング
PDF
Prototyping with Sketch
PDF
プロトタイピングツール戦国時代
PDF
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
PDF
レスポンシブEメールを作ろう
PDF
Bootstrapはこう使う
PDF
デバイス多様化の時代のWeb制作
PDF
2015年のWebサイトの作り方 at 67ws
PDF
Webデザインと開発の未来
PDF
Framerで動くモックアップを簡単作成
PDF
Sketch 3 Basics at kkmsz
PDF
Re:Cre Vol.14 | Web design process for the future
PDF
Web Design Process for The Future
PDF
Web Design Process for The Future
PDF
groundwork-pasona-tech
PDF
インブラウザ勉強会 Vol.1
PDF
設計から実装まで、今すぐ始める高速化
PDF
Sublime Text 2 Basics
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
InstaVR使ってみた
Framerで始めるプロトタイプコーディング
Prototyping with Sketch
プロトタイピングツール戦国時代
Bootstrapではじめる、
Webサイト設計のモダンアプローチ
レスポンシブEメールを作ろう
Bootstrapはこう使う
デバイス多様化の時代のWeb制作
2015年のWebサイトの作り方 at 67ws
Webデザインと開発の未来
Framerで動くモックアップを簡単作成
Sketch 3 Basics at kkmsz
Re:Cre Vol.14 | Web design process for the future
Web Design Process for The Future
Web Design Process for The Future
groundwork-pasona-tech
インブラウザ勉強会 Vol.1
設計から実装まで、今すぐ始める高速化
Sublime Text 2 Basics

WP Performance Optimization

  • 2. Komori, Masaaki: WordPress Performance Optimization for Beginners まず、WordPressの配信の仕組みをおさらいしておきましょう Webサーバで何が起こっているのか • MovableTypeなどと異なり、 静的なHTMLを配信する仕組みではない • ブラウザからのリクエストによって、 それに応じたテンプレート中のPHPが実行される • データを格納しているデータベースへ接続 • HTMLを生成して、Webブラウザに送り返す
  • 3. Komori, Masaaki: WordPress Performance Optimization for Beginners Apache + PHP、MySQLの関係図はこんな感じになっている その流れを図解してみると…
  • 4. Komori, Masaaki: WordPress Performance Optimization for Beginners ホスティングの環境やサイト構築の仕方次第でパフォーマンスが悪くなることも 状況次第で重くなってしまうことも・・・ • チューニングされていないホスティングだったり • ベストエフォート型で回線自体が貧弱だったり • マシンパワーがそもそも非力だったり • プラグインを大量に使ってサイト構築していたり • テンプレート設計で余計なことをしていたり とまぁ、いろんなことが絡んで重く感じてしまう
  • 5. Komori, Masaaki: WordPress Performance Optimization for Beginners オンラインサービスやWebブラウザのプラグインで自サイトの現状を把握する とりあえず、現状を把握してみよう • Pagetest(www.webpagetest.org) • Load Impact(loadimpact.com/pageanalyzer) ※同時接続数50クライアントまで負荷チェックも可能 • Firebug + YSlow!、Firebug + Page Speed • Safari、Google ChromeのWebインスペクタ
  • 6. Komori, Masaaki: WordPress Performance Optimization for Beginners バックエンドのPHPとDBの処理なのか、フロントエンドの構造なのか ボトルネックがどこなのかを判断する
  • 7. Komori, Masaaki: WordPress Performance Optimization for Beginners まずは、自分のホスティング環境がどういう状態か確認 パフォーマンスの改善に入る前に 1. システム管理まで可能なVPSやDelegated Server? 2. Webサーバのモジュールが比較的自由に利用できる? 3. 上の2つのいずれも不可能…
  • 8. Komori, Masaaki: WordPress Performance Optimization for Beginners 環境にあわせて、できる対応策を適用していく パフォーマンスを改善するには? 1. システム管理まで可能なVPSやDelegated Serverなら →バックエンドのPHPやSQLの処理速度を改善してみる 2. Webサーバのモジュールが比較的自由に利用できるなら →プラグインで静的なHTMLをキャッシュして配信する(可能ならgzip化) 3. 上の2つのいずれにも当てはまらないなら →head要素内のコンテンツを整理(JS/CSSの結合など) →プラグインによる画像の最適化 →その他のパフォーマンス最適化の手法の適用
  • 9. Komori, Masaaki: WordPress Performance Optimization for Beginners APCやeAccelerator、xCache、memcacheなどを導入してみる 1. PHPそのものの処理速度をあげる • 実行されたPHPスクリプトのデータをキャッシュさせる • 代表的なPHPアクセラレータ →APC(Alternative PHP Cache) →eAccelerator →xCache →memcache などなど ※WordPressのキャッシュプラグインとも併用可能 • インストール後、環境にあわせて設定変更
  • 10. Komori, Masaaki: WordPress Performance Optimization for Beginners mod_rewrite、mod_expire、mod_gzip(mod_deflate)が使える環境なら 2. Webサーバのモジュールが利用できる • 「WP Super Cache」や「W3 Total Cache」の導入 →mod_rewrite、mod_expire、mod_gzip(mod_deflate) ※キャッシュしたからといってすべての環境で効果があるわけではない。  HTMLの設計次第ではほとんど効果のないこともある • 可能ならテキストデータをgzipで符号化しておく →mod_gzip(mod_deflate) ※上記プラグインでも設定可能。転送データ量が約1/3∼1/2に減少 • ついでに画像やJavaScript、CSSなどに有効期限を設定 →mod_expire
  • 11. Komori, Masaaki: WordPress Performance Optimization for Beginners 書き出されるHTMLのhead要素内を最適化したり、テンプレートを改善する 3. ここまでの方法が採れない場合 • 使っているプラグインの数を減らしてみる →場合によっては、それがパフォーマンス低下の原因かも • HTMLのhead要素内を見直してみよう →JavaScriptやCSSの結合、Minify化、挿入場所の変更 →head cleanerプラグインなどの導入の検討 • サイト内で使用する画像を最適化してみよう →WP Smush.itプラグインの導入 • その他の表示パフォーマンスの最適化手法の導入 →画像の配信ホストを分割するなど
  • 12. Komori, Masaaki: WordPress Performance Optimization for Beginners なんでもかんでもプラグインで解決できるわけではなく… というわけで、まとめると • まずは、現状をしっかり把握 • 何でもできるなら、PHPの処理速度を改善してみる • モジュールが使えるなら、静的なHTMLを配信する • いずれも無理なら、HTMLの構造変更や画像最適化 できることから始めましょう
  • 13. Komori, Masaaki: WordPress Performance Optimization for Beginners 作り手の都合だけでなく、見る人に優しいサイト作りを ありがとうございました