Empty Src and Href Attributes

by Warren Gaebel | Jan 09, 2012

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

The Future