The WordCamp Report

Steve Souders Starts by interducing himself and what he does. (Author of High Performance Websites)

Was going to do his standard talk, but he ripped apart a WordPress Install and then looked over Ma.tt and show what can be done to optimize it.

ma.tt head Analysis

Even Faster Web Sites

(inside ma.tt)

best practices for faster pages

http://stevesouders.com/docs/wordcamp-20080816.ppt

Importance of frontend Performace

9% backend tweaks and 91% frontend

Most the time when cached is parsing everything that is cached on the pc.

The performance Golden Rule

• 80-90% of the end user response time is spent of the frontend.  Start there.
• Greater potential for improvement
• simpler
• proven to work

YSlow is a tool for Firebug that allows you to track the load times by analyzing the webpage.

High Performance Web Sites, Vol2

1. Split the initial payload

Why focus on javascript?  A large amount of the delays on loads are javascript sizes.  Block parrellel downloads.

Cuzillion allows you to test what ways to to use resources effect the download. You can tell when things are blocking parrellel downloads. Changing the order of downloads will speed it up.

Note the number of functions actually used in the onload event to speed things up.  Split the rest to be loaded on OnEvent.

Split the initial payload

• Split your javascript between what’s needed to render the page and everything else.
• load “everything else” AFTER the page s loaded
• separate manually (firebug); tools needed to automate this (Doloto from Microsoft)

MSN.com: Parallel Scripts and Style Sheets

How they did it: create element script

Advanced Script Loading

• XHR Eval
• XHR injection
• Script in iframe
• Script DOM Element
• Script Defer
• Script tag (document.write Script tag)

Browser Busy Indicators

Each browser does it different to show its busy.  XHR doesn’t show any indicators.  In some cases not showing would be good, in a lot of way s it could be bad. (multiple clicking)

Ensure/Avoid Ordered Execution  – Download them in Parrellel but make sure they are executed in order.  But first downloaded should be executed to give user a response.

And the Winner is (a complication graph).  Starts with 3 questions and gets worse from there.  (will have to post slides)

Inline Scripts after Stylesheets Block Downloading.

• Firefox (2 on down) block parellel downloads when downloading stylesheets
• IE doesn’t…
• …unless the stylesheet is loaded by an inline script

An Inline script can turn a 2 second download time into 4 seconds.  The script may be codependant ont he stylesheet, so that’s why it delays.

Example of Scattered Scripts

Ebay – if they move th laoding of one script they’d save 3 seconds of load.

rememebr inline scripts carry a cost

avoid …

Quickly to Ma.tt

YSlow 65

Ma.tt head Analysis

• Note all loading scripts
• @import parrellizes stylesheets in FF avoids script blocking in IE
• scripts block parrellel download (except @import in IE)
• Put Stylesheets before scripts (can save seconds)
• don’t put inline scripts between stylesheets and other resopurces.

Analyzing all of ma.tt

good:

• 10 images sprited into 1
• CDN: s.ma.tt (panther), stats.wordpress.com (Savvis)
• expires set 2-5 days in the future
• most everything gzipped
• most .js minified
• ETags configured
• parallelized stylesheets

fix:

• combiune scripts (4), cobine stylesheets (3)
• sprite CSS background images(15)
• move scripts to bottom, load non-blocking
• shard respources across 2-4 domains
• cookieless domain for static content (7k across 30 requests)
• move inline script agfter stylesheet
• move style sheet above .js
• image height & width

Resultant loads much faster and at more parrellel (saved about 7 seconds load)

1625 ms  vs. 1297 m

compare.php (hammerhead)

HTTP Watch packet sniffer was used to track loads.

takeaways

• focus on the frontend
• run YSlow
• this year’s focus: Javascript
• Split the initial payload
• Load scripts without blocking

Filed under WordCamp Live.
Subscribe to RSS 2.0.
Leave a comment or trackback.