Download as PDF, PPTX
Uploaded bymasaaki komori
WordPress 高速化 Pro Tips: フロントエンドの最適化
WordCamp Tokyo 2012 ~ Pro Tips for Speeding Up WordPress: Optimization of Front-End ~
More Related Content
Similar to WordPress 高速化 Pro Tips: フロントエンドの最適化
WordPress 高速化 Pro Tips: フロントエンドの最適化
- 1. Optimization of thefront-end Pro Tips for Speeding Up WordPress WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012 こもりまさあき
- 2.
- 3.
- 4.
- 5.
- 6. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 何？WordPressが遅い？ホントに？ WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 7. Optimization of thefront-end: Pro Tips for Speeding Up WordPress WordPressを疑う前に。 まずは、仕組みをおさらい WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 8. Optimization of thefront-end: Pro Tips for Speeding Up WordPress アドレス解決、接続、リクエスト、レスポンス WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 9. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 意外と知らない人が多い、 Webページの表示までの流れ WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 10. Optimization of thefront-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 thefront-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 thefront-end: Pro Tips for Speeding Up WordPress それが必要な数だけ繰り返される WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 13. Optimization of thefront-end: Pro Tips for Speeding Up WordPress ここまでが仕組みのおさらい WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 14.
- 15. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 接続からページが表示されるまでを視覚化 WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 16. Optimization of thefront-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 thefront-end: Pro Tips for Speeding Up WordPress WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 18. Optimization of thefront-end: Pro Tips for Speeding Up WordPress みえる、みえるぞ… WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 19. Optimization of thefront-end: Pro Tips for Speeding Up WordPress では、ちょっと覗いてみましょう WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 20. Optimization of thefront-end: Pro Tips for Speeding Up WordPress まず、どこに原因があるかを突き止める WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 21. Optimization of thefront-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 thefront-end: Pro Tips for Speeding Up WordPress ページ表示が遅い原因の9割はフロントエンド WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 23. Optimization of thefront-end: Pro Tips for Speeding Up WordPress つまるところ、作り方と配信の仕方が悪い WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 24. Optimization of thefront-end: Pro Tips for Speeding Up WordPress WordPressあんまり関係ない WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 25. Optimization of thefront-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 thefront-end: Pro Tips for Speeding Up WordPress アウト。 WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 27. Optimization of thefront-end: Pro Tips for Speeding Up WordPress では、改善しましょう WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 28.
- 29. Optimization of thefront-end: Pro Tips for Speeding Up WordPress なにができるか、人によって異なります WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 30. Optimization of thefront-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 thefront-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 thefront-end: Pro Tips for Speeding Up WordPress ページの生成が遅いなら… •プラグインの多用をひかえる •テーマ、テンプレートの設計を疑ってみる •静的なHTMLとしてキャッシュしてみる WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 33. Optimization of thefront-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 thefront-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 thefront-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 thefront-end: Pro Tips for Speeding Up WordPress 外部サービスへの接続が含まれると、 ホストごとにDNSの名前解決が必要に WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 37. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 最近ではソーシャル系のボタンが人気 WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 38. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 結構いろんなデータを拾いにいく WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 39. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 外部サービスのJavaScriptを非同期にする •コードはできるだけ最新のものに置換 •Socialite.js •WPSocialite WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 40. Optimization of thefront-end: Pro Tips for Speeding Up WordPress Facebook © WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 41. Optimization of thefront-end: Pro Tips for Speeding Up WordPress そもそもの原因は、HTTPリクエストが多すぎ WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 42. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 減らしましょう WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 43. Optimization of thefront-end: Pro Tips for Speeding Up WordPress いまどき、スマフォなどで見ることも多いし WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 44. Optimization of thefront-end: Pro Tips for Speeding Up WordPress そういえば、画像… WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 45. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 減らすに減らせない画像… WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 46. Optimization of thefront-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 thefront-end: Pro Tips for Speeding Up WordPress えー、面倒くさい WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 48.
- 49. Optimization of thefront-end: Pro Tips for Speeding Up WordPress 確実に効果がでる良い方法がひとつ WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 50. Optimization of thefront-end: Pro Tips for Speeding Up WordPress CDNを使いましょう WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 51. Optimization of thefront-end: Pro Tips for Speeding Up WordPress CDN？ WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 52. Optimization of thefront-end: Pro Tips for Speeding Up WordPress ここから先は、現場の宮内さんを呼びましょう WordPress 高速化 Pro Tips: フロントエンドの最適化 2012.09.15. WordCamp Tokyo 2012: Komori, Masaaki
- 53. Optimization of thefront-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