by Warren Gaebel
| Jan 09, 2012
Website Performance: Taxonomy of Tips introduced a classification scheme to help us organize the many performance tips found on the Internet. Since Yahoo’s five most highly-weighted tips fall into the journey from the server to the clientcategory, we might expect this category to offer the best improvement in web application performance. This and my next two articles will discuss tips that relate to the journey from the server to the client.It isn’t hard to find tips in this category. In fact, if we limit our search to just those tips identified as “best practices” by Google, Yahoo, Steve Souders, and Patrick Killelea, this category is well represented.Today’s article describes the one tip that Yahoo considers most important.
Avoid Empty src and href Attributes
These five code samples:
<img src=""> (HTML)
<script src=""> (HTML)
<link href=""> (HTML)
var img = new Image(); img.src = ""; (JavaScript)
style="background-image:url();" (CSS)
all have one thing in common: The URL specifications are missing. Some browsers are better than others at handling this, but some issue an additional, unnecessary request to the server. This causes the server to regenerate and re-serve the entire page a second time for no reason. If the web page already has a large number of hits, we are creating an unacceptable load.
Let’s not blame the browsers, though. They are simply following RFC 3986, which says that a null URI is a valid URI. HTML’s pre-2010 standards also allow null URL’s, so this code is not incorrect.
Writing Better Code Isn’t Enough
From the coder’s viewpoint, resolving this problem is not as simple as avoiding the above coding patterns. Good developers may find themselves creating this problem unknowingly by using templating engines or content management systems. If the system we use creates poor code, there’s not much we can do about it. The creators of those systems must make the necessary changes. Even if we know the problem exists, tracing it back to its cause can be difficult.
Detecting the Problem Through Monitoring
Nicholas Zakas advises that these problems can be detected by watching for a page that is its own referer. This is an appropriate task for a Paid Monitor monitor. It can identify that the problem exists and tell us where to find it in our code.
The Future
As of March 2010, HTML5 eliminates this problem, but until HTML5 is fully implemented by all browsers, IT managers need to make sure their projects carefully avoid empty src and hrefattributes. Substantial adherence to the HTML5 standard is still years away.
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 2011.11.30.
Empty Image src Can Destroy Your Site by Nicholas C. Zakas. Published 2009.11.30 by NCZ Online at www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site. Accessed 2011.12.12.
Empty-String URLs in HTML – A Followup by Nicholas C. Zakas. Published 2010.03.16 by NCZ Online at www.nczonline.net/blog/2010/03/16/empty-string-urls-in-html-a-followup. Accessed 2011.12.12.
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 2011.11.30.
HTML5 – A Vocabulary and Associated APIs for HTML and XHTML. Published 2011.12.09 by the World-Wide Web Consortium at dev.w3.org/html5/spec. Accessed 2011.12.12.
Top Ten Web Performance Tuning Tips by Patrick Killelea. Published 2002.06.27 by O’Reilly at OReilly.com/pub/a/javascript/2002/06/27/web_tuning.html. Accessed 2011.11.30.
Web Performance Best Practices. Published by Google at code.google.com/speed/page-speed/docs/rules_intro.html. Accessed 2011.11.30.
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.02
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.
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.
Post Tagged with
