• Share
  • Email
  • Embed
  • Like
  • Private Content
WordCamp Denmark Keynote
 

WordCamp Denmark Keynote

on

  • 7,140 views

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.

Statistics

Views

Total Views
7,140
Views on SlideShare
6,763
Embed Views
377

Actions

Likes
6
Downloads
36
Comments
0

7 Embeds 377

http://wp-danmark.dk 173
http://wordpress.dk 155
http://www.slideshare.net 28
http://www.intriguing-networks.co 9
http://www.linkedin.com 6
https://www.linkedin.com 5
http://readwritewordpress.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

WordCamp Denmark Keynote WordCamp Denmark Keynote Presentation Transcript

  • Working Backwards
    Frederick Townes, CTO Mashable.com WordCamp Denmark, 15.05.2010
  • Hi!
    • 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
    Introduction
  • Why work backwards?
    • Address issues that make it difficult for users to interact with content
    • Solve the largest issues first
    • Rinse and repeat
    Introduction
  • Discovery: Who has...
    • 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?
    Introduction
  • What we thought we made…
    Introduction
  • What was actually delivered…
    Introduction
  • Overview
    • Why performance matters
    • Which factors can be controlled
    • Measure results
    • A look at common cases
    • Discuss your questions and challenges
    Introduction
  • User experience is key
    • 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
    Why performance matters
  • Stacks are your friends
    • Optimization / caching is possible at every level
    Front End:CSSJavaScriptFlash / SVG etcHTMLBrowser
    Which factors can be controlled
  • Stacks are your friends
    • Optimization / caching is possible at every level
    Back End:ApachePHPMySQLLinux
    Which factors can be controlled
  • Less is more
    • Use gzip compression on text-based objects
    • Create sprites using http://spriteme.org/
    • Use http://punypng.com/ to reduce image size
    • Minify: combine CSS / JS files respectively when possible
    • Use AJAX if possible
    • Avoid cookies
    • Lazy load images
    • Upgrade jQuery to improve JavaScript performance
    Which factors can be controlled
  • Cache often
    • Send objects to the user once
    - Expires- Cache-Control- Entity Tags
    Which factors can be controlled
  • The Database
    • Use the right storage engine (InnoDB vs MyISAM)
    • Configure MySQL properly: - Use slow query log to resolve bottlenecks - Use http://mysqltuner.pl/ to key_buffer, query_cache, etc
    • Cache queries, if possible
    Which factors can be controlled
  • Runtime Cache
    • WP Options and settings are re-used for every request
    • Object caching optimizes runtime performance
    • Opcode caching further enhances PHP performance
    Which factors can be controlled
  • Do less work
    Reduce response / execution time by:
    • Use page caching (including feeds)
    • Use fragment caching - Side bar widgets - Complex elements
    • Don’t allow WP to handle 404 errors for static objects
    • Reduce latency for static objects (use a content delivery network)
    Which factors can be controlled
  • Define key metrics
    • Total page load time
    • Time to first byte
    • Render start time
    • Time on site / page views per visit
    Measure results
  • Quantify
    Test + tweak:
    • http://tools.pingdom.com/
    • http://www.webpagetest.org/test
    • Use Firebug (http://getfirebug.com/) Net tab + YSlow (http://developer.yahoo.com/yslow/)
    • http://code.google.com/speed/page-speed/
    Measure results
  • Quantify
    Track!
    • “Compare to past” using Google Analytics
    • Use Chartbeat or Woopra to monitor real-time user reading / writing etc
    • Ask your users for feedback
    • Follow the money, e.g. AdSense revenue increase
    Measure results
  • Location, location, location
    • Optimize pages for progressive render
    • Use <link> not <style> in <head> and put it above any JavaScript
    • Use the asynchronous tracking code for Google Analytics
    • Place ad network code after <body>, use networks like BuySellAds.comor OpenX.com, not DoubleClickfor Publishers
    • Put any scripts not necessary for the interface above the </body> tag
    • Use a content delivery network
    A look at common cases
  • 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
  • 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
  • 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
  • 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
  • Recommended Plugins
    • IntenseDebate
    • BuddyPress / bbPress
    • PollDaddy
    • NextGenGallery
    • PubSubHubHub
    • Robots Meta or Platinum SEO
    • WP-PageNavi
    • W3 Total Cache
    Bonus
  • Thank You.Questions? Site Review?
    ftownes@w3-edge.com
    frederick@mashable.com
    @w3edge
  • Footnotes
    Further Reading:
    • http://developer.yahoo.com/performance/rules.html
    • http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
    • http://www.slideshare.net/stoyan/yslow-20-presentation (slide 4)
    More Helpful Tools:
    • http://stevesouders.com/cuzillion/
    • http://stevesouders.com/hammerhead/
    • http://www.procata.com/cachetest/
    • http://code.google.com/webtoolkit/speedtracer/
    • http://code.google.com/closure/compiler/