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!
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:
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.
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:
Plus some people experience page load delays in IE: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.
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.
lol, flattering, but not so.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?
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'); }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.
Good to know!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
- 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.
Who is online
Users browsing this forum: No registered users and 22 guests
