No matter how I try to load AddThis (using Google +1, Facebook Send and Like, and Twitter buttons as default), Google Page Speed still warns about:
Leverage browser caching
Defer parsing of Javascript
In each of these items, .html and .js references to AddThis, Facebook, Google +1, Twitter, and static.ak.fbcdn.net are referenced. In fact, if you run Google Page Speed on this page: http://support.addthis.com/customer/portal/articles/381263-addthis-client-api-#rendering-js, you will see exactly what I'm talking about. The first two items, both with orange severity icons (at least for me), are exactly what I mentioned above.
I've tried adding the script tag to the head of my page using defer (for IE) and async (for FF and Chrome) with no luck:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=myUserId" defer="defer" async="async"></script>
I've tried using $.getScript():
$(document).ready(function () {
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#async=1#username=myUserId', function(data, textStatus) {
addthis.init();
});
});
And I also tried turning the ajax cache on:
$(document).ready(function () {
$.ajaxSetup({ cache: true });
$.getScript('http://s7.addthis.com/js/250/addthis_widget.js#async=1#username=myUserId', function(data, textStatus) {
addthis.init();
$.ajaxSetup({ cache: false });
});
});
Is there any way I can cache, and also defer the loading of AddThis and it's external references?
Leverage browser caching
Well this is just a proposal to set more time cache of some pages. On my pages I get this two warning - both from google script :). Is not so important because this javascript all ready have a good time cache for javascript.
http://pagead2.googlesyndication.com/pagead/show_ads.js (60 minutes)
http://www.google-analytics.com/ga.js (2 hours)
Defer parsing of Javascript
Well, this is an automatic program that try to understand if the page is slow and suggest some thinks to improve it. At this point is not accurate.
I just run it on known page that work find and full of cache and other tricks, and get the same messages.
Is like just a suggestion and not actually can know if this javascript really do all ready what he say - at least for the moment. For example in my test page I load a javascript at the end of the page and I get this message again. If you know that you load the javascript at the correct timing with the correct flags, do not worry about this messaage.
Check the report for this page :
https://developers.google.com/pagespeed/#url=http_3A_2F_2Fstackoverflow.com_2Fquestions_2F9739031_2Faddthis-and-google-page-speed&mobile=false&rule=LeverageBrowserCaching
<script type="text/javascript"charset="utf-8" src="/js/addthis.js#async=1"</script>
This has been resolved in our site. http://www.nbhuntop.com
You may try copy the addthis code first. and quote as src="/js/addthis.js#async=1"
Related
My Wordpress-Website [followmyinstagram.de] runs Google Adsense implemented within the head tags and some text areas. The code is written directly into a Child-Theme so I am not using any plugins for Adsense.
By analysing the site's page speed Chrome throws out:
Warnings: A preload link was found for "https://pagead2.googlesyndication.com/pagead/js/xxxxxxx/xxxxxxx/show_ads_impl.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
The browser wastes a lot of time requesting the document this way. There must be an opportunity to, as it says, preload the link or to lazy-load the link after the site has been displayed. Thing is, the mentioned link does not occur anywhere in my site's code, so it must be fetched by the original link within the Adsense-block. How can I fix this error?
According to [https://wordpress.org/support/topic/i-am-getting-a-warning-in-during-google-page-speed-test/] some plugins may interfere with Adsense but I have already tested all of my 8 plugins.
Caching plugins that could be interfering: Autoptimize, WP Super Cache
The Error disappears of course, if I remove the Adsense-code-snippets.
That's my header.php
<head>
<script src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" ></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-**************",
enable_page_level_ads: true
});
</script>
</head>
Warnings: A preload was found for "https://pagead2.googlesyndication.com/pagead/js/xxxxxxx/xxxxxxx/show_ads_impl.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
You can do nothing about it, This is a matter for Google to fix, But preloaded resources might be used in after render events.
So I am calling the wistia script with a script tag in my head like this:
<script charSet='ISO-8859-1' src='//fast.wistia.com/assets/external/E-v1.js' async defer data-script='wistia' />
However, when I check out the network tab on Chrome, I notice that the E-v1.js script from Wistia is being loaded twice, which is rather significant as it is a 273kb script.
The first load of the script is from https://fast.wistia.com/assets/external/E-v1.js, the location to which I have called it.
However, the second load of the script comes from an iframe, despite me not having put any iframes on the page. This iframe calls the script even on webpages which do not contain any wistia videos. The referrer is: https://fast.wistia.com/embed/iframe_shim?domain=com.
What's going on here? I assume this is some trying-to-be-helpful behaviour from wistia to lazy load their script via an iframe, but it's already loaded...
So I contacted Wistia and got an answer. Their development practices are not exactly intuitive.
Here's what the guy said:
The iframe_shim is a way of tracking the visitor_key for stats tracking, and storing that information on the fast.wistia domain rather than your domain. For a more lightweight method of doing that, you can set window.wistiaIframeShim = false in script tags on your page, and that will stop E-v1.js from loading again. Visitors will then be tracked via a cookie and localstorage directly on your domain instead of the fast.wistia.com domain. As far as I know this shouldn't be problematic, and we'll eventually be changing how that works to make it more efficient, it just hasn't been prioritized yet.
So they seem to load it twice from two different origins just to store a tiny amount of information on their own domain rather than on the client. Seems ridicuous to me, but I can confirm as of right now that all you have to do is change that window variable.
THE FIX: window.wistiaIframeShim = false
I've got a stand alone script file that I want to load from a 3rd party server:
<script type="text/javascript" src="//some_server/logger.js"></script>
There's a small chance the remote script won't be there sometimes (404), and I want to be sure that including this script doesn't affect how my app operates, since my app doesn't require the script to be loaded to work (it's an analytics tracker of sorts)
Can I include this script safely without it blocking or causing javascript errors in my app that stops other javascript from running?
I was thinking of adding the async and defer attributes to make the script load lazily. Is this enough? My app needs to work on IE8 and above.
Here's what I'm thinking right now:
<script async defer type="text/javascript" src="//some_server/logger.js"></script>
<script type="text/javascript">
console.log("I want this to always execute, no matter if the above script 404's or not!");
</script>
Can I include this script safely without it blocking or causing
javascript errors in my app that stop other javascript from running?
YES you can
A 404 does not halt execution of javascript in any way, only errors do.
As long as the server responds with a 404, and doesn't hang, the script not loading won't cause any noticeable delay.
This can be tested in different browsers by logging the time it takes to check a 404 or broken link.
Just the fact that the browser logs the time, shows that such scripts does not halt execution of javascript, the thread always continues on to the next script tag unless the parser encounters an error in a script, if the URL isn't found, no browser will throw an error, it just goes on as soon as the URL is not resolved.
<script>console.time('Test');</script>
<script type="text/javascript" src="http://www.broken.url/file.js"></script>
<script>console.timeEnd('Test');</script>
FIDDLE
Testing in IE, Chrome, Firefox and Opera shows that all browsers use less than 0.0002 seconds to resolve a broken link, and the time it takes to resolve a 404 depends on how fast the server responds, but for Google's servers it seems to consistently be less than 0.2 seconds in all browsers before the 404 status code is returned, and the browser keeps executing the next scripts.
Even adding up 20 scripts that all return a 404 takes generally less than half a second for the server to resolve and move on
FIDDLE
In other words, you can safely add any script that has a broken link or returns a 404, it won't break anything, and it won't hang the browser in any way, it only takes a few milliseconds for modern browser to determine that the script can't be loaded, and move on.
What you can't do, is include scripts that actually load, and contain fatal errors, as that will stop the entire thread, and any execution of scripts that comes after the error is encountered.
Define all functions you use (which are in //some_server/logger.js) as empty functions before loading the script and you'll have no exceptions even if you use them without the script being loaded.
<script type="text/javascript">
functionInLogger = function() {
};
functionInLogger2 = function() {
};
...
</script>
<script type="text/javascript" src="//some_server/logger.js"></script>
<script type="text/javascript">
functionInLogger();
functionInLogger2();
console.log("This will always work");
</script>
And when the script is loaded, it'll override the empty functions.
I could not find any popular browser that will stop execution upon a 404. And W3 standard only states this; (W3)
When the user agent is required to execute a script block, it must run the following steps:
...
If the load resulted in an error (for example a DNS error, or an HTTP 404 error)
Executing the script block must just consist of firing a simple event named error at the element.
You can place that script on the bottom of the page (after all your important script), to make sure this will not block rendering of your page.
Or you can also load it after document ready, this method will not give extra load time when the script are not found. Example:
$(document).ready(function() {
$('head').append('<script type="text/javascript" src="//some_server/logger.js"></script>');
});
or use $.getScript method
$(document).ready(function() {
$.getScript('//some_server/logger.js', function(data, textStatus) {
/*optional stuff to do after getScript */
});
});
* in example above I assume if you are using jQuery
I think you should use something like RequireJS.
From Wiki:
It allow developers to define dependencies that must load before a module is executed, so the module doesn't try to use outside code that isn't yet available.
I have a Google +1 button on my site that requires the following script:
<script src="https://apis.google.com/js/platform.js" async defer></script>
The problem is as of today, apis.google.com can't be pinged from everywhere (servers are down) and some of my users don't see a button. I don't always want to use my own copy of the script because I can see that breaking the +1 functionality at some point. I'd like to use something like the solution from this question: my server's fallback copy should be fetched only when the CDN fails.
What's a good way to do that for this script? Is there a generic way to do this for any remote script using jQuery or plain js? Thanks in advance.
EDIT:
I tried jQuery getScript() and wrapped it in a function like this:
function fetch_script(script,fallback) {
$.getScript( script )
.fail(function() {
$.getScript( fallback );
});
};
This does not always work and is not reliable. Two problems I found:
500 errors trigger the fail method, but 404 errors do not and the fallback script is not loaded in these cases. Not sure what happens if the server is just down.
Some scripts are fetched (I see this in the console) but are somehow not executed (or they fail silently). Here's a script that doesn't work.
Say I've got this script tag on my site (borrowed from SO).
<script type="text/javascript" async=""
src="http://edge.quantserve.com/quant.js"></script>
If edge.quantserve.com goes down or stops responding without returning a 404, won't SO have to wait for the timeout before the rest of the page loads? I'm thinking Chaos Monkey shows up and blasts a server that my site is depending on, a server that isn't part of a CDN and has a poor failover.
What's the industry standard way to handle this issue? I couldn't find a dupe on SO, maybe I'm searching for the wrong terms.
Update: I should have looked a bit more closely at the SO code, there's this at the bottom:
<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-5620270-1']);
_gaq.push(['_setCustomVar', 2, 'accountid', '14882',2]);
_gaq.push(['_trackPageview']);
var _qevents = _qevents || [];
(function(){
var s=document.getElementsByTagName('script')[0];
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.google-analytics.com/ga.js';
s.parentNode.insertBefore(ga,s);
var sc=document.createElement('script');
sc.type='text/javascript';
sc.async=true;
sc.src='http://edge.quantserve.com/quant.js';
s.parentNode.insertBefore(sc,s);
})();
</script>
OK, so if the quant.js file fails to load, it's creating a script tag with ga.async=true;. Maybe that's the trick.
Possible answer: https://stackoverflow.com/a/1834129/30946
Generally, it's tricky to do it well and cross-browser.
Some proposals:
Move the script to the very bottom of the HTML page (so that almost everything is displayed before you request that script)
Move it to the bottom and wrap it in <script>document.write("<scr"+"ipt src='http://example.org/script.js'></scr"+"ipt>")</script> or the way you added after update (document.createElement('script'))
A last option is to load it via XHR (but this works only for same-domain, or cross-domain only if the CORS is enabled on a third-party server); you can then use timeout property of the XHR (for IE and Fx12+), and in the other browsers, use setTimeout and check the XHR's readyState. It's kind of convoluted and very non-cross-browser for now, so the option 2 looks the best.
Make a copy of the file on your server and use this. it will load your copy only if the one from the server has failed to load
<script src="http://edge.quantserve.com/quant.js"></script>
<script>window.quant || document.write('<script src="js/quant.js"><\/script>')</script>
To answer your question about the browser having to wait for the script to load before the rest of the page loads, the answer to that would typically be no. Typical browsers will have multiple threads processing the download of the page and linked content (CSS, images, js). So the rest of the page should be loaded, though the user's browser indicator will still show the page trying to load until the final request is fulfilled or timed out.
Depending on the nature of the resource you are trying to load, this will obviously effect your page differently. Typically, if you are worried about this, you can host all your files on a common CDN (or your website if it is not that highly trafficked), that way at least if one thing fails, chances are everything is failing and you have a bigger issue to contend with :)