I use Squarespace as my CMS. I'd like to know if there's a way to have the actual .JS file load itself asynchronously to ultimately reduce the site load time.
For those who don't know, Squarespace gives very limited access to backend content and files. So I'd like to know if there are any alternatives to reduce render-blocking resources.
The file is located in [websitename]/scripts/site-bundle.js found through SFTP.
EDIT: Here's the full code https://codepen.io/anon/pen/MMKZyQ, as you can see I can't find any script tags to insert the defer or async values.
!function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){e.exports=n(1)},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}n(2);var r=n(6),i=o(r),a=n(60),u=n(65),c=o(u),l=n(85),s=o(l);n(86);var d=n(87),f=o(d),p=n(100),h=o(p),v=n(101),y=o(v),m=n(104),A=o(m),g=n(121),b=o(g),w=n(189),_=o(w),x=n(190),E=o(x),k=n(191),S=o(k),T=n(192),L=o(T),O=n(193),M=o(O),P=n(194),j=o(P),C=n(195),R=o(C),I=n(103),F=o(I),V=n(196),N=o(V),D=n(199),B=o(D),G=n(200),U=o(G),H=n(207),z=o(H);i.default.register("AncillaryLayout",f.default),i.default.register("FooterBreakpoints",h.default),i.default.register("HashManager",y.default),i.default.register("IndexFirstSectionHeight",A.default),i.default.register("IndexGallery",b.default),i.default.register("IndexGalleryVideo",_.default),i.default.register("IndexNavigation",E.default),i.default.register("HeaderNavFolderTouch",S.default),i.default.register("HeaderOverlay",L.default),i.default.register("MobileClassname",M.default),i.default.register("MobileOverlayFolders",j.default),i.default.register("MobileOffset",R.default),i.default.register("MobileOverlayToggle",F.default),i.default.register("Parallax",N.default),i.default.register("ScrollIndicator",B.default),i.default.register("SiteLoader",U.default),i.default.register("UserAccountLink",z.default),i.default.register("VideoBackground",function(e){return(0,c.default)(e,function(e){var t=e.handleResize,n=e.handleTweak;(0,s.default)(t,105),a.Tweak.watch("tweak-overlay-parallax-enabled",n)})}),window.addEventListener("controller:refresh",i.default.refresh)},function(e,t,n){n(3).polyfill()},function(e,t,n){(function(t){for(var o=n(4),r="undefined"==typeof window?t:window,i=["moz","webkit"],a="AnimationFrame",u=r["request"+a],c=r["cancel"+a]||r["cancelRequest"+a],l=0;!u&&l<i.length;l++)u=r[i[l]+"Request"+a],c=r[i[l]+"Cancel"+a]||r[i[l]+"CancelRequest"+a];if(!u||!c){var s=0,d=0,f=[],p=1e3/60;u=function(e){if(0===f.length){var t=o(),n=Math.max(0,p-(t-s));s=n+t,setTimeout(function(){var e=f.slice(0);f.length=0;for(var t=0;t<e.length;t++)if(!e[t].cancelled)try{e[t].callback(s)}catch(e){setTimeout(function(){throw e},0)}},Math.round(n))}return f.push({handle:++d,callback:e,cancelled:!1}),d},c=function(e){for(var t=0;t<f.length;t++)f[t].handle===e&&(f[t].cancelled=!0)}}e.exports=function(e){return u.call(r,e)},e.exports.cancel=function()
This can be accomplished for the Brine/Wright family of templates by doing the following:
Enable Developer Mode (Settings > Advanced > Developer Mode)
Using SFTP or Git, obtain access to the template files.
Within site.region file, change:
<squarespace:script src="site-bundle.js" combo="false" />
to
<squarespace:script src="site-bundle.js" combo="false" async="true"/>
Use SFTP or Git to update your template files on Squarespace's servers.
You may also use <script src="/scripts/site-bundle.js" async></script> instead of using Squarespace's script loader. Simply replace the aforementioned line in step 3.
As an aside, the unbundled code can be found in Squarespace's Wright GitHub repository.
For other templates not in the Brine/Wright family, similar steps may apply, though file names may differ.
There are two properties on a script tag to do exactly what you want to do:
specifying defer will defer the loading of the script until the page has been fully parsed (and rendered)
specifying async will indicate to the browser that this script can be loaded asynchronously at any point of its choosing.
Those two properties are both well supported (defer, async) and as such, you can and should make use of them to achieve this.
A client of ours has a Silverstripe website that they're hosting with a company that applies the Cloudflare CDN to their hosting plan.
We can't access the Cloudflare settings but want to alter one of the settings "Rocket Launcher" so it doesn't touch the Silverstripe CMS Javascript files (lib.js, leftandmain.js).
It is possible to make Rocket Launcher ignore a script:
<script data-cfasync="false" src="/javascript.js"></script>
However the CMS javascript is dynamically loaded by core Silverstripe code:
Requirements::combine_files('leftandmain.js', $leftAndMainIncludes);
Is it possible to add the data-cfasync="false" variable to the script tag by extending the core code?
I want the output to read:
<script type="text/javascript" data-cfasync="false" src="/assets/_combinedfiles/leftandmain.js?m=1486678668"></script>
Any help is appreciated.
Doesn't look to be an easy place in Requirements_Backend. Could do it using a RequestFilter. Use a regex or simple replace to modify the response body.
Google's AMP (Accelerated Mobile Pages) guidelines suggest that the loading of the AMP javascript should be async:
<script async src="https://cdn.ampproject.org/v0.js"></script>
Is there a way to ensure a local fallback version of the javascript file is loaded, should the CDN fail to deliver?
Normally, I would add a js test immediately after the script is loaded to see if it loaded some constant (like jQuery). However, when async is used, there doesn't seem to be a simple way to determine if it will load since there's a potential race condition between the loading of the script and the test that determines if the script loaded.
Yes, there is a way to provide a local fallback:
<script src="https://cdn.ampproject.org/v0.js" onerror="document.write('<script src=\'v0.js\' async></script>')" async></script>
Tested in the latest Firefox.
My webapp loads far too slowly when using the express.static middleware to serve
all my js files so I wanted to try to serve each js file only when needed (when serving the html from jade that uses the js file). I've tried using .sendFile() but it doesn't seem to be working, though I can't tell if that's because it can't be used for my purpose or if I just don't know how to use it.
Is there a way to dynamically serve up js files so as not to require load time until necessary, or should I just suck it up, minimize my js, and serve it all up staticly at the beginning?
I think that the simplest solution for you problem is to use the
async attribute in script tag
http://www.w3schools.com/tags/att_script_async.asp
A script that will be run asynchronously as soon as it is available:
<script src="demo_async.js" async></script>
Or use defer attribute
http://www.w3schools.com/tags/att_script_defer.asp
A script that will not run until after the page has loaded:
<script src="demo_defer.js" defer></script>
if you use in server, setup nginx for serve static file :D
I have a web app that makes assorted calls to load in javascript. i.e.:
<script src="test.js"></script>
I know the common solution to prevent caching is this:
<script src="test.js<?=$random_number?>"></script>
My challenge is that my app is not served up by a language like PHP/ASP. It is basically just a flat file. (Because we use the same source code as a PhoneGap app)
Is there a cleaner way to do a script tag other than below?
document.write("<script src='test.js?rnd=" + Math.random() + "'></script>");
use a dom script adder instead of document.write:
function addScript(u,d){(d=document).getElementsByTagName('head')[0].appendChild(d.createElement('script')).src=u}
addScript("test.js?rnd="+Math.random());