0
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,327

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

Transcript of "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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×