I need some help troubleshooting a problem. Take a look at the page I’ve linked below. The cream paper background should go all the way down into the grass, yet it, along with some type, is getting cutoff.
I’ve used Safari’s developer tools, but I cannot determine the problem. Any help is appreciated.
I need some help troubleshooting a problem. Take a look at the page I’ve linked below. The cream paper background should go all the way down into the grass, yet it, along with some type, is getting cutoff.
I’ve used Safari’s developer tools, but I cannot determine the problem. Any help is appreciated.
Nope, but I got rid of my pokey T1 and acquiesced to the Comcast monopoly. My net connection is some ridiculous speed that makes renting movies online a reasonable spur-of-the-moment kind of thing.
My first visit was pretty instantaneous, but my second (caches cleared and Web Inspector timers running) took quite a while to handshake (613ms) and 4.9 seconds to download everything.
Your largest images are the grass image (205.7 KB) and the land image (107.9 KB). On average these took 450ms each to load. The welcome mat image is fairly small, but took the longest of all to load, and I don’t have any explanation for that.
I am sure that some of this could just be net congestion, and that it may vary wildly depending on when and where you try to access it.
Walter
On Jun 20, 2013, at 3:08 PM, RavenManiac wrote:
Hi Walter. Hey, do me a favor. Check out the live version of this site and let me know if it seems like it’s loading slow to you:
My first visit was pretty instantaneous, but my second (caches cleared and Web Inspector timers running) took quite a while to handshake (613ms) and 4.9 seconds to download everything.
Your largest images are the grass image (205.7 KB) and the land image (107.9 KB). On average these took 450ms each to load. The welcome mat image is fairly small, but took the longest of all to load, and I don’t have any explanation for that.
Is that good or bad? I don’t have a feel for optimum image sizes yet.
You should aim to have the entire page under a MB for an internal (not home) content page, and 6-700 K total for the home page (where first impressions matter a lot). Lazy-loading images can help here. You may want to apply my LazyLoad Action to the page, and see if it improves the speed of first load. Be sure to clear your caches (Develop menu) before you test this, and have the Network timer open in a separate Web Inspector window so you can watch this in real time.
Walter
On Jun 20, 2013, at 3:22 PM, RavenManiac wrote:
On 20 Jun 2013, 7:18 pm, waltd wrote:
My first visit was pretty instantaneous, but my second (caches cleared and Web Inspector timers running) took quite a while to handshake (613ms) and 4.9 seconds to download everything.
Your largest images are the grass image (205.7 KB) and the land image (107.9 KB). On average these took 450ms each to load. The welcome mat image is fairly small, but took the longest of all to load, and I don’t have any explanation for that.
Is that good or bad? I don’t have a feel for optimum image sizes yet.
I haven’t tested it in 6, I haven’t used it much since I wrote it, to be honest. I needed the effect for a page that was causing JavaScript timeouts waiting for the images to load, and it worked well in that setting. The flashes might be due to the fact that the images are there in the HTML, and may begin to load in the normal way before the JavaScript takes over and stops that. Other lazy-load techniques I have seen are not set up as progressive enhancement, so they literally change the HTML before it is served; from
<img src="foo" ...>
to
<img data-src="foo" ...>
and that means that someone without JavaScript will never see those images at all. My technique does the translation of src to data-src at page load, and since browsers are multi-threaded and pipeline their requests for individual resources, and since the JavaScript and the images are just peers in that equation, you never can tell which will get loaded first.
Walter
On Jun 28, 2013, at 1:28 AM, RavenManiac wrote:
On 20 Jun 2013, 7:42 pm, waltd wrote:
I don’t know (answer to both). Please try it out and let me know what you find. If it does work, I will update the Forge appropriately.
Walter
Walter, I tired the LazyLoad action, but I was getting weird image flashes in FWP 6.0.8.
Hard to imagine – it’s very much set-and-forget at the page level. If your page contained a LOT of HTML and a LOT of very large images, I can see a situation where it might flicker while loading. This could be a transient thing, not present at some times on some connections, more aggravated at other times. The only real solution in that case would be to have the Action do all of the processing during publish time, and literally replace all image srcs with data-src attributes. That would have the downside of forcing all your visitors to have working JavaScript in order to see the images.
Out of curiosity Walter, is there a way to tell if the lazyload action is
working in the server environment?
–
Ernie Simpson
On Fri, Jun 28, 2013 at 9:18 AM, Walter Lee Davis email@hiddenwrote:
Hard to imagine – it’s very much set-and-forget at the page level. If
your page contained a LOT of HTML and a LOT of very large images, I can see
a situation where it might flicker while loading. This could be a transient
thing, not present at some times on some connections, more aggravated at
other times. The only real solution in that case would be to have the
Action do all of the processing during publish time, and literally replace
all image srcs with data-src attributes. That would have the downside of
forcing all your visitors to have working JavaScript in order to see the
images.
It works in the browser, not the server. Unfortunately, I can see there is a JavaScript error which is actually disabling it from working on your page. What version of the Action are you using?
Walter
On Jun 28, 2013, at 9:36 AM, Ernie Simpson wrote:
Out of curiosity Walter, is there a way to tell if the lazyload action is
working in the server environment?
–
Ernie Simpson
On Fri, Jun 28, 2013 at 9:18 AM, Walter Lee Davis email@hiddenwrote:
Hard to imagine – it’s very much set-and-forget at the page level. If
your page contained a LOT of HTML and a LOT of very large images, I can see
a situation where it might flicker while loading. This could be a transient
thing, not present at some times on some connections, more aggravated at
other times. The only real solution in that case would be to have the
Action do all of the processing during publish time, and literally replace
all image srcs with data-src attributes. That would have the downside of
forcing all your visitors to have working JavaScript in order to see the
images.
I just pushed an update to fix this. The issue was that if you didn’t choose to show the spinner, the placeholder in the script where the path to that spinner would go wasn’t removed. BTW, I haven’t marked this as good for 6 yet, because there’s a few things I have been doing to all of my 6 Actions that I didn’t take the time to do here. Just patched that one bug. Ernie, you may want to check to see if your page still performs the same way now.
I’m not unhappy with the apparent load time (for me). I applied the action
because the number of items has recently grown way past what the clients
estimated it would ever be. Because all my thumbs are actually full size
pass-thru (800 x 600) I of course grew nervous.
–
Ernie Simpson
On Fri, Jun 28, 2013 at 10:04 AM, Walter Lee Davis email@hiddenwrote:
I just pushed an update to fix this. The issue was that if you didn’t
choose to show the spinner, the placeholder in the script where the path to
that spinner would go wasn’t removed. BTW, I haven’t marked this as good
for 6 yet, because there’s a few things I have been doing to all of my 6
Actions that I didn’t take the time to do here. Just patched that one bug.
Ernie, you may want to check to see if your page still performs the same
way now.