26
Working Backwards Frederick Townes, CTO Mashable.com WordCamp Denmark, 15.05.2010

WordCamp Denmark Keynote

Embed Size (px)

Citation preview

Working Backwards

Frederick Townes, CTO Mashable.com WordCamp Denmark, 15.05.2010

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

What we thought we made…

Introduction

What was actually delivered…

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/

&amp;style=normal&amp;source=yoururl&amp;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

Thank You.

Questions? Site Review?

[email protected]

[email protected]

@w3edge

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