Statcounter asynchronous code - non render blocking - Revision history

Ddxfish at 19:09, 26 July 2015

2015-07-26T19:09:30Z

← Older revision		Revision as of 19:09, 26 July 2015
Line 25:		Line 25:

	Your new result in Pagespeed Insights should be better than before.		Your new result in Pagespeed Insights should be better than before.

			[[Category:Internet]]

Ddxfish at 19:08, 26 July 2015

2015-07-26T19:08:56Z

← Older revision		Revision as of 19:08, 26 July 2015
Line 1:		Line 1:
	Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default is not asynchronous. Pagespeed Insights says that it does not like statcounter for speed reasons because it will block the rest of the site from rendering. If you use Google's [https://developers.google.com/speed/pagespeed/insights/ Pagespeed Insights], it will read:		Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default is not asynchronous. Pagespeed Insights says that it does not like statcounter for speed reasons because it will block the rest of the site from rendering. If you use Google's [https://developers.google.com/speed/pagespeed/insights/ Pagespeed Insights], it will read:
	Eliminate render-blocking JavaScript and CSS in above-the-fold content		Eliminate render-blocking JavaScript and CSS in above-the-fold content


	==Statcounter async code==		==Statcounter async code==
	To make your '''statcounter code asynchronous''', add the word "async" inside the script tag for your statcounter code. Yes, this really does fix the pagespeed problem with statcounter being a render-blocking script. This is new as of HTML5. Your result will look like this:		To make your '''statcounter code asynchronous''', add the word "async" inside the script tag for your statcounter code. Yes, this really does fix the pagespeed problem with statcounter being a render-blocking script. This is new as of HTML5. Your result will look like this:


	<nowiki><!-- Start of StatCounter Code for Default Guide -->		<nowiki><!-- Start of StatCounter Code for Default Guide -->
Line 21:		Line 19:
	</script>		</script>
	<noscript><div class="statcounter"><img class="statcounter"		<noscript><div class="statcounter"><img class="statcounter"
	src="http://c.statcounter.com/~~4776581~~/0/~~c22fb62c~~/1/"		src="http://c.statcounter.com/YOURPROJECTHERE/0/YOURCODEHERE/1/"
	alt="shopify traffic stats"></div></noscript>		alt="shopify traffic stats"></div></noscript>
	<!-- End of StatCounter Code for Default Guide --></nowiki>		<!-- End of StatCounter Code for Default Guide --></nowiki>

Ddxfish at 19:08, 26 July 2015

2015-07-26T19:08:28Z

← Older revision		Revision as of 19:08, 26 July 2015
Line 1:		Line 1:
	Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default is not asynchronous. If you use Google's [https://developers.google.com/speed/pagespeed/insights/ Pagespeed Insights], it will read:		Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default is not asynchronous. Pagespeed Insights says that it does not like statcounter for speed reasons because it will block the rest of the site from rendering. If you use Google's [https://developers.google.com/speed/pagespeed/insights/ Pagespeed Insights], it will read:
	Eliminate render-blocking JavaScript and CSS in above-the-fold content		Eliminate render-blocking JavaScript and CSS in above-the-fold content


	==Statcounter async code==		==Statcounter async code==
	~~The only thing you need to~~ add is the word "async" inside the script tag at the ~~end~~. This is new as of HTML5. Your result will look like this:		To make your '''statcounter code asynchronous''', add the word "async" inside the script tag for your statcounter code. Yes, this really does fix the pagespeed problem with statcounter being a render-blocking script. This is new as of HTML5. Your result will look like this:


Line 24:		Line 24:
	alt="shopify traffic stats"></div></noscript>		alt="shopify traffic stats"></div></noscript>
	<!-- End of StatCounter Code for Default Guide --></nowiki>		<!-- End of StatCounter Code for Default Guide --></nowiki>


			Your new result in Pagespeed Insights should be better than before.

Ddxfish: Created page with "Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default..."

2015-07-26T19:04:06Z

Created page with "Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default..."

New page

Recently I have been working on asynchronous loading of javascript resources on my pages. I use Statcounter as my way to see who visits my sites. Statcounter's code by default is not asynchronous. If you use Google's [https://developers.google.com/speed/pagespeed/insights/ Pagespeed Insights], it will read:
Eliminate render-blocking JavaScript and CSS in above-the-fold content

==Statcounter async code==
The only thing you need to add is the word "async" inside the script tag at the end. This is new as of HTML5. Your result will look like this:

<nowiki>
<script type="text/javascript">
var sc_project=YOURPROJECTHERE;
var sc_invisible=1;
var sc_security="YOURCODEHERE";
var sc_https=1;
var sc_remove_link=1;
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" +
scJsHost+
"statcounter.com/counter/counter.js' async></"+"script>");
</script>
<noscript><div class="statcounter"><img class="statcounter"
src="http://c.statcounter.com/4776581/0/c22fb62c/1/"
alt="shopify traffic stats"></div></noscript>
</nowiki>