8

I am having a problem with the initial page load of a site after refresh. I use Chrome for development but the problem is evident across all browsers.

I get the message "Waiting for mysite.com..." and the loading indicator keeps spinning. This stays like this for about 10 seconds and then Chrome gives up and tells me "Unable to load resource 'foobah.png'" from within the developer console. The image is definitely at the path stated. Sometimes it loads sometimes it doesn't. If I remove reference to this image altogether the error will fall on a different image within the page. This is a regular but intermittent fault.

My site is javascript heavy (2500+ lines) I suspect it could be something to do with either:

  1. Javascript loading interfering with image loads.
  2. Something funny going on regarding the caching of images.

Does anyone have any experience of this type of page load problem?

Appreciate any help you can give!

Example URL: http://dev.thebeer.co/imgs/UI/inboxIcon.png

Chrome Developer Tools Screens: Dev Tools Overview Healthy Image Unhealthy Image in Question

UPDATE:

This is an example screenshot from firebug. You can see that the request for the resource doesn't time out but takes ages to retrieve. enter image description here The file that fails can vary from CSS background-image to normal image to even a font file. I think this problem is deeper than client side. We have also been experiencing The Chrome "The following pages have become unresponsive. Your can wait for them to become responsive or kill them" error occasionally. We have stripped the page of ALL javascript, it's almost a bare shell! The image load problems continue to occur cross browser.

UPDATE:

I have found that the following errors in http error log seem to be linked with the problem. Anyone know what they mean and how to solve them?

[ Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5871 for worker proxy:reverse
[Wed Feb 23 06:54:17 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5871 for (*)
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5872 for worker proxy:reverse
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized
[Wed Feb 23 06:54:24 2011] [debug] proxy_util.c(1967): proxy: initialized single connection worker 0 in child 5872 for (*)
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1854): proxy: grabbed scoreboard slot 0 in child 5954 for worker proxy:reverse
[Wed Feb 23 06:59:15 2011] [debug] proxy_util.c(1873): proxy: worker proxy:reverse already initialized
wilsonpage
  • 17,341
  • 23
  • 103
  • 147
  • You should get a error status code for the URL in the "Network" tab in Chrome - what does it say there? – Pekka Feb 16 '11 at 18:20
  • I get the response: Method:GET , Status:Pending , Type:Pending – wilsonpage Feb 16 '11 at 18:23
  • Could it be to do with my server not sending correct MIME types? – wilsonpage Feb 16 '11 at 18:23
  • When it fails, the status should change from pending to an error... Mime types *could* be the reason, don't know – Pekka Feb 16 '11 at 18:29
  • @pagewii From what I know, if you visit the link and it has an incorrect MIME type; your browser should download the file instead of displaying it. – Benjamin Intal Feb 16 '11 at 18:38
  • @pagewii What's in the example URL? I can see it correctly: a down arrow button icon. – Benjamin Intal Feb 16 '11 at 18:40
  • Yeah sorry it is just a an email icon. Quite light but that was one of the images that wasn't downloading. – wilsonpage Feb 16 '11 at 18:41
  • Does the problem happen across different client *machines* and server *machines*? Because it's even possible that it's a disk problem when reading the images from the server disk or from the client cache. Checked the system logs at both ends? A failing disk could easily intermittently hang the serving of images with no higher-level indication of what's going on. Most likely at the server end if it's happening in multiple browsers... – Matt Gibson Feb 22 '11 at 09:51
  • @MattGibson I checked the error logs and they do have errors that coincide with the image loading error. I have pasted the error logs above. Does any of it mean anything to you? – wilsonpage Feb 23 '11 at 14:52
  • @pagewil Don't forget to check the actual system logs as well as the apache log. As for those errors, I don't recognise them, but they look to be related to Apache's load balancer module. Are you using the load balancer? They don't look likely to be the problem to me, being just debug messages rather than errors, but someone with more of a clue should probably deliver a verdict on that... – Matt Gibson Feb 23 '11 at 14:59
  • Can we see the Javascript in question? I link to the source or a pastebin would be great. – A. R. Younce Feb 27 '11 at 02:38

6 Answers6

3

Sounds like it is quite a heavy site (2500+ lines of js!). It is strange that you only experience it on Chrome but this may just be down to the way it handles requests.

As your static content is so heavy, I would recommend using a content delivery network (CDN). Spreading your content across a CDN (and geographical locations) allows a user to be served by the closest,and therefore fastest, server.

There are many CDN providers who will charge to host your content. I use Amazon S3 storage facility, and while not a true CDN, helps me spread my static content which does speed up my sites.

Also with Amazon S3, you can specify your geographical location of your storage area, whether it be US or Europe etc. This geographical location may be closer than your existing web server which is a bonus. S3 gives you free membership as well to test it out.

Hope this helps.

Chris.

Community
  • 1
  • 1
Kit
  • 4,095
  • 7
  • 39
  • 62
  • I tried supplying my content from an Amazon S3 account and the failed to load resource error has disappeared! Brilliant! I guess my server doesn't have the capacity to supply all the static content I require. Thanks mate! – wilsonpage Feb 27 '11 at 22:36
2

If it were Chrome-specific, I'd say it might have something to do with this known bug, but since you mentioned it's happening in other browsers, are you getting the same errors from Firebug, Safari's web developer tool, and/or IE's developer tool?

Also, what's the total download time and amount of your page? I see in your images that there appear to be a large number of files, and some of the images are taking several seconds to load. Can any of those be optimized?

One way to help remedy the problem as a whole is to create sprites, or use non-image alternatives wherever possible (you can use a number of CSS3 techniques to replace things like gradients and whatnot), as well as using tools like SmushIt for images and a JS minifier and combiner to decrease your file sizes and server requests.

Shauna
  • 9,495
  • 2
  • 37
  • 54
  • I'm afraid that the problem is not just chrome specific. I am experiencing very long wait times for certain image elements in other browsers as well. Chrome seems to respond differently by timing out and giving up on looking for the image whereas FF and IE seem to keep requesting it till it arrives (can take up to 20 secs). These images can range from 5kb thumbnails to 0.5kb UI icons. – wilsonpage Feb 21 '11 at 08:59
  • What kind of control do you have over your server? If you can, check your server's resources and make sure something's not maxing them out. If you don't have that kind of control (such as a shared hosting situation), you might want to try to open a ticket with your host and see if someone on your server is eating resources (or if there's just too much going on in general, even if there's no one culprit). – Shauna Feb 22 '11 at 17:55
2

Finally I get someone with this problem with me:

chrome classic - "failed to load resources"

This problem drives developer crazy as it can happen locally, with small amount of requests and a tiny PNG -- however, if you open the image in a new tab, your image will be....finely loaded!

Important notice: chrome caching is the most tricky one I experienced - try to disable/bypass the caching of chrome by using the privacy mode or append a random string behind the resources

Important notice 2: sometime the network tab of web inspector will make a connection time out - that's why you see the "PENDING" state

Solutions/workarounds I tried:

  1. upgrade your chrome to latest one (usually out of luck)
  2. use image preload (sometimes it works)
  3. use data-uri and put it in another .css file: http://css-tricks.com/data-uris/

By some formatting (css selector, css rule order and line breaking), with some trial and error, the image loaded again. (this one works magically)

I wonder if a specific bit of the origin image jammed the image renderer (as data-uri is not work at the beginning)...but this problem will appear when some CSS style applied for a PNG-backgrounded block - especially when "opacity" involved (or that PNG is a hidden background)

Summary:

  1. compress your image in any method
  2. change the CSS selector (e.g. apply the background in other element), if it still failed to load, then it is the image problem - try to change some bit of the origin image* or using data-uri (solution 3)
  3. change the image loading order if (2) loaded your image - then it will be css selector/ordering problem

*You may not believe after I edited the image, the problem appear / disappear.

(If you experiencing long wait time for other images cross browser, it most likely is the performance issue but may be not the bug - some blocking occured)

vincicat
  • 1,811
  • 1
  • 13
  • 13
  • I am finding it hard to understand your english but am hopefull you know how to solve my problem. The image that fails is never consistent and sometimes comes from css background-image sometimes tag. My problem is cross browser as well. Does this mean that my issue is a server-side one? – wilsonpage Feb 21 '11 at 20:54
  • 1. Sorry for poor english and too many w3c terms 2. For me, the problem is not so consistent - but it will be more consistent after you don't change your css...however, it still inconsistent, especially sometimes the image can load suddenly. – vincicat Feb 22 '11 at 06:09
  • 3. the cross-browser part is the performance issues - may be on the server side or the client side javascript. – vincicat Feb 22 '11 at 06:12
  • 4. it occurs in css-background and both , that's why the image perloading failed in this case. – vincicat Feb 22 '11 at 06:13
  • Quick hint for determining the performance issues: try to put everything (server and all the files) in your working machines. I found it is quite strange that your image took so long to load, even a 304 returned. – vincicat Feb 22 '11 at 06:24
1

So as random as this sounds... append a random-number querystring to the src when loading it. I had this problem back when I was working on a custom popover library for an old employer, and the sites it'd load on were... very resource intensive, let's say. This, for some reason, fixed it for me. YMMV?

img.src = 'x.gif?r=3192319231938123912';
Ryan McGrath
  • 2,042
  • 14
  • 23
  • What if the image is sourced from a CSS file? – wilsonpage Feb 22 '11 at 12:46
  • This isn't random at all -- this is a common trick to prevent the browser from trying to load a cached version of the image, and instead load a fresh version off the server. If this works, it means you're dealing with a caching issue. – Yahel Feb 23 '11 at 15:01
  • @pagewil it need server-side scripting (delay on respond), or using JS to load the background-image (delay on display) – vincicat Feb 24 '11 at 05:35
  • @yc I will suggest developer turn the cache off via Developer Tool - This option available for almost all browsers, except chrome – vincicat Feb 24 '11 at 05:37
  • @vinicicat So you are saying I need to delay the server response? For what reason? Will this help the flow of image data? – wilsonpage Feb 24 '11 at 09:59
  • @pagewil If you generate the file on server-side, it will delay the server respond and the requests generated by this file...for the quickest way to bypass caching on resources in developement, try Ctrl+F5, Shift+F5, Ctrl+R and Shift+R for force reload [reference](http://stackoverflow.com/questions/4028427/way-to-get-chrome-to-always-re-download-styles-and-images-on-every-visit-to-the-p/4028542#4028542) – vincicat Feb 25 '11 at 15:45
1

You should consider compact your script files (minify, gzip, etc). With a differnt host for your images (images.yoursite.com) you will have a greater number of parallel connections.

You can use async javascript load - like Google suggests on Google Analytics docs: $(document).ready(function() {

 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

 ga.src = "xpto.js"

 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);

});
Adilson de Almeida Jr
  • 2,761
  • 21
  • 37
0

A couple of things to try. To correct the .woff problem add the proper mimetype to your server settings:

AddType application/vnd.ms-fontobject .eot AddType application/octet-stream .otf .ttf

Next, recreate that .png image that is not loading. Could be that someone saved an image as .jpg or gif but then renamed the file with a .png extension - thus confusing the browser. Try creating that image again and making sure it's saved as the correct format.

Jim Amos
  • 289
  • 1
  • 4