The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 08-16-2014, 02:58 AM
blind mellow jelly's Avatar
blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

js to footer and deferred


http://bit.ly/1lNdLut

I'm trying to use a wordpress optimization plugin (Speed Booster Pack) that has options to move js to the footer and to defer parsing. It gets me well over a 90 score in both Pagespeed and Yslow, but it breaks Ecwid.

The plugin allows for script exclusion. Can anyone provide a list of the scripts I would need to exclude to do this?

Thank you!

Last edited by blind mellow jelly; 08-22-2014 at 11:31 PM.
  #2  
Old 08-16-2014, 04:04 AM
blind mellow jelly's Avatar
blind mellow jelly blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

I also tried using Rocker Loader in Cloudflare to accomplish more or less the same ends of optimizing js, and it has the same problem with Ecwid hanging up (I do understand that Ecwid needs to be excluded from this type of script optimization). I see that the Knowledge Base article on Rocket Loader article says to contact you guys in the forum for help with this.

Thanks.
  #3  
Old 08-18-2014, 03:18 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by blind mellow jelly View Post
I also tried using Rocker Loader in Cloudflare to accomplish more or less the same ends of optimizing js, and it has the same problem with Ecwid hanging up (I do understand that Ecwid needs to be excluded from this type of script optimization). I see that the Knowledge Base article on Rocket Loader article says to contact you guys in the forum for help with this.

Thanks.
Hello Rob.

I checked your Wordpress website here: http://www.meteorlights.com/store/ The site and Ecwid in it loads very fast on my end. Anyway, I added Speed Booster Pack plugin to my test Wordpress website as well and Ecwid was still fully functional, however I had to remove asynchronous CSS loading, because it changed the width of my Ecwid store. If you want to exclude Ecwid script from being processed by the Speed Booster Pack plugin you need to add the following line in 'Exclude scripts from being deferred' in the plugin settings in your Wordpress control panel.
Code:
//app.ecwid.com/script.js?143410&data_platform=wporg
If the Speed Booster Pack Plugin enabled for your website right now? If not, could you please provide a screenshot when Ecwid is 'broken' by this plugin? Also, what checkboxes did you select in the settings of this plugin?

After that I started searching for ways to exclude Ecwid scripts from Rocket Loader and found the following plugin: Cloudflare Rocket Loader Ignore. To add Ecwid scripts to the ignore list, please add the following line to 'Enter script filenames, one per line' section:
Code:
//app.ecwid.com/script.js?143410&data_platform=wporg
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #4  
Old 08-18-2014, 04:46 PM
blind mellow jelly's Avatar
blind mellow jelly blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

Thank you for the assistance, Vitaly.

Let me explain myself more clearly. I wasn't saying that Ecwid doesn't load fast; in fact, because it is cloud-based, ecwid is the fastest part of my website -- I'm very happy with how fast Ecwid loads. However, my website is heavy on graphics and had loaded slowly in general, until I recently tried to boost its speed, using Page Speed and Yslow as metrics.

Using Speed Booster, Ecwid wasn't loading when either or both "Move scripts to footer" or "Delay parsing of js files" was checked, and if anyone is interested, the reason for this is explained in the Ecwid Knowledge Base article on Rocket Loader.

I will try using the two methods you cited, and report back. This maybe of interest to other Wordpress Ecwid users. as well.

One last thing: In addition to the line of code, //app.ecwid.com/script.js?143410&data_platform=wporg, Speed Booster also asks for the associated Script Handle. Can you provide that, as well?

Thank you!
  #5  
Old 08-18-2014, 06:07 PM
blind mellow jelly's Avatar
blind mellow jelly blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

The plugin hangs up the site, and I think I figured out why. CLoudflare is enabled on my site through the server, BlueHost, and not via a wordpress plugin. Cloudflare FAQ says not to use the Wordpress Cloudflare plug-in if the CDN is provided on the host end.

So, I tried adding //app.ecwid.com/script.js?143410&data_platform=wporg as a Page Rule in Cloudflare, and enabled Rocket Launcher, but the site is hanging up again.

I'm trying to add a screen shot of the Cloudflare page rule setting, but the image doesn't seem to be uploading.



Here's the link: http://bit.ly/YpQFFh

Last edited by blind mellow jelly; 08-18-2014 at 06:12 PM.
  #6  
Old 08-19-2014, 06:33 AM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by blind mellow jelly View Post
The plugin hangs up the site, and I think I figured out why. Cloudflare is enabled on my site through the server, BlueHost, and not via a Wordpress plugin. Cloudflare FAQ says not to use the Wordpress Cloudflare plug-in if the CDN is provided on the host end.

