Your SlideShare is downloading. ×

WordCamp Denmark Keynote

6,190

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,190
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
    Frederick Townes, CTO Mashable.com WordCamp Denmark, 15.05.2010
  • 2. Hi!
    • 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
    Introduction
  • 7. Why work backwards?
    • Address issues that make it difficult for users to interact with content
    • 8. Solve the largest issues first
    • 9. Rinse and repeat
    Introduction
  • 10. Discovery: Who has...
    • 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?
    Introduction
  • 16. What we thought we made…
    Introduction
  • 17. What was actually delivered…
    Introduction
  • 18. Overview
    • Why performance matters
    • 19. Which factors can be controlled
    • 20. Measure results
    • 21. A look at common cases
    • 22. Discuss your questions and challenges
    Introduction
  • 23. User experience is key
    • You have <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
    Why performance matters
  • 27. Stacks are your friends
    • Optimization / caching is possible at every level
    Front End:CSSJavaScriptFlash / SVG etcHTMLBrowser
    Which factors can be controlled
  • 28. Stacks are your friends
    • Optimization / caching is possible at every level
    Back End:ApachePHPMySQLLinux
    Which factors can be controlled
  • 29. Less is more
    • 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
    Which factors can be controlled
  • 37. Cache often
    • Send objects to the user once
    - Expires- Cache-Control- Entity Tags
    Which factors can be controlled
  • 38. The Database
    • 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
    Which factors can be controlled
  • 41. Runtime Cache
    • WP Options and settings are re-used for every request
    • 42. Object caching optimizes runtime performance
    • 43. Opcode caching further enhances PHP performance
    Which factors can be controlled
  • 44. Do less work
    Reduce response / execution time by:
    • 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)
    Which factors can be controlled
  • 48. Define key metrics
    • Total page load time
    • 49. Time to first byte
    • 50. Render start time
    • 51. Time on site / page views per visit
    Measure results
  • 52. Quantify
    Test + tweak:
    • 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/
    Measure results
  • 56. Quantify
    Track!
    • “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
    Measure results
  • 60. Location, location, location
    • Optimize pages for progressive render
    • 61. Use <link> not <style> in <head> and put it above any JavaScript
    • 62. Use the asynchronous tracking code for Google Analytics
    • 63. Place ad network code after <body>, use networks like BuySellAds.comor OpenX.com, not DoubleClickfor Publishers
    • 64. Put any scripts not necessary for the interface above the </body> tag
    • 65. Use a content delivery network
    A look at common cases
  • 66. Quick Tips
    • 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");?>
    A look at common cases
  • 67. Quick Tips
    • Use iframes when possible:
    Before:<script type="text/javascript">tweetmeme_url = 'http://yoururl.com';</script>
    <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
    After:<iframe scrolling="no" height="61" frameborder="0" width="50“
    src="http://api.tweetmeme.com/widget.js?url=http://yoururl.com/
    &amp;style=normal&amp;source=yoururl&amp;service=bit.ly“></iframe>
    A look at common cases
  • 68. Quick Tips
    • 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>…
    A look at common cases
  • 69. Quick Tips
    • Use asynchronous JavaScript wherever possible:After:...
    <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>
    ...
    A look at common cases
  • 70. Recommended Plugins
    Bonus
  • 78. Thank You.Questions? Site Review?
    ftownes@w3-edge.com
    frederick@mashable.com
    @w3edge
  • 79. Footnotes
    Further Reading:
    • 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)
    More Helpful Tools:
    • 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/

×