Empty Src and Href Attributes

By Alex Carter on September 23, 2024

Website Performance: Taxonomy of Tips intro­duced a clas­si­fi­ca­tion scheme to help us or­ga­nize the many per­for­mance tips found on the In­ter­net.  Since Yahoo’s five most highly-weighted tips fall in­to the jour­ney from the ser­ver to the cli­entca­te­go­ry, we might ex­pect this ca­te­go­ry to of­fer the best im­prove­ment in web ap­pli­ca­tion per­for­mance.  This and my next two ar­ti­cles will dis­cuss tips that re­late to the jour­ney from the ser­ver to the cli­ent.It isn’t hard to find tips in this ca­te­go­ry.  In fact, if we li­mit our search to just those tips iden­ti­fied as “best practices” by Google, Yahoo, Steve Souders, and Patrick Killelea, this ca­te­go­ry is well rep­re­sent­ed.Today’s ar­ti­cle de­scribes the one tip that Yahoo con­si­ders most im­por­tant.

Avoid Empty src and href Attributes

These five code sam­ples:

     <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 com­mon:  The URL spe­ci­fi­ca­tions are miss­ing.  Some brow­sers are better than others at hand­ling this, but some issue an ad­di­tion­al, un­ne­ces­sar­y re­quest to the ser­ver.  This causes the ser­ver to re­ge­ne­rate and re-serve the en­tire page a se­cond time for no rea­son.  If the web page al­ready has a large num­ber of hits, we are cre­at­ing an un­ac­cep­ta­ble load.

Let’s not blame the brow­sers, though.  They are sim­ply fol­low­ing RFC 3986, which says that a null URI is a va­lid URI.  HTML’s pre-2010 stan­dards al­so al­low null URL’s, so this code is not in­cor­rect.

Writing Better Code Isn’t Enough

From the co­der’s view­point, re­solv­ing this prob­lem is not as sim­ple as avoid­ing the above cod­ing pat­terns.  Good de­ve­lo­pers may find them­selves creat­ing this prob­lem un­know­ing­ly by using tem­plat­ing en­gines or con­tent ma­nage­ment sys­tems.  If the sys­tem we use cre­ates poor code, there’s not much we can do about it.  The cre­a­tors of those sys­tems must make the ne­ces­sary changes.  Even if we know the prob­lem ex­ists, trac­ing it back to its cause can be dif­fi­cult.

Detecting the Problem Through Monitoring

Nicholas Zakas ad­vises that these prob­lems can be de­tect­ed by watch­ing for a page that is its own re­fer­er.  This is an ap­pro­pri­ate task for a Paid Monitor mo­ni­tor.  It can iden­ti­fy that the prob­lem ex­ists and tell us where to find it in our code.

The Future

As of March 2010, HTML5 eli­mi­nates this prob­lem, but until HTML5 is ful­ly im­ple­ment­ed by all brow­sers, IT ma­na­gers need to make sure their pro­jects care­ful­ly avoid emp­ty src and hrefat­tri­butes.  Sub­stan­tial ad­her­ence to the HTML5 stan­dard 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.