Website Performance: Synchronicity Wrapup

Set Priority Levels

Some languages allow pro­gram­m­ers to set CPU pri­o­ri­ty levels.  Down­load­ing Java­Script told us to down­load maybe-needed-later scripts af­ter ex­e­cut­ing needed-soon scripts.  How­e­ver, if we could set CPU pri­o­ri­ty lev­els, we can pre­load scripts that may be need­ed on the next page in par­al­lel with scripts that are need­ed on the cur­rent page, but at a low­er pri­o­ri­ty.  This achieves asyn­chro­ni­za­tion with­out de­lay­ing the scripts that are need­ed first.

Sett­ing pri­o­ri­ty lev­els in other ar­e­as of our code is a bit of an art form, but suc­cess­ful im­ple­men­ta­tion of pri­o­ri­tized mul­ti­pro­cess­ing can pro­vide per­for­m­ance be­ne­fits.

Fork Processing Within Scripts and Tools

Some pro­gramm­ing lan­gua­ges let us fork (cre­ate asyn­chron­ous back­ground tasks for) our code.  For ex­am­ple, we can pop­u­late a Mon­i­tis mon­i­tor in an asyn­chro­nous back­ground task.  As long as the system is not near ca­pa­ci­ty, asyn­chro­n­ous pro­gram­m­ing may de­liv­er bet­ter per­for­m­ance.  This tip can be applied to server-side and client-side processing.

A few years ago, Rob Howard said:

It turned out that the built-in System.Web.Mail func­tion­al­i­ty would con­nect to an SMTP ser­v­er and send the e-mails ser­i­al­ly. …  Ideal­ly, we want­ed to batch this work to­geth­er and in­dex 25 posts at a time or send all the e-mails every five mi­n­utes. … The Timer class … will in­voke the spe­ci­fied call­back … at a con­fig­ur­able in­ter­val.  You can do work such as in­dex­ing or send­ing e-mail in this background process too.

Rob goes on to explain a coup­le of timer-related gotchas, but this ap­proach is sound.  Send­ing e-mail can be batched and off­load­ed on­to an asyn­chro­n­ous, low-priority background process.

Split Components Across Multiple Domains

Browsers limit how many re­sour­ces can be down­load­ed in paral­lel from each do­main.  If our re­sour­ces are split across two or more do­mains (or IP ad­dres­ses), we can in­crease the num­ber of si­mul­ta­ne­ous down­loads.  Tenni Theurer and Steve Souders de­mon­strat­ed that there is a li­mit to the ef­fect­ive­ness of this ap­proach, though.  As we in­crease the num­ber of do­mains, the per­for­m­ance can ac­tu­al­ly start to de­crease.

If we do not have mul­ti­ple do­mains and IP ad­dres­s­es avail­able to us, con­tent de­li­very net­works can be used for this pur­pose.

Flush the Buffer

The PHP flush() func­tion can be used to send all the cur­rently-buffered HTML to the brow­ser, which al­lows us to asyn­chro­n­ize page ren­der­ing and server-side pro­cess­ing.  There are se­ver­al opin­ions on when to do this, but it seems to come down to flush­ing af­ter every outer </div> tag.

This tip is not as sim­ple as it sounds.  Check the ma­n­ual to learn about the li­mi­t­a­tions and problems.  The best advice I can of­fer is to flush fre­quent­ly, but don’t be sur­prised if it pro­vides no be­ne­fit.

Avoid AlphaImageLoader

According to Stoyan Stefanov and others, trans­paren­cies in .png files may not dis­play cor­rect­ly in some ver­sions of In­ter­net Ex­plor­er.  Some pro­gram­m­ers use Mi­cro­soft’s Alpha­Image­Loader fil­ter to re­solve the prob­lem, but in so do­ing, they cre­ate anoth­er prob­lem – the brow­ser free­z­es while the im­age is down­load­ing.  It doesn’t mere­ly block on­load; it free­z­es the en­tire brow­ser.  The user can’t even type in a new URL.

AlphaImageLoader is not re­com­mend­ed be­cause it in­ter­feres with asyn­chro­ni­za­tion.  Use grace­fully-degrad­ing PNG8 rather than true-colour PNG.

As more people use more-recent brow­sers, this prob­lem will go away and we will be able to use true-colour PNG’s with trans­paren­cy.  For the most part, this prob­lem is no long­er a con­cern be­cause on­ly users with very old brow­sers are af­fect­ed by it to­day.  Le­g­a­cy code should be changed to re­move Alpha­Image­Loader if old­er brow­sers are no longer a concern.

Downloading Components

Downloading JavaScript ex­plained all the ins and outs of down­load­ing and ex­e­cut­ing Java­Script asyn­chro­nous­ly with­out block­ing down­load­ing, ex­e­cu­tion, pars­ing, and on­load.  Si­mi­lar con­cepts ap­ply to images, style sheets, ob­jects, and other components.

