Working Backwards<br /> Frederick Townes, CTO Mashable.com         WordCamp Denmark, 15.05.2010<br />
Hi!<br /><ul><li>Chief Technical Officer @ Mashable.com
 Founder @ W3-EDGE.com
 Founded @ W3-MARKUP.com
 Creator of W3 TOTAL CACHE
 Co-host of the WordPress Community Podcast</li></ul>Introduction<br />
Why work backwards?<br /><ul><li> Address issues that make it difficult for users to interact with content
 Solve the largest issues first
 Rinse and repeat</li></ul>Introduction<br />
Discovery: Who has...<br /><ul><li> Not spent a lot of time with WP yet?
 Developed WP themes and / or plugins?
 Uses WP to power their entire site?
 Used W3 Total Cache?
 Read Mashable.com before?
 No interest in seeing any code today?</li></ul>Introduction<br />
What we thought we made…<br />Introduction<br />
What was actually delivered…<br />Introduction<br />
Overview<br /><ul><li> Why performance matters
 Which factors can be controlled
 Measure results
 A look at common cases
 Discuss your questions and challenges</li></ul>Introduction<br />
User experience is key<br /><ul><li> You have <6 seconds…
 Slow speeds cost you money, 500ms means a 20% traffic loss (Google)
 The more responsive the site, the lower the user’s learning curve
 The web is moving towards “real-time” interactivity</li></ul>Why performance matters<br />
Upcoming SlideShare
Loading in …5
×

WordCamp Denmark Keynote

6,689 views
6,600 views

Published on

Discussion of WordPress performance optimizations pitfalls, remedies and tips. Also some discussion of search engine optimization and social media optimization tips.

Published in: Technology

