Avoid empty img src values
In this post, we’ll discuss how empty image src values can ruin the performance of your web site, and how you can to solve it.
A while ago, I was assigned to optimize an incredibly slow web site. The obvious problems were many, like how it loaded all widgets in an expandable dashboard, including their related data, on each page load, instead of loading each widget as it was expanded.
However, while these problems were obvious, one unexpected performance bottleneck
was that the web application used xslt files that did not handle missing image src
values. Instead of not rendering image tags that lacked an src value or use a
fallback image, the image tags were rendered with src="".
So, what happens when you have a web site with a lot of image tags with empty src? At first, you may think that these images will simply not load an image. However, what really happens is that the images will try to load the root of the current folder!
For instance, consider an image at http://www.mywebsite.com/contact/contact-us.html.
If its src is empty, the browser will try to load http://www.mywebsite.com/contact.
So, if you have a non-static site that is written in e.g. ASP.NET or PHP, where a lot of data is fetched on each page load, having a bunch of image tags that lack a src value will cause the site root to be called once per image. This will cripple your web site.
To solve this, never use empty src attributes! If you don’t want to load an image due to various reasons, just omit the image tag altogether or make sure to use a fallback value, an 1×1 pixel image or something that doesn’t refer to the site root.
Discussions & More
Please share any ideas, feedback or comments you may have in the Disqus section below, or by replying on Twitter or Mastodon..
If you found this text interesting, make sure to follow me on Twitter and Mastodon for more content like this, and to be notified when new content is published.
If you like & want to support my work, please consider sponsoring me on GitHub Sponsors.