Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Optimization of the front-end  Pro Tips for Speeding Up WordPress     WordPress 高速化 Pro Tips: フロントエンドの最適化                 ...
簡単ですが、自己紹介からこもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を...
高速化といえば、あの青い本も書いてます
今日お話しすること•高速化をはじめる前に•ツールを使って問題点を探そう•どこを対処するべきか見極めよう•できることから高速化の施策をしましょう
仕組みを知らなきゃ始まらない高速化
Optimization of the front-end: Pro Tips for Speeding Up WordPress                    何?WordPressが遅い?ホントに?WordPress 高速化 Pro...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                     WordPressを疑う前に。     ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress    アドレス解決、接続、リクエスト、レスポンスWordPress 高速化 Pro Tips: フロントエンドの...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                 意外と知らない人が多い、            ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress    アドレス解決、接続、リクエスト、レスポンス              1.接続先のドメインをIPアドレスに...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                      繋がっ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                           それが必要な数だけ繰り返されるWordPress 高速化 P...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                 ここまでが仕組みのおさらいWordPress 高...
計測、そして原因を突き詰める
Optimization of the front-end: Pro Tips for Speeding Up WordPress           接続からページが表示されるまでを視覚化WordPress 高速化 Pro Tips: フロン...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                           ツールやサービスを使ってみよう               ...
Optimization of the front-end: Pro Tips for Speeding Up WordPressWordPress 高速化 Pro Tips: フロントエンドの最適化                      ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                  みえる、みえる...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                           では、ちょっと覗いてみましょうWordPress 高速化 P...
Optimization of the front-end: Pro Tips for Speeding Up WordPress               まず、どこに原因があるかを突き止めるWordPress 高速化 Pro Tips: ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress           いったい何が原因で遅くなっているのか?                           ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress      ページ表示が遅い原因の9割はフロントエンドWordPress 高速化 Pro Tips: フロントエン...
Optimization of the front-end: Pro Tips for Speeding Up WordPress           つまるところ、作り方と配信の仕方が悪いWordPress 高速化 Pro Tips: フロン...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                  WordPressあんまり関係ないWordPr...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                       心当たりはありませんか?      ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                         ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                              では、改善しましょうW...
どこから攻めるか、自分にできることを
Optimization of the front-end: Pro Tips for Speeding Up WordPress               なにができるか、人によって異なりますWordPress 高速化 Pro Tips: ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                       先ほどのこれ、思い出してください                  ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                       それぞれがこんな問題を引き起こす                  ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                       ページの生成が遅いなら…      ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                         静的なHTMLとしてキャッシュする               ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                            CSSやJavaScriptにも目を向ける        ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                        CSSやJavaScriptの矮小化、結合に           ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                 外部サービスへの接続が含まれると、                 ホストごとに...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                    最近ではソーシャル系のボタンが人気WordPress 高速化 Pro Ti...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                          結構いろんなデータを拾いにいくWordPress 高速化 Pr...
Optimization of the front-end: Pro Tips for Speeding Up WordPress           外部サービスのJavaScriptを非同期にする                      ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                         ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress    そもそもの原因は、HTTPリクエストが多すぎWordPress 高速化 Pro Tips: フロントエンド...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                         ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress      いまどき、スマフォなどで見ることも多いしWordPress 高速化 Pro Tips: フロントエンド...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                 そういえば、画像...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                      減らすに減らせない画像…WordPre...
Optimization of the front-end: Pro Tips for Speeding Up WordPressサイズ削減、ブラウザにキャッシュ、サーバ分散                          •Photosho...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                     えー、面...
もっと簡単に効果が出る方法はないのか?
Optimization of the front-end: Pro Tips for Speeding Up WordPress                      確実に効果がでる良い方法がひとつWordPress 高速化 Pro T...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                 CDNを使いまし...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                                         ...
Optimization of the front-end: Pro Tips for Speeding Up WordPress  ここから先は、現場の宮内さんを呼びましょうWordPress 高速化 Pro Tips: フロントエンドの最適...
Optimization of the front-end: Pro Tips for Speeding Up WordPress                                  続きは宮内さんのスライドで          ...
Upcoming SlideShare
Loading in …5
×

WordPress 高速化 Pro Tips: フロントエンドの最適化

10,456 views

Published on

WordCamp Tokyo 2012
~ Pro Tips for Speeding Up WordPress: Optimization of Front-End ~

Published in: Technology
  • Be the first to comment

