WordCamp Denmark Keynote

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

Stacks are your friends
Optimization / caching is possible at every level
Back End:ApachePHPMySQLLinux

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

Cache often
Send objects to the user once
- Expires- Cache-Control- Entity Tags

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

Runtime Cache
WP Options and settings are re-used for every request
Object caching optimizes runtime performance
Opcode caching further enhances PHP performance

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)

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

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");?>

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/
&style=normal&source=yoururl&service=bit.ly“></iframe>

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>…

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>
...

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/

http://wordpress.dk	155
http://wp-danmark.dk	118
http://www.slideshare.net	28
http://readwritewordpress.com	1

WordCamp Denmark Keynote

by Frederick Townes on May 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 302

Statistics

WordCamp Denmark Keynote — Presentation Transcript