Site speed and Lazy Load

[realmaverick]

Good evening guys, I run an image centric website and would like to optimise for speed.

I'm really torn at the moment. Our galleries are huge and of course the deeper the content, the less important it's deemed. So in an attempt to improve indexation, I increased the number of items per page but in turn, this will slow loading down.

At present 30 thumbnails are loaded per page, plus other imagery. I was considering implementing lazy load but I'm not sure exactly what effect this will have on Google.

Would it even alter the page loading time, according to Google? Obviously the page would complete faster in a browser.

If it would decrease the page load time for Google, I am guessing the images that aren't loaded, won't be indexed?

Any advice would be very much appreciated.

Thanks a lot.

[onebuyone]

You shouldn't index miniatures anyway, so lazy load should not hurt you.

[realmaverick]

I'm not sure what you mean by miniatures, if you're referring to the gallery. The entire top 10 for the target keywords, are dominated by galleries. It wouldn't make sense for it not to.

[Lame_Wolf]

I use Jpg Cleaner ~(to remove hidden content within a jpg) this makes the file size smaller.

I then use irfanview to make the file size even smaller (too much will reduce the quality of the image... I set mine to 80% but you can get away with 75%)

HTH

[onebuyone]

I'm not sure what you mean by miniatures, if you're referring to the gallery. The entire top 10 for the target keywords, are dominated by galleries. It wouldn't make sense for it not to.

Thumnbails, sorry. You should load thumbails of full images using javascript, onload and onscroll/resize events. Load only those, which are inside users viewport.

[levo]

Latest browsers start loading images in HTML code before DOM ready event, so you have to use a placeholder for img's src and replace it later from data-src (or some other attribute that holds the actual image URL) You can check Google's Blogger blog as example. [buzz.blogger.com...]

If you implement lazy-loading, Google and javascript-disabled visitors won't see images. Remember you can't use src attribute...

I ended up setting a cookie in javascript code, to check it on next page request. If visitor has that cookie, server sends the HTML with blank src and data-src, otherwise just sends good old src. So first page views, including bots, gets a standard page, consequent page views get lazy loading pages.

One other possible method is to use data-src and include another img tag with src enclosed in noscript tag, but that bloats the code.

[tedster]

A recent version of the lazy load plug-in [appelsiini.net] does recommend using <noscript> - other changes in the code, too. Following that approach, I don't think there would be any impact on image indexing.

[seoholic]

@onebuyone
Why no thumbnails? Duplicate content? Indexing budget?

[onebuyone]

Do you see any thumbnails on top positions in images search? I don't, thats why I noindex them.

[sftriman]

I had never heard of lazy load until this thread. However, I've been using the Yahoo YUI for about 3 years with great success. I even use it on the mobile version of my site and it works (at least on my iPhone testing).

Anyhow, I had a question. I read this:

[webresourcesdepot.com...]

It seems there are 4 ways listed there.

1. jQuery - LazyLoader
2. MooTools - LazyLoad
3. Yahoo YUI - ImageLoader
4. Prototype - lazierLoad

I tried to find some comparative reviews, but didn't. Basically, I'm satisfied with Yahoo YUI, but hey, maybe one of the other choices has a smaller footprint or works faster or better. Can anyone give a summary comparison?

[tedster]

One thing to be aware of is not using two different JavaScript libraries on the same page. I know from recent experience that the current versions of mootools and jquery can conflict. So if you're already using a specific library for another purpose, such as a lightbox for example, stick with that or else you may be buying a pile of work.

[sftriman]

@tedster Good point. I may in fact be using Yahoo YUI for image handling and jquery for AJAX on a few of my pages. However, with Yahoo YUI, I use the minimum codeset to handle what I need, so hopefully there isn't a conflict. ("Hopefully, he says.") Other than those sets of pages, which I've tested thoroughly and seem to work just fine, all my other pages just use the Yahoo YUI for image handling.

Any take on which of the 4 lazy load JS libraries works best? Fastest? Most reliably?

[tedster]

I haven't been hands-on with all of them - so I really can't give an informed opinion.