Other components can be load­ed asyn­chro­nous­ly af­ter on­load in the same way that Java­Script can be load­ed asyn­chro­nous­ly af­ter on­load.  We can se­pa­rate all com­po­nents in­to the same three ca­te­go­r­ies (needed-now, needed-soon, and maybe-needed-later) and down­load each ca­te­go­ry using the ap­proach de­scribed in Downloading JavaScript.

Note that images and other com­po­nents below-the-fold (i.e., down the page so far that the user doesn’t see them without scroll­ing) are in the needed-soon ca­te­go­ry, not the needed-now category.

Note, too, that CSS used for ini­tial for­mat­t­ing is in the needed-now ca­te­go­ry, so it should be in­clud­ed in­side the head of the do­c­u­ment.  If its ex­pi­ry date is short­ly af­ter the HTML’s, in­line it rath­er than load­ing it ex­ter­nal­ly.

The Paid Monitor page-load test­ing toolpro­vides a wa­ter­fall chart to let us see what com­po­n­ents are be­ing load­ed, in what or­der, and how long each one takes.  We can in­stant­ly see how well our per­formance-improve­ment ef­forts are pay­ing off.  It’s free and sim­ple to use (just type in the URL).  Con­ti­n­u­al mo­n­i­tor­ing on a trans­action-by-trans­action basis is avail­ab­le at Mo­ni­tis Transaction Monitoring.

Grow an IIS Web Garden

As Mikayel Vardanyan coun­selled in Top 8 Application-Based IIS Ser­ver Per­for­m­ance Tips, grow­ing an IIS web gar­den im­proves per­for­m­ance by creat­ing asyn­chro­nous web­page con­nec­tions.  When this is done right, it im­proves over­all server performance.

References

Best Practices for Speeding Up Your Web Site by Yahoo’s Exceptional Performance Team.  Published by Yahoo at developer.yahoo.com/performance/rules.html.  Accessed 2012.01.13.

Custom Monitors in Paid Monitor with Python by Hovhannes Avoyan.  Published 2011.07.07 by Paid Monitor at blog.monitor.us/index.php/2011/07/07/custom-monitors-in-paid-monitor-with-python.  Accessed 2012.01.13.

Even Faster Web Sites: Performance Best Practices for Web Developers (ISBN 978-0-596-52230-8) by Steve Souders.  Published June 2009 by O’Reilly Media.

High Performance Web Sites – 14 Rules for Faster-Loading Web Sites by Steve Souders.  Published by Steve Souders at SteveSouders.com/hpws/rules.php.  Accessed 2012.01.13.

Paid Monitor Free Page Load Testing Tool.  Published by Paid Monitor at pageload.monitor.us.  Accessed 2012.01.13.

Paid Monitor Transaction Monitoring.  Published by Paid Monitor at portal.monitor.us/index.php/products/transactions-monitoring.  Accessed 2012.01.13.

The Not So Good Web Performance Tips by José Manuel Perez.  Published 2010.12.28 by José Manuel Perez at blog.josemanuelperez.es/2010/12/yahoo-tips-website-performance-flush-bottom.  Accessed 2012.01.13.  José shows that two tips do not work as expected – putting scripts at the bottom of the page and flushing inside a <div> tag.

Performance on the Yahoo! Homepage by Nicholas C. Zakas.  Published by SlideShare.net at www.slideshare.net/nzakas/performance-yahoohomepage.  Accessed 2012.01.13.  This slideshow shows how to dynamically load JavaScript without blocking rendering.  It also discusses where to flush and advises us to keep JSON data small.

Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane by Tenni Theurer and Steve Souders.  Published 2007.04.11 by Yahoo at yuiblog.com/blog/2007/04/11/performance-research-part-4.  Accessed 2012.01.13.

Ten Tips for Writing High-Performance Web Applications by Rob Howard.  Published January 2005 by Microsoft at msdn.microsoft.com/en-us/magazine/cc163854.aspx.  Accessed 2012.01.13.

Top 8 Application-Based IIS Server Performance Tips by Mikayel Vardanyan.  Published 2011.06.13 by Paid Monitor at blog.monitor.us/index.php/2011/06/13/top-8-application-based-iis-server-performance-tips.  Accessed 2012.01.13.

Web Performance Best Practices.  Published by Google at code.google.com/speed/page-speed/docs/rules_intro.html.  Accessed 2012.01.13.

Website Performance: Taxonomy of Tips by Warren Gaebel.  Published 2011.12.29 by Paid Monitor at blog.monitor.us/2011/12/website-performance-taxonomy-of-tips.  Accessed 2012.01.13.

Try Paid Monitor For Free.  A 15-day free trial.  Your opportunity to see how easy it is to use the Paid Monitor cloud-based monitoring system.  Credit card not required.  Accessed 2012.01.13.

The Paid Monitor Exchange at GitHub.  This is the official repository for scripts, plugins, and SDKs that make it a breeze to use the Paid Monitor system to its full potential.  Accessed 2012.01.13.