Problem
When you load up a page on my site, often times one (or several) images (jpg files that I have saved from Lightroom and/or Photoshop) will not appear. It instead looks like a broken link (ALT description appears) but no image. Hard reload of the browser solves problem (e.g. all images load properly after a hard reload).
Error Message
Chrome displays an “ERR_CONTENT_LENGTH_MISMATCH” warning for all images it does not load. (Sometimes the image will flash quickly before going to what looks like a dead image)
Setup
Running latest version of WordPress (4.2.2) on a Shared Host. Site is SSL (https) if that matters. Images are located in an image upload folder (nothing complex like Imagemagick, etc) on the host.
My Troubleshooting
I have replicated the issue from multiple locations using various ISPs on various machines (both Mac & PC) and with various browsers (Chrome & Safari) some of which are not using any ad-blockers.
What I’ve tried is the following:
- I asked the host if there was an issue on the server side. They claim no.
- I’ve tried resetting the functions.php file. No impact.
- I’ve disabled all plug-ins. No impact.
- I’ve hardkeyed in the meta charset as UTF-8. No impact.
- Checked if I’m using Gzip. I am not.
- Enabled WordPress Cache plugin. No impact.
- Cleared .htaccess of all non-necessary redirects & commands. No
impact. - Replaced wp-admin and wp-includes folders from fresh install. No
impact. - Deleted WordPress & Reinstalled from a Backup. No dice.
- I’ve put source code from pages that have this issue into a test.html file and the images seem to load up fine doing that.
My Thoughts & Questions
The images are 100-200kb each and sometimes there are a fair amount of them on the page. Is something timing out and then once I hard reload, everything show up because the timeout isn’t tripped? That is the best random guess I can gather without understanding the issue perfectly.
Any ideas of things I can try? Should I delete the whole database and start again? Everything I know about computers is self-taught and server issues are not a strong point for me. Even if you don’t know what it might be, could someone explain what a content length mismatch is in general terms?
Thanks much!
When you request data from a web server, it responds first with some information about the data (HTTP headers) and then with the data. One of these pieces of information, an HTTP header, is called
Content-Length. It tells the client how much data it should expect to receive from the server. When your browser gets an image, the server’s response (very simplified looks like)The client knows the request is complete when it has received the amount of data told by
Content-Length. Until it receives in this case 100KB (100000 bytes), it considers the image, for example, to not be done loading.If the server breaks the request before the client receives the data from the server, or if the client receives more data than it received, the client will throw some sort of error and assume the data to be corrupted/unusable and dispose of it. How this is handled can vary between browsers.
How did you upload the images to your website? Myself, I have encountered this problem in a situation where the file’s supposed size was stored in the database, and this was used to set the
Content-Lengthheader. The file size in the DB wasn’t correct for the file. HOWEVER, I know that WordPress does not store file sizes in the database; media uploads are simply represented by a URL.This could also happen if the web server runs out of resources and can no longer fulfill your requests; you said you had lots of images per page. If you are on a really lousy shared hosting plan, it may be the case that the host imposes limits, or that the server simply can’t handle the traffic of all the sites it hosts.
I wanted to circle back on this in case someone else is experiencing this problem. It appears that there is some type of glitch between HTTPS and image retrieval that was causing the problem. While I don’t understand WHY that is, I converted my site from SSL/HTTPS to simple HTTP (which I was able to do as it doesn’t require encryption) and it appears all images load as they should.
If someone understands the “why”, I’d love to understand what the issue actually is. Luckily, I was able to come up with workaround. So, while this doesn’t answer my question, it does provide context of what is causing the problem and my common sense workaround.
You might see this problem with a shared hosting service. Free bandwidth is like free speech, not free beer. Resource outage policies are invoked during traffic spikes.
A distributed system architecture solves this by inserting a front-end CDN tier (eg. CloudFlare). CDNs cache your static resources and can vastly reduce the load on your host. In fact, for completely static sites the host can be shut down.
There are other advantages to CDNs, like attack detection, free SSL (not beer) and overall improved performance and security compared to shared hosting alone.
Many CDNs are free (as in speech). You could also upgrade to private hosting, but $ and you still might want a front-end tier.