So, I tried adding //app.ecwid.com/script.js?143410&data_platform=wporg as a Page Rule in Cloudflare, and enabled Rocket Launcher, but the site is hanging up again.

I'm trying to add a screen shot of the Cloudflare page rule setting, but the image doesn't seem to be uploading.



Here's the link: http://bit.ly/YpQFFh
Hello Rob.

Did you try the plugin I suggested? Here it is: http://www.jimmyscode.com/wordpress/...loader-ignore/
Also, I checked the source code of the store page on your website http://www.meteorlights.com/store/ and found out the Ecwid is already excluded from optimization. I highlighted the part in red that was changed:
Code:
<script data-cfasync="false" type="text/javascript" src="//app.ecwid.com/script.js?143410&data_platform=wporg"></script><div class="ecwid-shopping-cart-script"></div>   <div class="ecwid-shopping-cart-product-browser"> <div id="ecwid-store-143410">
</div>
<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=", "id=ecwid-store-143410");</script></div>
So according to the article on Cloudflare's website Rocket Loader should ignore Ecwid scripts now. Please try to disable all third party plugins in your Wordpress website except for Ecwid store, and Rocket Loader in Cloudflare settings and see what happens.

Quote:
One last thing: In addition to the line of code, //app.ecwid.com/script.js?143410&data_platform=wporg, Speed Booster also asks for the associated Script Handle. Can you provide that, as well?
There are two sections in Speed Booster Pack plugin settings: 'Exclude scripts from being moved to the footer' and 'Exclude scripts from being deferred'. I was referring to the latter, which doesn't need Script Handle part.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #7  
Old 08-19-2014, 07:15 AM
blind mellow jelly's Avatar
blind mellow jelly blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

Thanks for the reply, Vitaly.

I did try the Rocket Loader Ignore plugin, and it froze the site's loading. My site's CDN is provided through the host Bluehost, instead of through a Wordpress plugin. Cloudflare's Knowledge Base says not to use Wordpress' Cloudflare plugin if the CDN is provided by the host. I think therefore that the Jimmy'sCode Rocket Loader Ignore plugin works with Wordpress plugin-enabled CDN, but not with host-provided CDN like I have. Does this make sense? I'm not sure myself...

Also, I was asking about the Script Handle, because the Speed Booster plugin asks for that information for the "Exclude scripts from being moved to the footer" option (but it doesn't ask for the Script Handle for the deferring script option). I don't even know what a "Script Handle" is....

And I'm unclear what is or isn't a Third Party plugin in Wordpress. Currently, I have
1. Aksimet
2. All in One Seo
3. Do Follow
4. EWWW Image Optimizer
5. Google XML Sitemap for Images
6. Google XML Sitemaps
7. Jetpack (only for the Mobile theme on my non-Ecwid pages)
8. jQuery Colorbox
9. Speed Booster Pack
10. UpdraftPlus - Backup/Restore
11. WP Supercache

and of course, Ecwid.

Finally, I added Ecwid to Cloudflare's Page Rule optimization exclusion based on the line you gave me yesterday (//app.ecwid.com/script.js?143410&data_platform=wporg), but the site doesn't load when Rocket Loader is enabled. So I have disabled Rocket Loader (but you still see the Page Rule excluding Ecwid). Does this make sense?

I will try talking to Cloudflare Support about this, as well, but I wanted to talk to you guys first. Trying to solve a problem across multiple platforms (wordpress, ecwid, cloudflare) isn't easy!

Last edited by blind mellow jelly; 08-19-2014 at 07:25 AM.
  #8  
Old 08-19-2014, 12:41 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Hello Rob.
Quote:
Also, I was asking about the Script Handle, because the Speed Booster plugin asks for that information for the "Exclude scripts from being moved to the footer" option (but it doesn't ask for the Script Handle for the deferring script option). I don't even know what a "Script Handle" is....
First of all, I learned that the code for exclusion in Speed Booster Pack in 'Exclude scripts from being moved to footer' should be:
Code:
<script data-cfasync='false' type='text/javascript' src='//app.ecwid.com/script.js?143410&data_platform=wporg'></script>
Ecwid doesn't have a script handler name, so you can leave this field empty.
However, the Speed Booster Pack plugin moves Ecwid scripts to the <head> tags of the page, therefore Ecwid will not work, stating the error message.

Also, we've encountered several issues with Rocket Loader in the past, when the site loaded normally, but Ecwid store was not displaying correctly. We've modified our plugin so it adds this part
Code:
data-cfasync="false"
to Ecwid scripts automatically. You can find more info here: http://www.ecwid.com/forums/showthread.php?p=103725 So if you are using Cloudflare Rocket Loader on your Wordpress website Ecwid will be excluded from being processed by this software.

Quote:
Finally, I added Ecwid to Cloudflare's Page Rule optimization exclusion based on the line you gave me yesterday (//app.ecwid.com/script.js?143410&data_platform=wporg), but the site doesn't load when Rocket Loader is enabled. So I have disabled Rocket Loader (but you still see the Page Rule excluding Ecwid). Does this make sense?
The following path in your Cloudflare settings is incorrect:
Code:
meteorlights.com//app.ecwid.com/script.js?143410&data_platform=wporg
The correct path is
Code:
http://app.ecwid.com/script.js?143410&data_platform=wporg
So basically, you need to try to deactivate Speed Booster Pack and activate Rocket Loader. Please let me know what happens then.
By the way, I noticed that you may be adding Ecwid integration code manually on this page:
Code:
<div id="content" role="main">
<div id="post-6" class="post-6 page type-page status-publish hentry">
<h1 class="entry-title">Store</h1>
<div class="entry-content">
<p>   <script data-cfasync="false" type="text/javascript" src="//app.ecwid.com/script.js?143410&data_platform=wporg"></script><div class="ecwid-shopping-cart-script"></div>   <div class="ecwid-shopping-cart-product-browser"> <div id="ecwid-store-143410">
</div>
<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=", "id=ecwid-store-143410");</script></div>   </p>
Because if you are using Ecwid plugin for Wordpress, there integration code for Ecwid should look like this:
Code:
<!-- Ecwid shopping cart plugin v 2.4.3.2 --><script data-cfasync="false" type="text/javascript" src="//app.ecwid.com/script.js?5035009&data_platform=wporg"></script><div class="ecwid-shopping-cart-search"><script type="text/javascript"> xSearchPanel("style="); </script></div><!-- END Ecwid Shopping Cart v 2.4.3.2 -->  <!-- Ecwid shopping cart plugin v 2.4.3.2 --><div class="ecwid-shopping-cart-product-browser">    <div id="ecwid-store-5035009">
		
	</div>
	<script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=", "id=ecwid-store-5035009");</script></div><!-- END Ecwid Shopping Cart v 2.4.3.2 -->
I highlighted the part that is missing on your website.
Please delete all manually added Ecwid codes and use Ecwid Shopping Cart plugin for Wordpress only, because if you modify the integration code yourself, so that it has
Code:
data-cfasync="false"
part in it, this script will not be excluded from being processed by Rocket Loader, you can read more about it here: https://support.cloudflare.com/hc/en...ket-Loader-do-.
__________________
Ecwid API and App Market Team
Ecwid Developer Website

Last edited by Vitaliy Golovin; 08-19-2014 at 12:50 PM.
  #9  
Old 08-19-2014, 03:50 PM
blind mellow jelly's Avatar
blind mellow jelly blind mellow jelly is offline
 
Join Date: Jul 2010
Posts: 112
Default

Thank you, Vitaly. I appreciate the help. However, I am very confused.

1. I did try adding this url to Cloudflare: "http://app.ecwid.com/script.js?143410&data_platform=wporg", but it prompts an error message saying that my domain name has to be appended.

And when I previously had added just "//app.ecwid.com/script.js?143410&data_platform=wporg", Cloudflare automatically appended my site name to the front of the url.

2. I didn't realize that Speed Booster moves Ecwid to the <head>. I thought Ecwid is supposed to be in the <head>, and that Speed Booster moves it to the <footer>, unless you have the option checked. But I don't have that option checked, so Speed Booster shouldn't be moving Ecwid at all? You can see my Speed Booster settings here: bit.ly/1sSdjTt

3. I do have the Ecwid plugin activated in Wordpress. bit.ly/1paAnKC

This is the Ecwid code I see on my page:

In the <head>:

<link rel='stylesheet' id='ecwid-css-css' href='http://www.mysite.com/wp-content/plugins/ecwid-shopping-cart/css/frontend.css' type='text/css' media='all'/>

<link rel="dns-prefetch" href="//images-cdn.ecwid.com/">

<link rel="dns-prefetch" href="//images.ecwid.com/">

<link rel="dns-prefetch" href="//app.ecwid.com/">

And in the <body>:

</div><!-- #primary .widget-area -->

<div id="secondary" class="widget-area" role="complementary">
<ul class="xoxo">
<li id="search-3" class="widget-container widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://www.mysite.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form></li><li id="ecwidminicart_miniview-3" class="widget-container widget_ecwid_minicart_miniview"><h3 class="widget-title">&nbsp;</h3><div><script data-cfasync="false" type="text/javascript" src="//app.ecwid.com/script.js?143410&data_platform=wporg"></script><script type="text/javascript">var ecwid_ProductBrowserURL = "http://www.mysite.com/store/";</script> <script type="text/javascript"> xMinicart("style=left:10px","layout=Mini"); </script>
</div></li> </ul>
</div><!-- #secondary .widget-area -->

-----------------------------------

Can you tell me what needs to be removed?

I also have a couple links on the page to product pages in the Store, but those shouldn't cause any problems on loading, right?

Thanks.

Last edited by blind mellow jelly; 08-19-2014 at 04:54 PM.
  #10  
Old 08-20-2014, 08:44 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Hello Rob. Let me explain myself point by point here:
Quote:
1. I did try adding this url to Cloudflare: "http://app.ecwid.com/script.js?143410&data_platform=wporg", but it prompts an error message saying that my domain name has to be appended.

And when I previously had added just "//app.ecwid.com/script.js?143410&data_platform=wporg", Cloudflare automatically appended my site name to the front of the url.
Cloudflare prompts an error message, because it needs the script to be located on your website as an actual file. However the link that you are trying to add
Code:
http://app.ecwid.com/script.js?143410&data_platform=wporg
leads to our domain 'app.ecwid.com', so as far as I can see you are not able to exclude Ecwid's script in Cloudflare settings.
However when you added the link
Code:
//app.ecwid.com/script.js?143410&data_platform=wporg
there was no error message, because either you or Cloudflare added your domain name at the beginning of the link, so it looks like this on your screenshot:
Code:
meteorlights.com//app.ecwid.com/script.js?143410&data_platform=wporg
So that's why there was no such error message previously.

Quote:
2. I didn't realize that Speed Booster moves Ecwid to the <head>. I thought Ecwid is supposed to be in the <head>, and that Speed Booster moves it to the <footer>, unless you have the option checked. But I don't have that option checked, so Speed Booster shouldn't be moving Ecwid at all? You can see my Speed Booster settings here: bit.ly/1sSdjTt
Ecwid has to be in between the <body> tags of the page to work properly. I can see that it got you confused, because you can see links to scripts in the <head> tags in the source code on other pages on the web. Also I can't view your Speed Booster settings because the link leads to the General settings page of Ecwid shopping cart plugin.

3. If you open the page http://www.meteorlights.com/store/pendant-hardware/ and view the source code of it, you will see the Ecwid code:

Code:
<div id="container">
<div id="content" role="main">
<div id="post-616" class="post-616 page type-page status-publish hentry">
<h1 class="entry-title">Pendant Lamp Hardware</h1>
<div class="entry-content">
<div><script type="text/javascript" src="http://app.ecwid.com/script.js?143410"></script><br/>
<script type="text/javascript">// <![CDATA[
xProductBrowser("categoriesPerRow=3","views=grid(3,3) list(10) table(20)","categoryView=grid","searchView=list","style=","defaultCategoryId=354447");
// ]]&gt;</script></div>
It doesn't look like a code that Ecwid Wordpress plugin uses. The '<![CDATA[ //]]' part is usually there because Ecwid integration code was added on this page manually. See my previous post to see an example of how Ecwid integration code looks when Ecwid shopping cart Wordpress plugin is used on the page.

Also the above text applies to these pages: http://www.meteorlights.com/store/hardware/
www.meteorlights.com/store/lampshades/

I'm not sure what Ecwid code is located on this page www.meteorlights.com/store/
Could you please provide a screenshot of the page that you have in your Wordpress control panel? It should look something like this: http://take.ms/3X7i7

Also, please provide these screenshots for these pages if you can:
http://www.meteorlights.com/store/hardware/
www.meteorlights.com/store/lampshades/
http://www.meteorlights.com/store/pendant-hardware/

Ecwid in Wordpress uses shortcodes to be inserted in the page. You can see them in my screenshot above. They look like this: [ecwid_productbrowser] This is a shortcode for Ecwid product browser widget.

You can read more about Ecwid shortcodes in Wordpress in this Wordpress article
__________________
Ecwid API and App Market Team
Ecwid Developer Website
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
pack

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:09 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.