wordcamp denmark keynote
TRANSCRIPT
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
Hi!
Introduction
Why work backwards?
Introduction
Address issues that make it difficult for users to interact with content Solve the largest issues first Rinse and repeat
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?
Discovery: Who has...
Introduction
Why performance matters Which factors can be controlled Measure results A look at common cases Discuss your questions and challenges
Overview
Introduction
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
User experience is key
Why performance matters
Front End:
CSSJavaScriptFlash / SVG etcHTMLBrowser
Stacks are your friends
Which factors can be controlled
Optimization / caching is possible at every level
Stacks are your friends
Which factors can be controlled
Back End:
ApachePHPMySQLLinux
Optimization / caching is possible at every level
Less is more
Which factors can be controlled
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
Cache often
Which factors can be controlled
- Expires- Cache-Control- Entity Tags
Send objects to the user once
The Database
Which factors can be controlled
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
Runtime Cache
Which factors can be controlled
WP Options and settings are re-used for every request Object caching optimizes runtime performance Opcode caching further enhances PHP performance
Do less work
Which factors can be controlled
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)
Define key metrics
Measure results
Total page load time Time to first byte Render start time Time on site / page views per visit
Quantify
Measure results
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/
Quantify
Measure results
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
Location, location, location
A look at common cases
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.com
or OpenX.com, not DoubleClick for Publishers- Put any scripts not necessary for the interface above the </body> tag
Use a content delivery network
Quick Tips
A look at common cases
Upgrade to the latest jQuery:
// in header.php template <?php
wp_deregister_script('jquery');wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');wp_enqueue_script("jquery");
?>
Quick Tips
A look at common cases
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/
&style=normal&source=yoururl&service=bit.ly“></iframe>
Quick Tips
A look at common cases
Use asynchronous JavaScript wherever possible:
Before: …<script type="text/javascript“>
var gaJsHost = (("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{ var pageTracker = _gat._getTracker("UA-xxxxxx-x"); pageTracker._trackPageview(); } catch(err) {}</script></body>…
Quick Tips
A look at common cases
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() {var ga = 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>
...
Recommended Plugins
Bonus
IntenseDebate BuddyPress / bbPress PollDaddy NextGenGallery PubSubHubHub Robots Meta or Platinum SEO WP-PageNavi W3 Total Cache
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/
Footnotes