6. Optimization of the front-end: Pro Tips for Speeding Up WordPress
何?WordPressが遅い?ホントに?
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
7. Optimization of the front-end: Pro Tips for Speeding Up WordPress
WordPressを疑う前に。
まずは、仕組みをおさらい
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
8. Optimization of the front-end: Pro Tips for Speeding Up WordPress
アドレス解決、接続、リクエスト、レスポンス
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
9. Optimization of the front-end: Pro Tips for Speeding Up WordPress
意外と知らない人が多い、
Webページの表示までの流れ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
10. Optimization of the front-end: Pro Tips for Speeding Up WordPress
アドレス解決、接続、リクエスト、レスポンス
1.接続先のドメインをIPアドレスに変換
2.そしてサーバに接続
3.サーバに欲しいファイルをリクエスト
4.サーバはそれにあわせてレスポンス
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
11. Optimization of the front-end: Pro Tips for Speeding Up WordPress
繋がったあとは…
1.リクエストにあわせて、WordPressが処理を開始
2.HTMLが生成されて、クライアントのブラウザへ
3.HTML内に記述された内容をブラウザが読んで、
ページの形成に必要な要素を順番にリクエスト
4.リクエストされたファイルを順番に送り返す
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
12. Optimization of the front-end: Pro Tips for Speeding Up WordPress
それが必要な数だけ繰り返される
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
13. Optimization of the front-end: Pro Tips for Speeding Up WordPress
ここまでが仕組みのおさらい
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
15. Optimization of the front-end: Pro Tips for Speeding Up WordPress
接続からページが表示されるまでを視覚化
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
16. Optimization of the front-end: Pro Tips for Speeding Up WordPress
ツールやサービスを使ってみよう
1.ChromeやSafariのWebインスペクタ
2.FirefoxにFirebugをいれて
3.Webpage Test(http://webpagetest.org)
4.Pingdom Tools(http://tools.pingdom.com/fpt/)
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
17. Optimization of the front-end: Pro Tips for Speeding Up WordPress
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
18. Optimization of the front-end: Pro Tips for Speeding Up WordPress
みえる、みえるぞ…
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
19. Optimization of the front-end: Pro Tips for Speeding Up WordPress
では、ちょっと覗いてみましょう
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
20. Optimization of the front-end: Pro Tips for Speeding Up WordPress
まず、どこに原因があるかを突き止める
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
21. Optimization of the front-end: Pro Tips for Speeding Up WordPress
いったい何が原因で遅くなっているのか?
1.DNSによる名前解決?
2.最初のHTMLが出てくるまでが遅い?
3.ページの構成要素が
いつまでもダウンロードされてる?
4.外部のサービスで止まってるみたい?
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
22. Optimization of the front-end: Pro Tips for Speeding Up WordPress
ページ表示が遅い原因の9割はフロントエンド
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
23. Optimization of the front-end: Pro Tips for Speeding Up WordPress
つまるところ、作り方と配信の仕方が悪い
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
24. Optimization of the front-end: Pro Tips for Speeding Up WordPress
WordPressあんまり関係ない
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
25. Optimization of the front-end: Pro Tips for Speeding Up WordPress
心当たりはありませんか?
1.便利だからプラグインいっぱい使ってる
2.制作効率のためにCSSを分割してる
3.そういえば、JavaScriptもいっぱいだー
4.見た目の装飾のために画像も多いな…
5.ソーシャル系のボタンも貼付けてるわ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
26. Optimization of the front-end: Pro Tips for Speeding Up WordPress
アウト。
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
27. Optimization of the front-end: Pro Tips for Speeding Up WordPress
では、改善しましょう
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
29. Optimization of the front-end: Pro Tips for Speeding Up WordPress
なにができるか、人によって異なります
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
30. Optimization of the front-end: Pro Tips for Speeding Up WordPress
先ほどのこれ、思い出してください
1.便利だからプラグインいっぱい使ってる
2.制作効率のためにCSSを分割してる
3.そういえば、JavaScriptもいっぱいだー
4.見た目の装飾のために画像も多いな…
5.ソーシャル系のボタンも貼付けてるわ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
31. Optimization of the front-end: Pro Tips for Speeding Up WordPress
それぞれがこんな問題を引き起こす
1.最初のHTMLの生成が遅くなってしまう
2.ページのレイアウトがなかなかできない
3.リクエストが増えると次に進めない
4.画像が落ちてこなくてページが完成しない
5.途中で一瞬止まったような感じになる
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
32. Optimization of the front-end: Pro Tips for Speeding Up WordPress
ページの生成が遅いなら…
•プラグインの多用をひかえる
•テーマ、テンプレートの設計を疑ってみる
•静的なHTMLとしてキャッシュしてみる
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
33. Optimization of the front-end: Pro Tips for Speeding Up WordPress
静的なHTMLとしてキャッシュする
•WP Super Cache
•Hyper Cache Extend
•W3 Total Cache
•DB Cache Reloaded Fix
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
34. Optimization of the front-end: Pro Tips for Speeding Up WordPress
CSSやJavaScriptにも目を向ける
•CSSやJavaScriptは、できるだけ数を少なく
•データサイズを減らすなら、
ファイルから余分な改行やコメントを削除
•ロードする順番は、
CSSが先、JavaScriptが後の方がベター
•変更がないならブラウザにキャッシュ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
35. Optimization of the front-end: Pro Tips for Speeding Up WordPress
CSSやJavaScriptの矮小化、結合に
•Head Cleaner
•JS & CSS Script Optimizer
•W3 Total Cache
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
36. Optimization of the front-end: Pro Tips for Speeding Up WordPress
外部サービスへの接続が含まれると、
ホストごとにDNSの名前解決が必要に
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
37. Optimization of the front-end: Pro Tips for Speeding Up WordPress
最近ではソーシャル系のボタンが人気
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
38. Optimization of the front-end: Pro Tips for Speeding Up WordPress
結構いろんなデータを拾いにいく
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
39. Optimization of the front-end: Pro Tips for Speeding Up WordPress
外部サービスのJavaScriptを非同期にする
•コードはできるだけ最新のものに置換
•Socialite.js
•WPSocialite
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
41. Optimization of the front-end: Pro Tips for Speeding Up WordPress
そもそもの原因は、HTTPリクエストが多すぎ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
42. Optimization of the front-end: Pro Tips for Speeding Up WordPress
減らしましょう
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
43. Optimization of the front-end: Pro Tips for Speeding Up WordPress
いまどき、スマフォなどで見ることも多いし
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
44. Optimization of the front-end: Pro Tips for Speeding Up WordPress
そういえば、画像…
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
45. Optimization of the front-end: Pro Tips for Speeding Up WordPress
減らすに減らせない画像…
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
46. Optimization of the front-end: Pro Tips for Speeding Up WordPress
サイズ削減、ブラウザにキャッシュ、サーバ分散
•PhotoshopやFireworksで書き出し、
それをさらにツールで最適化して軽量化
•面倒だったら、WP Smush.it で
•有効期限を設定してブラウザにキャッシュ
•配信するサーバを分割する
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
47. Optimization of the front-end: Pro Tips for Speeding Up WordPress
えー、面倒くさい
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
49. Optimization of the front-end: Pro Tips for Speeding Up WordPress
確実に効果がでる良い方法がひとつ
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
50. Optimization of the front-end: Pro Tips for Speeding Up WordPress
CDNを使いましょう
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
51. Optimization of the front-end: Pro Tips for Speeding Up WordPress
CDN?
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
52. Optimization of the front-end: Pro Tips for Speeding Up WordPress
ここから先は、現場の宮内さんを呼びましょう
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
53. Optimization of the front-end: Pro Tips for Speeding Up WordPress
続きは宮内さんのスライドで
http://www.slideshare.net/miyauchi/wordcamp-tokyo-2012-wordpress-pro-tips
WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki