Shopify网站立即加载JS文件

时间：2017-02-24 00:36:20

标签： javascript html shopify

我正在尝试优化Shopify网站上的速度，我被告知需要在外部JS文件之前加载外部CSS文件。在theme.liquid文件中，我确保在外部JS文件之前移动所有外部CSS文件。但是，当我加载网站时，它会在开始<head>标记的最顶部显示几个JS文件。我完全不确定这些文件的加载位置。如何在外部文件之后强制加载这些文件？

Inspector HTML

＆＃13;
＆＃13; 
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Basic Page Needs
================================================== -->
  
  <title>
    {{ page_title }}{% if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} &ndash; Page {{ current_page }}{% endif %}{% unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless %}
  </title>
  {% if page_description %}
  <meta name="description" content="{{ page_description | escape }}" />
  {% endif %}
  <link rel="canonical" href="{{ canonical_url }}" />

  {% include 'social-media-meta-tags' %}
  
  <!-- CSS
================================================== -->

  {{ 'stylesheet.css' | asset_url | stylesheet_tag }}
  {{ 'font-awesome.css' | asset_url | stylesheet_tag }}
  {{ 'queries.css' | asset_url | stylesheet_tag }}
  {{ "fonts.css"  | asset_url | stylesheet_tag }}
  {{ 'bold.css' | asset_url | stylesheet_tag }}
  {{ 'custom.css' | asset_url | stylesheet_tag }}
  {{ 'rewards.css' | asset_url | stylesheet_tag }}
{% include 'bold-product' with product, hide_action: 'header' %}

  {% include 'google-fonts' %}
  <!--[if LTE IE 8]>
  {{ 'gridlock.ie.css' | asset_url | stylesheet_tag }}  
  <![endif]--> 
    <!--[if IE 7]>
  {{ 'font-awesome-ie7.css' | asset_url | stylesheet_tag }}
  <![endif]-->

  {{ 'bold.css' | asset_url | stylesheet_tag }}
 
  
  <!-- JS Script
================================================== -->
  {% include 'limespot-global-head-includes' %}
  <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}">
  

  {% if template contains 'customers' %}
  {{ "shopify_common.js" | shopify_asset_url | script_tag }}
  {{ "customer_area.js"  | shopify_asset_url | script_tag }}
  {% endif %}

  {{ content_for_header }}



  
  <script type="text/javascript">

    $(window).load(function() {  
      $('.prod-container').matchHeight();

    });
  </script>   
  
<!-- Bold D&H //theme -->
{% if product.metafields.inventory.ShappifyHidden == "true" %} <meta name="robots" content="noindex"> {% endif %}
<!-- // end theme D&H -->
  
<!-- Start of thegldshop Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(c){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","thegldshop.zendesk.com");
/*]]>*/</script>
<!-- End of thegldshop Zendesk Widget script -->


    {{ 'bold-helper-functions.js' | asset_url | script_tag }}
 
  
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '903638969718533');
fbq('track', "PageView");</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=903638969718533&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
  
  <meta name="google-site-verification" content="HBLWBeNWSyVpfKi1kphn9N-pawBjK09WMSV2F7MmVKU" />
  
<!-- Start Alexa Certify Javascript -->
<script type="text/javascript">
_atrk_opts = { atrk_acct:"V9iOn1QolK10cv", domain:"thegldshop.com",dynamic: true};
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://d31qbv1cthcecs.cloudfront.net/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();
</script>
<noscript><img src="https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=V9iOn1QolK10cv" style="display:none" height="1" width="1" alt="" /></noscript>
<!-- End Alexa Certify Javascript -->  
 
<!-- Start Crazy Egg Script -->  
<script type="text/javascript">
setTimeout(function(){var a=document.createElement("script");
var b=document.getElementsByTagName("script")[0];
a.src=document.location.protocol+"//script.crazyegg.com/pages/scripts/0055/5395.js?"+Math.floor(new Date().getTime()/3600000);
a.async=true;a.type="text/javascript";b.parentNode.insertBefore(a,b)}, 1);
</script>  
<!-- End Crazy Egg Script -->
  
  
<!-- Bing Tracking Code -->
<script>(function(w,d,t,r,u){var f,n,i;w[u]=w[u]||[],f=function(){var o={ti:"5527824"};o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad")},n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function(){var s=this.readyState;s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null)},i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i)})(window,document,"script","//bat.bing.com/bat.js","uetq");</script><noscript><img src="//bat.bing.com/action/0?ti=5527824&Ver=2" height="0" width="0" style="display:none; visibility: hidden;" /></noscript>
<!-- End Bing Tracking Code -->  
  
  
  
  
  <!-- JS External
================================================== -->


  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  
  {% assign custom = all_products.custom-set %}
  {% assign custom_handle = 'custom-set' %}
  <script type="text/javascript">
    var customImage = "{{ custom | img_url: 'small' }}";
    var customHandle = "{{ custom_handle }}";
  </script>

  {{ 'theme.js' | asset_url | script_tag }} 
  {{ 'option_selection.js' | shopify_asset_url | script_tag }}  
  {{ 'handlebars.js' | asset_url | script_tag }}
  {{ 'api.js' | asset_url | script_tag }}  
  {{ 'jquery.fs.shifter.js' | asset_url | script_tag }}

  {% if template == 'index' %}
  {{ 'instafeed.js' | asset_url | script_tag }}
  {% endif %}
  
  <!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  
</head>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

我有预感这些是由第三方插件注入的，但无论哪种方式，它都不会帮助你的响应时间太长，因为脚本都是异步加载的。在屏幕截图中，您会注意到所有这些脚本标记都具有异步属性：

<script src="//somwhereovertherainbow.com" async></script>

如果您使用async属性，您会说：我不希望浏览器在下载此脚本时停止正在执行的操作。我知道这个脚本在运行时并不真正依赖于DOM中的任何内容，它也不需要以任何特定的顺序运行。

这实际上比在<head />底部运行脚本更加优化，因为它会延迟执行，直到DOM完成加载。

现在解决更大的问题。

在JavaScript之前加载CSS不会改善你的加载时间，因为头部中的所有内容总是会阻塞正文中的内容，直到它被完全加载和解析。

什么会改善你的加载时间是将JS移动到正文的底部或使用async属性。

以下是优化页面的示例：

<html>

<head>
  // We put styles at the top so everything will render
  // without having to parse additional styles
  <link rel="stylesheet" ... />
  <style></style>

  // If you put any JavaScript up here, it will load and run 
  // before anything in the <body />
  //
  // So we avoid this...
  //
  // <script src="..."></script>
  // Since it'll block rendering to download and parse the JavaScript
  //
  // or this...
  //
  // <script>window.onload = function () { }</script>
  // Since it'll block rendering to parse the JS.

  // You can load scripts asynchronously, however, in which case, the script will download and run after the body has been loaded
  <script src="..." async></script>
</head>
<body>
<!-- Once the head is done the body renders -->
<div id="status">Loading..</div>
<!-- People often put scripts at the bottom of the page to delay execution as well -->

<script>document.getElementById('status').textContent = 'Loaded!'</script>
</body>
</html>
相关问题
最新问题