WordCamp Denmark Keynote

  1. 1. Working Backwards<br /> Frederick Townes, CTO Mashable.com WordCamp Denmark, 15.05.2010<br />
  2. 2. Hi!<br /><ul><li>Chief Technical Officer @ Mashable.com
  3. 3. Founder @ W3-EDGE.com
  4. 4. Founded @ W3-MARKUP.com
  5. 5. Creator of W3 TOTAL CACHE
  6. 6. Co-host of the WordPress Community Podcast</li></ul>Introduction<br />
  7. 7. Why work backwards?<br /><ul><li> Address issues that make it difficult for users to interact with content
  8. 8. Solve the largest issues first
  9. 9. Rinse and repeat</li></ul>Introduction<br />
  10. 10. Discovery: Who has...<br /><ul><li> Not spent a lot of time with WP yet?
  11. 11. Developed WP themes and / or plugins?
  12. 12. Uses WP to power their entire site?
  13. 13. Used W3 Total Cache?
  14. 14. Read Mashable.com before?
  15. 15. No interest in seeing any code today?</li></ul>Introduction<br />
  16. 16. What we thought we made…<br />Introduction<br />
  17. 17. What was actually delivered…<br />Introduction<br />
  18. 18. Overview<br /><ul><li> Why performance matters
  19. 19. Which factors can be controlled
  20. 20. Measure results
  21. 21. A look at common cases
  22. 22. Discuss your questions and challenges</li></ul>Introduction<br />
  23. 23. User experience is key<br /><ul><li> You have <6 seconds…
  24. 24. Slow speeds cost you money, 500ms means a 20% traffic loss (Google)
  25. 25. The more responsive the site, the lower the user’s learning curve
  26. 26. The web is moving towards “real-time” interactivity</li></ul>Why performance matters<br />
  27. 27. Stacks are your friends<br /><ul><li> Optimization / caching is possible at every level</li></ul>Front End:CSSJavaScriptFlash / SVG etcHTMLBrowser<br />Which factors can be controlled<br />
  28. 28. Stacks are your friends<br /><ul><li> Optimization / caching is possible at every level</li></ul>Back End:ApachePHPMySQLLinux<br />Which factors can be controlled<br />
  29. 29. Less is more<br /><ul><li> Use gzip compression on text-based objects
  30. 30. Create sprites using http://spriteme.org/
  31. 31. Use http://punypng.com/ to reduce image size
  32. 32. Minify: combine CSS / JS files respectively when possible
  33. 33. Use AJAX if possible
  34. 34. Avoid cookies
  35. 35. Lazy load images
  36. 36. Upgrade jQuery to improve JavaScript performance</li></ul>Which factors can be controlled<br />
  37. 37. Cache often<br /><ul><li> Send objects to the user once</li></ul>- Expires- Cache-Control- Entity Tags<br />Which factors can be controlled<br />
  38. 38. The Database<br /><ul><li> Use the right storage engine (InnoDB vs MyISAM)
  39. 39. Configure MySQL properly: - Use slow query log to resolve bottlenecks - Use http://mysqltuner.pl/ to key_buffer, query_cache, etc
  40. 40. Cache queries, if possible</li></ul>Which factors can be controlled<br />
  41. 41. Runtime Cache<br /><ul><li> WP Options and settings are re-used for every request
  42. 42. Object caching optimizes runtime performance
  43. 43. Opcode caching further enhances PHP performance</li></ul>Which factors can be controlled<br />
  44. 44. Do less work<br />Reduce response / execution time by:<br /><ul><li> Use page caching (including feeds)
  45. 45. Use fragment caching - Side bar widgets - Complex elements
  46. 46. Don’t allow WP to handle 404 errors for static objects
  47. 47. Reduce latency for static objects (use a content delivery network)</li></ul>Which factors can be controlled<br />
  48. 48. Define key metrics<br /><ul><li> Total page load time
  49. 49. Time to first byte
  50. 50. Render start time
  51. 51. Time on site / page views per visit</li></ul>Measure results<br />
  52. 52. Quantify<br />Test + tweak:<br /><ul><li> http://tools.pingdom.com/
  53. 53. http://www.webpagetest.org/test
  54. 54. Use Firebug (http://getfirebug.com/) Net tab + YSlow (http://developer.yahoo.com/yslow/)
  55. 55. http://code.google.com/speed/page-speed/</li></ul>Measure results<br />
  56. 56. Quantify<br />Track!<br /><ul><li> “Compare to past” using Google Analytics
  57. 57. Use Chartbeat or Woopra to monitor real-time user reading / writing etc
  58. 58. Ask your users for feedback
  59. 59. Follow the money, e.g. AdSense revenue increase</li></ul>Measure results<br />
  60. 60. Location, location, location<br /><ul><li> Optimize pages for progressive render
  61. 61. Use <link> not <style> in <head> and put it above any JavaScript
  62. 62. Use the asynchronous tracking code for Google Analytics
  63. 63. Place ad network code after <body>, use networks like BuySellAds.comor OpenX.com, not DoubleClickfor Publishers
  64. 64. Put any scripts not necessary for the interface above the </body> tag
  65. 65. Use a content delivery network</li></ul>A look at common cases<br />
  66. 66. Quick Tips<br /><ul><li> Upgrade to the latest jQuery:// in header.php template <?phpwp_deregister_script('jquery');wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');wp_enqueue_script("jquery");?></li></ul>A look at common cases<br />
  67. 67. Quick Tips<br /><ul><li> Use iframes when possible:</li></ul>Before:<script type="text/javascript">tweetmeme_url = 'http://yoururl.com';</script><br /><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script><br />After:<iframe scrolling="no" height="61" frameborder="0" width="50“<br /> src="http://api.tweetmeme.com/widget.js?url=http://yoururl.com/<br />&amp;style=normal&amp;source=yoururl&amp;service=bit.ly“></iframe><br />A look at common cases<br />
  68. 68. Quick Tips<br /><ul><li> Use asynchronous JavaScript wherever possible:Before: …<script type="text/javascript“>vargaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript“> try{ varpageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); } catch(err) {}</script></body>…</li></ul>A look at common cases<br />
  69. 69. Quick Tips<br /><ul><li> Use asynchronous JavaScript wherever possible:After:...</li></ul><body><script type="text/javascript“>var _gaq = _gaq || []; _gaq.push( ['_setAccount', 'UA-xxxxxx-x'], ['_setDomainName', 'yoururl.com'], ['_trackPageview'] ); (function() {varga = document.createElement('script'); ga.type = 'text/javascript‘;ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www‘) + '.google-analytics.com/ga.js‘; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);})();</script><br />...<br />A look at common cases<br />
  70. 70. Recommended Plugins<br /><ul><li> IntenseDebate
  71. 71. BuddyPress / bbPress
  72. 72. PollDaddy
  73. 73. NextGenGallery
  74. 74. PubSubHubHub
  75. 75. Robots Meta or Platinum SEO
  76. 76. WP-PageNavi
  77. 77. W3 Total Cache</li></ul>Bonus<br />
  78. 78. Thank You.Questions? Site Review?<br />ftownes@w3-edge.com<br />frederick@mashable.com<br />@w3edge<br />
  79. 79. Footnotes<br />Further Reading:<br /><ul><li>http://developer.yahoo.com/performance/rules.html
  80. 80. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  81. 81. http://www.slideshare.net/stoyan/yslow-20-presentation (slide 4)</li></ul>More Helpful Tools:<br /><ul><li>http://stevesouders.com/cuzillion/
  82. 82. http://stevesouders.com/hammerhead/
  83. 83. http://www.procata.com/cachetest/
  84. 84. http://code.google.com/webtoolkit/speedtracer/
  85. 85. http://code.google.com/closure/compiler/</li>

×