Your SlideShare is downloading. ×
0
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
WordCamp Denmark Keynote
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordCamp Denmark Keynote

6,311

Published on

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

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

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

No Downloads
Views
Total Views
6,311
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
36
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×