I have an html5 theme that supports IE8 by js however my pages can’t pass Google pagespeed test. I need to defer javascript and CSS. My page has following header:
[CODE]
<!–[if lte IE 8]><script src=”css/ie/html5shiv.js”></script><![endif]–>
<script src=”js/jquery.min.js”></script>
<script src=”js/jquery.dropotron.min.js”></script>
<script src=”js/jquery.scrollgress.min.js”></script>
<script src=”js/skel.min.js”></script>
<script src=”js/skel-layers.min.js”></script>
<script src=”js/init.js”></script>
<noscript>
<link rel=”stylesheet” href=”css/skel.css” />
<link rel=”stylesheet” href=”css/style.css” />
<link rel=”stylesheet” href=”css/style-wide.css” />
</noscript>
<!–[if lte IE 8]><link rel=”stylesheet” href=”css/ie/v8.css” /><![endif]–>
</head>
I tried following code for deferring however my page didn’t display correctly. I don’t know javascript well but I think browser renders only scripts, not css.
[CODE]<!– defer.js begins–>
<script type=”text/javascript”>
function downloadJSAtOnload() {
(function(scripts) {
var i = 0,
l = scripts.length;
for (; i<l; ++i ){
var element = document.createElement(“script”);
element.src = scripts[i];
document.body.appendChild(element);
}
})([‘js/jquery.min.js’,’js/jquery.dropotron.min.js’, ‘js/jquery.scrollgress.min.js’, ‘js/skel.min.js’, ‘js/skel-layers.min.js’, ‘js/init.js’]);
}
if (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!– defer.js ends –>
</body>
Here are my files:
[IMG]
[IMG]
[IMG]
How can I defer javascript and css?