Another point I wanted to make earlier in the thread but forgot - site speed is NOT measured by googlebot, it comes from user data (toolbar installs, Chrome, and the like.) Googlebot only measures server response times. It's important to keep those two factors clear. So you want the browser to send a "page loaded" signal as early as possible. If that happens well, you've boosted site speed.

Also, because javascript is essentially text, make sure you use gzip for text assets. Also, make sure you compress images well. Using Photoshop's "Save for the Web", you can often use as low as 40% for a jpg file with no visible degradation. And beware of 24-bit PNG files. You rarely need them!

These areas are where I see a lot of sites blowing it with Site Speed, even as they worry about a kb here or there on their html or scripts. Do the actual file compression well first, for both text assets and images.

If you're on Apache, the mod_pagespeed module does a nice job with automatically sending only as much image data as is really needed - no matter what the original file is like. That can be a great savings when you have user contributed image content.

[levo]

I've tried jQuery - LazyLoader, it requires your images to be sequential, if you have lazy loading images on 2-3 column website, it doesn't work very well. I ended up using jquery "appear" plugin - heavily modified it to use 1.7's new .on event handler & and removed all unnecessary features. It caches all measurements (to avoid calculating for every pixel of scroll) and it just works vertically. Most of the lazy loading codes cause choppy and laggy scrolling, this code, as far as I can tell, works very fast. Again, it is based on Michael Hixson's jQuery.appear plugin.

(function($) {
 
 $.fn.appear = function(fn, options) {
 
 var settings = $.extend({

 //arbitrary data to pass to fn
 data: undefined,

 //call fn only on the first appear?
 one: true,
 
 //call fn when element is within this many pixels of viewport
 threshold: 0
 
 }, options);
 
 return this.each(function() {
 
 var t = $(this);
 t.appeared = false;
 
 var check = function() {

 if (!xw.s) xw.s = xw.scrollTop();
 if (!xw.h) xw.h = xw.height();
 if (!t.y) {t.y = t.offset().top;}
 if (t.y <= xw.s + xw.h + settings.threshold) {
t.trigger('appear', settings.data);
}
 
};

var modifiedFn = function() {
t.appeared = true;
if(t.wbinded) xw.off('scroll', check).off('resize', check);
fn.apply(this, arguments);
};
 
t.one('appear', settings.data, modifiedFn);
(check)();
if (!t.appeared) { xw.on('scroll', check).on('resize', check); t.wbinded = true; }

 });
 };
 
 
})(jQuery);

//LAZYload
var xw=$(window);
xw.on("scroll", function(){if (xw.s) delete xw.s;});
xw.on("resize", function(){if (xw.h) delete xw.h;});
$("#YOUR-CONTENT-DIV-ID").find("img[data-src]").appear(function(){
$(this).attr('src', $(this).attr('data-src'));
},{threshold:200});

[sftriman]

I've not had any problems with the Yahoo YUI - this is the min version I use:

<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>

The only thing is, when using Google Page Speed on Firefox to analyze pages, it gets multiple dings: (1) no cache validator (2) size - could remove whitespace, etc. (3) query string warning since the -min ends up being this:

http://yui.yahooapis.com/combo?3.2.0/build/oop/oop-min.js&3.2.0/build/event-custom/event-custom-min.js&3.2.0/build/attribute/attribute-base-min.js&3.2.0/build/base/base-base-min.js&3.2.0/build/event/event-base-min.js&3.2.0/build/dom/dom-min.js&3.2.0/build/node/node-base-min.js&3.2.0/build/node/node-style-min.js&3.2.0/build/node/node-screen-min.js&3.2.0/build/imageloader/imageloader-min.js

Other than that, I've found the YUI works quite well. I did have a page with 3 div tabs for content, and in that case, I had to make different image groups to get it working right. It was a bit wonky with div tabs until I got it all figured out.

[edited by: tedster at 4:59 pm (utc) on Jan 30, 2012]
[edit reason] turn off automatic linking [/edit]

[speedshopping]

Did the original poster go with lazy loader, and did the subsequent images get indexed in google images?