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

10,207 views

Published on

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

Published in: Technology
0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,207
On SlideShare
0
From Embeds
0
Number of Embeds
1,342
Actions
Shares
0
Downloads
62
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

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

×