WordPress 高速化 Pro Tips: フロントエンドの最適化

  1. 1. Optimization of the front-end Pro Tips for Speeding Up WordPress WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012 こもりまさあき
  2. 2. 簡単ですが、自己紹介からこもりまさあき1972年生まれのフリーランス。90年代前半から都内のDTP系デザイン会社にてアルバイトをはじめ、大学卒業後そのまま正社員に。入出力業務、デザイン業務、ネットワーク関連業務に並行して従事後、2001年会社を退職しフリーランスの道へ。業務内容や立ち位置が異なるので、職域的な肩書きはなし近著に『レスポンシブ・ウェブデザイン標準ガイド』『WebデザイナーのためのHTML5移行ガイド』、などTwitter: @cipher / @proteanbmInstagram: @cipher
  3. 3. 高速化といえば、あの青い本も書いてます
  4. 4. 今日お話しすること•高速化をはじめる前に•ツールを使って問題点を探そう•どこを対処するべきか見極めよう•できることから高速化の施策をしましょう
  5. 5. 仕組みを知らなきゃ始まらない高速化
  6. 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. 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. 8. Optimization of the front-end: Pro Tips for Speeding Up WordPress アドレス解決、接続、リクエスト、レスポンスWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  9. 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. 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. 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. 12. Optimization of the front-end: Pro Tips for Speeding Up WordPress それが必要な数だけ繰り返されるWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  13. 13. Optimization of the front-end: Pro Tips for Speeding Up WordPress ここまでが仕組みのおさらいWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  14. 14. 計測、そして原因を突き詰める
  15. 15. Optimization of the front-end: Pro Tips for Speeding Up WordPress 接続からページが表示されるまでを視覚化WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  16. 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. 17. Optimization of the front-end: Pro Tips for Speeding Up WordPressWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  18. 18. Optimization of the front-end: Pro Tips for Speeding Up WordPress みえる、みえるぞ…WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  19. 19. Optimization of the front-end: Pro Tips for Speeding Up WordPress では、ちょっと覗いてみましょうWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  20. 20. Optimization of the front-end: Pro Tips for Speeding Up WordPress まず、どこに原因があるかを突き止めるWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  21. 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. 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. 23. Optimization of the front-end: Pro Tips for Speeding Up WordPress つまるところ、作り方と配信の仕方が悪いWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  24. 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. 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. 26. Optimization of the front-end: Pro Tips for Speeding Up WordPress アウト。WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  27. 27. Optimization of the front-end: Pro Tips for Speeding Up WordPress では、改善しましょうWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  28. 28. どこから攻めるか、自分にできることを
  29. 29. Optimization of the front-end: Pro Tips for Speeding Up WordPress なにができるか、人によって異なりますWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  30. 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. 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. 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. 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 FixWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  34. 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. 35. Optimization of the front-end: Pro Tips for Speeding Up WordPress CSSやJavaScriptの矮小化、結合に •Head Cleaner •JS & CSS Script Optimizer •W3 Total CacheWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  36. 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. 37. Optimization of the front-end: Pro Tips for Speeding Up WordPress 最近ではソーシャル系のボタンが人気WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  38. 38. Optimization of the front-end: Pro Tips for Speeding Up WordPress 結構いろんなデータを拾いにいくWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  39. 39. Optimization of the front-end: Pro Tips for Speeding Up WordPress 外部サービスのJavaScriptを非同期にする •コードはできるだけ最新のものに置換 •Socialite.js •WPSocialiteWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  40. 40. Optimization of the front-end: Pro Tips for Speeding Up WordPress Facebook ©WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  41. 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. 42. Optimization of the front-end: Pro Tips for Speeding Up WordPress 減らしましょうWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  43. 43. Optimization of the front-end: Pro Tips for Speeding Up WordPress いまどき、スマフォなどで見ることも多いしWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  44. 44. Optimization of the front-end: Pro Tips for Speeding Up WordPress そういえば、画像…WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  45. 45. Optimization of the front-end: Pro Tips for Speeding Up WordPress 減らすに減らせない画像…WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  46. 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. 47. Optimization of the front-end: Pro Tips for Speeding Up WordPress えー、面倒くさいWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  48. 48. もっと簡単に効果が出る方法はないのか?
  49. 49. Optimization of the front-end: Pro Tips for Speeding Up WordPress 確実に効果がでる良い方法がひとつWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  50. 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. 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. 52. Optimization of the front-end: Pro Tips for Speeding Up WordPress ここから先は、現場の宮内さんを呼びましょうWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
  53. 53. Optimization of the front-end: Pro Tips for Speeding Up WordPress 続きは宮内さんのスライドで http://www.slideshare.net/miyauchi/wordcamp-tokyo-2012-wordpress-pro-tipsWordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki

×