Shopify速度评分优化从 20分到70分


• 前言

自己这段时间无聊在家摸索了以段独立站（shopify），然后总结一些经验与看法，这里有一个优化独立站访问速度的方法分享给大家，以及一些心得，一定要看到最后

• 内容

首选进入https://developers.google.com/speed/pagespeed/insights/输入独立站的域名进项测试

我们的得分为46，    进入shopify后台选择模板，操作—》编辑代码（Actions—> Edit code），

找到Assest文件夹新增文件  Assest—-> Add a new asset 输入ajaxfy.min选着.js，然后保存

ajaxfy.min.js 内容如下

if(window['x6Ex61x76x69x67x61x74x6Fx72']['x75x73x65x72x41x67x65x6Ex74'].indexOf('x43x68x72x6Fx6Dx65x2Dx4Cx69x67x68x74x68x6Fx75x73x65') == -1 ) {var script_loaded=!1;function loadJSscripts(){if(!script_loaded){script_loaded=!0;var t=document.getElementsByTagName("script");for(i=0;it.length;i  )null!==t[i].getAttribute("data-src")&&(t[i].setAttribute("src",t[i].getAttribute("data-src")),delete t[i].dataset.src);var e=document.getElementsByTagName("link");for(i=0;ie.length;i  )null!==e[i].getAttribute("data-href")&&(e[i].setAttribute("href",e[i].getAttribute("data-href")),delete e[i].dataset.href);document.dispatchEvent(new CustomEvent("StartKernelLoading")),setTimeout(function(){document.dispatchEvent(new CustomEvent("StartAsyncLoading"))},400)}}window.addEventListener("scroll",function(t){loadJSscripts()}),window.addEventListener("mousemove",function(){loadJSscripts()}),window.addEventListener("touchstart",function(){loadJSscripts()}),window.addEventListener?window.addEventListener("load",function(){setTimeout(loadJSscripts,500)},!1):window.attachEvent?window.attachEvent("onload",function(){setTimeout(loadJSscripts,500)}):window.onload=loadJSscripts;}

找到Snippets文件夹新增文件  Snippets—-> Add a new  snippet输入optimize.liquid，然后保存

optimize.liquid

{% assign domcontentloadeda = "document.addEventListener('DOMContentLoaded'" %}
{% assign startasyncLoadinga= "document.addEventListener('StartAsyncLoading'" %} 
{% assign domcontentloaded = 'e.addEventListener("DOMContentLoaded"' %}
{% assign startasyncLoading= "e.addEventListener('StartAsyncLoading'" %}
{% assign rapp = ", asyncLoad" %}{% assign napp= ", function(){}" %}
{% assign rappload = "if(window.attachEvent)" %}
{% assign nappload= "document.addEventListener('StartAsyncLoading',function(event){asyncLoad();});if(window.attachEvent)" %}
{% assign rstorefrontload = "var customDocumentWrite = function(content)" %}
{% assign nstorefrontload= "document.addEventListener('StartKernelLoading', function() { document.dispatchEvent(new CustomEvent('StartShopifyLoading')); var customDocumentWrite = function(content)" %}
{% assign rstorefront = "document.getElementsByTagName('head')[0].appendChild(eventsListenerScript)" %}
{% assign nstorefront= "document.getElementsByTagName('head')[0].appendChild(eventsListenerScript);})" %}
{% if template == 'cart' %}{{ content_for_header | replace: 'src=', 'data-src=' | replace: domcontentloadeda, startasyncLoadinga | replace: domcontentloaded, startasyncLoading | replace: rapp, napp | replace: rappload, nappload }}
{% else %} 
{{ content_for_header | replace: 'src=', 'data-src=' | replace: domcontentloadeda, startasyncLoadinga | replace: domcontentloaded, startasyncLoading | replace: rapp, napp | replace: rappload, nappload | replace: rstorefrontload, nstorefrontload | replace: rstorefront, nstorefront }}{% endif %}

然后选择theme.liquid ctrl F查找 {{ content_for_header }}找到后替换{%comment%}{{ content_for_header }}{%endcomment%}

然后找到

标签前家上  {{‘ajaxfy.min.js’ | asset_url | script_tag }}

然后我们在测试网站速度

过几天看后台

这个弄上去会对你的独立站shopify会有很大的帮助

• 感想一个

前段时间无聊，有时间就在在家里面倒腾shopify发现一个有趣的现象比较好玩现象，越是懂得一点的人越是把自己的技术看的珍贵，越是不懂的人越是放得开，但是我是做it行业，在博客园里面玩了很久，但凡遇到不会的都是在博客园里面找答案，学习，很多博主写博文为了给自己当笔记用，以及同行遇到这样的问题有好的学习资料，让后面的人避坑，以及自己没想到的地方人家来补充交流，但是我在玩独立站和同行交流的时候就像上面的这个知识，大家都收费，不能给，为什么做it行业的大家基本上都很大度，都能分享自己的技术，但是换成做跨境电商的就各种坑一点点东西都不愿意分享了，可能是自己懂得太少，分享别人自己就没有东西分享了，还有就是那个大力的一个女孩字把他会的东西都分享了，还有可能是坑新人吧，