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.
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 included Qtip2 on my site and used the following snippets while the files are hosted on my own server as mentioned here:
<!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) -->
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="/scripts/jquery.qtip.js"></script>
Though hosted on the same server as the website the script loads the following additional file from the CDN of Qtip2:
https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.map
This slows down my side extremely:
I could not find any information about this. Any idea how to avoid (if not necessary) or replace and host on my own server?
The final line of the Qtip2 script is a line lke this:
//# sourceMappingURL=http://cdnjs.cloudflare.com/.../jquery.qtip.min.map
Unfortunately the URL currently returns a 404. If you're hosting Qtip2 yourself, you should be able to find and remove that line at the end of the script. Otherwise, don't worry too much because the .map file is only requested when Developer Tools is open. Normal visitors won't download it.
Here's more info on .map files: jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
The *.map file is a source map. It contains informations like function positions of the non-minified source code of Qtip2. Notice that I used the minified version of it on my webpage.
Source maps help to develop with a postprocessed (e.g. minified) source code without losing the ability to look into the code, for example when errors occur.
The chrome debugger as you can see on the image in my question above downloads it by default. After disabling that function in the debugger settings the file won't be downloaded any longer.
Take a look at this video for a short information or this documentation from Google.
Firefox offers the same feature as you can see here.
I have downloaded this plugin from here and the problem is solved!
http://qtip2.com/v/2.2.1/
I want to lazy load all the 3rd party JS/CSS after my home page is displayed since the external plugins etc are used when user navigates away from home page onto some specific module.
So far I have succeeded for normal .js & .css external libraries thanx to http://wonko.com/post/lazyload-200-released
However this fails for a path like this http://maps.google.com/maps/api/js?sensor=true
Code:
LazyLoad.js('http://maps.google.com/maps/api/js?sensor=true', function () {
alert('Your JS has been loaded');
});
I think the solution would be how to lazy-load web url?
I believe you want something like:
$.getScript('http://maps.google.com/maps/api/js?sensor=true');
using jQuery. The API will give details of the call back. Else Google may have some mechanism requiring it to be present from load. Just a guess.
Found a solution:
Check the URL:'http://maps.google.com/maps/api/js?sensor=true'
You would find main.js is being imported by it . A simple getScript for sensor=true will not give whole google object so next import also required.
var t=setTimeout(function(){
jQuery.getScript('http://maps.google.com/maps/api/js?sensor=true');
jQuery.getScript('http://maps.gstatic.com/intl/en_us/mapfiles/api-3/10/20/main.js');
},1000);
I am currently trying to implement a jquery slider into a joomla website.
I already implemented NoConflict(); so that it doesn't step into joomla. And it works, BUT for another reason wich I do not understand it enters another jquery file called jsloader.js of a plugin I use for picture gallery display.
I suppose all the module jquery files get preloaded before the one im calling inside the template.
it enters the function() in the jsloader.js instead of the one in my jquery file.
How Can I force it to enter my jquery file instead of other
The first problem is that you've got the jquery.js file coming after the jsloader.js file. You need to make sure that jquery.js is included before any plugins - the order is important.
The second problem is that this:
<script type="text/javascript" src="//templates/template/js/jquery-1.2.6.min.js"></script>
Doesn't do what you think. When there are two slashes at the beginning of the URL, the browser interprets the first entry after the double-slash as the hostname, not a directory. What you actually want is:
<script type="text/javascript" src="/templates/template/js/jquery-1.2.6.min.js"></script>
With only one slash.
In case you're wondering, the reason for this is so that you can specify a file on a different host, but using the same scheme. So if you have a page that works in HTTP and HTTPS, then you can specify files on a different site, using the same scheme (HTTP vs. HTTPS) by using the src="//example.com/script/whatever.js" format.