Post by peecha85 » Sat Jul 23, 2011 8:45 pm

Running page speed test on my site, I noticed ugly errors regarding favicon and fancybox. The same you can see on Opencart demo site: http://www.webpagetest.org/result/11072 ... 1/details/

How to get rid of these errors? Also- how can I completely remove fancybox? My clients don't click on images (there is no reason), so I don't need it. Suggestions?

Thanks!

Active Member

Posts

Joined
Tue May 11, 2010 10:28 pm

Post by Moggin » Sun Jul 24, 2011 2:09 am

Apologies in advance for a long post, but I've been looking into this too.

I'll start with a couple of solutions.

If you look in catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css you will see a bunch of IE styles towards the end, which feature a microsoft fix for transparent .pngs called AlphaImageLoader. These styles seem to cause a couple of issues with fancybox: 1) occasional page slowdown, and 2) minor 404 errors.

One solution is to remove the IE styling altogether. This may cause minor display issues for users who have older versions of IE. (Source)

The other is to correct the paths shown in the fancybox CSS to absolute paths (these paths are the origin of the 404 errors). source 1 |source 2.

I didn't try webpagetest, but the Yslow plugin also complained about AlphaImageLoader in fancybox:
Grade F on Avoid AlphaImageLoader filter

There are a total of 16 filters

http://fancybox.net/js/fancybox-1.3.4/j ... -1.3.4.css


The IE-proprietary AlphaImageLoader filter attempts to fix a problem with semi-transparent true color PNG files in IE versions less than Version 7. However, this filter blocks rendering and freezes the browser while the image is being downloaded. Additionally, it increases memory consumption. The problem is further multiplied because it is applied per element, not per image.
Plus some people experience page load delays in IE:

http://stackoverflow.com/questions/6050 ... imes-in-ie

- so I decided to cut the IE styling out altogether.

As to the favicon, and removing fancybox itself, that is not something I've looked at so I'll let someone else answer. ;)

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by peecha85 » Sun Jul 24, 2011 2:09 pm

Thank you!

I see you are good in this (and I am not), so could you tell which lines or files I should remove to get rid of fancybox, or at least those lines, which are causing the troubles?

Active Member

Posts

Joined
Tue May 11, 2010 10:28 pm

Post by Moggin » Mon Jul 25, 2011 12:59 am

peecha85 wrote:Thank you!

I see you are good in this (and I am not), so could you tell which lines or files I should remove to get rid of fancybox, or at least those lines, which are causing the troubles?
lol, flattering, but not so. :D

If you want to do what I did - at your own risk - go to catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.4.css. Backup this file. Then look for this section of code

Code: Select all

/* IE6 */

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_nav_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
	height: expression(this.parentNode.clientHeight + "px");
}

#fancybox-loading.fancybox-ie6 {
	position: absolute; margin-top: 0;
	top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px');
}

#fancybox-loading.fancybox-ie6 div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_loading.png', sizingMethod='scale'); }

/* IE6, IE7, IE8 */

.fancybox-ie .fancybox-bg { background: transparent !important; }

.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }
and delete it.

I haven't noticed any ill effects, but I only tested IE8/IE9, plus Firefox/Opera/Chrome. However, I did have a complaint of page freezing before I removed the styling - that's what led me on this trail.

As to removing fancybox entirely -I don't really know OC 1.5x well enough to advise. While it's easy enough to strip the fancybox coding from the product images, it may be called elsewhere in the program, so I'll pass on that one.

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by peecha85 » Mon Jul 25, 2011 2:09 pm

If I put /* before that code, is it the same as deleting?

Anyway- this helps. Tested on IE8, and the first view got 2.5 second improvement, however page fully loaded 3 times faster. Huge difference

Active Member

Posts

Joined
Tue May 11, 2010 10:28 pm

Post by Moggin » Mon Jul 25, 2011 11:24 pm

peecha85 wrote:If I put /* before that code, is it the same as deleting?

Anyway- this helps. Tested on IE8, and the first view got 2.5 second improvement, however page fully loaded 3 times faster. Huge difference
Good to know!

- You can indeed comment out the code by wrapping /* and */ around it.
However, there are two other comments within that section - you'd either have to delete them, or remove the closing */ in each case - or you will not deactivate all the code.
Hope that helps.

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by inspirio » Tue May 22, 2012 5:27 pm

Yes..Works for me, too...TY :)

YSLOW SCORE :)

Avoid AlphaImageLoader filter A (100) CSS Medium

Delete all in /* */ - with green color

Image


User avatar
New member

Posts

Joined
Fri Feb 17, 2012 9:11 pm
Who is online

Users browsing this forum: No registered users and 39 guests