I have a series of webpages in which the <html>
refers to:
<img src="img1.png" [...] />
<img src="img2.png" [...] />
<img src="img3.png" [...] />
After I realised that multiple server requests were slowing the page down, I compiled a sprite (which contains all the <img>
s) and then displayed each <img>
using CSS background:
co-ordinates instead.
Then I employed mod_rewrite
in .htaccess
to redirect any .png
request to transparent.png
, (behind which the background-sprite would be visible), but - here's the thing - even though I had deleted img1.png
, img2.png
, img3.png
from the server, I kept their filenames, unchanged, in the markup.
I have been running some pagespeed tests over at Pingdom and it appears (though I'm not absolutely certain) that although this setup is much quicker than my original setup, it could still be better optimised, because... even with mod_rewrite
redirects, absent resources require more server time (to identify they are absent and respond accordingly) than present resources.
My question is:
Should I still have dummy, low bandwidth (ie. 1px x 1px) .png files residing on the server under the names img1.png
, img2.png
, img3.png
, even though the redirect means they will never actually be served on the page?
=====
UPDATE:
To see if I could reproduce what (I thought) I'd observed originally in my just-out-of-curiosity pagespeed tests, I ran a series of 60 benchmark tests on Pingdom.
10 on the Amsterdam server, 10 on the New York City server and 10 on the Dallas server without the dummy 1px .pngs and then another 10 on each server with the dummy 1px .pngs.
There is no significant result.
Amsterdam (by 0.073 seconds) and Texas (by 0.308 seconds) were faster on average across 10 page loads without the dummy 1px .pngs.
New York City (by 0.008 seconds) was faster on average across 10 page loads with the dummy 1px .pngs.
So the obvious conclusion to draw (at this point) is that the dummy 1px .pngs make no difference, present or absent.
=====
UPDATE 2:
Just to be absolutely sure, I ran a second batch of 60 benchmark tests.
This time, Amsterdam was faster with the dummy 1px .pngs and New York & Dallas were both faster without the dummy 1px .pngs.
From fastest to slowest, here are the results of 120 tests:
- 1.06s Amsterdam (without 1px icons) #1
- 1.08s Amsterdam (with 1px icons) #2
- 1.13s Amsterdam (with 1px icons) #1
- 1.18s Amsterdam (without 1px icons) #2
- 2.08s New York (without 1px icons) #2
- 2.09s New York (with 1px icons) #2
- 2.50s New York (with 1px icons) #1
- 2.51s New York (without 1px icons) #1
- 2.89s Dallas (without 1px icons) #1
- 2.89s Dallas (without 1px icons) #2
- 3.11s Dallas (with 1px icons) #2
- 3.19s Dallas (with 1px icons) #1
Final Conclusion: The dummy 1px .pngs
make (as @Tim Fountain wrote) absolutely zero difference.