Load JS Related Posts DTE With Asynchronous
One that uses jquery or javascript is related posts, because related posts can increase the blog's page view to be good in the SERP. The related posts widget recommended in this article is the related posts widget made by Mas Taufik Nurrohman or also often referred to as DTE related posts (according to the name of the blog).
Besides having several styles that you can choose according to your taste, there are at least 6 styles that you can choose from. This DTE related posts widget is also valid HTML5 even though we use label posts with 2 or more words.
If you want to use the widget, then you have to store the code in your blog template, either CSS or JavaScript. However, it turns out that the JS from the related posts DTE widget is detected by render-blocking javascript on pageSpeed, the JS is as shown below.
<script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>To overcome the render-blocking javascript from JS, I try to save the JS inline or save the code directly without hosting it. That way the render-blocking javascript from JS can be avoided.
However, another problem arises, namely the size of the blog is getting bigger because the JS has a lot of code, so the blog still has heavy loading because the size of the blog is getting bigger.
One way to prevent JS related posts from DTE being detected is render-blocking javascript, you don't need to store the JS inline, but you can load the JS asynchronously.
As you know, DTE related posts javascript is like following:
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript' src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->
After trying to directly add the async="async" JS code to related posts, it turns out that the widget doesn't work. For that, add the script to load JS asynchronously below for JS related posts so that it loads asynchronously.
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="URL JS DI SINI";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload
//]]>
</script>
So it becomes like below:
<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>Related Post:</h4>",
numPosts: 5,
summaryLength: 370,
titleLength: "auto",
thumbnailSize: 80,
noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js";document.body.appendChild(e)}if(window.addEventListener)window.addEventListener("load",downloadJSAtOnload,false);else if(window.attachEvent)window.attachEvent("onload",downloadJSAtOnload);else window.onload=downloadJSAtOnload
//]]>
</script>
</b:if>
<!-- Related Post Widget End -->The asynchronous JS load script above can be used for other JS. Keep in mind that not every widget can be loaded asynchronously.
Post a Comment