/    Sign up×
Community /Pin to ProfileBookmark

Can’t defer javascript and CSS together

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>[/CODE]

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>[/CODE]

Here are my files:
[IMG]http://i59.tinypic.com/i44t43.png[/IMG]

[IMG]http://i60.tinypic.com/im0arr.png[/IMG]

[IMG]http://i58.tinypic.com/2dha3ye.png[/IMG]

How can I defer javascript and css?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Sup3rkirbyOct 17.2014 — There are a few unanswered questions but I guess we'll get to those later as they come up.

Your defer.js script only loads javascript files after the page has loaded, not CSS. And as far as I know there's not really any 'standard' way of adding external CSS to the body of a page. So unfortunately that means external CSS must be in the [B]<head>[/B] of a document. Any further CSS must actually be added to the page inside of [B]<style>[/B] tags (unless you want to mess around with [B][I]@import[/I][/B], but I feel like I've learned that's bad).

So there's nothing I can tell you in the way of speeding up your CSS includes. They'll have to stay in the [B]<head>[/B] and will likely hurt your score. The scripts can be loaded with your defer.js or you could just put them at the bottom of your page before the closing [B]</body>[/B] tag. Typically you want your javascript before the closing [B]</body>[/B] tag anyway and rarely should ever put it in the [B]<head>[/B] of the document.

It's possible that just moving the scripts to the bottom of the document (or using your defer.js) might be enough to get you through your page speed test. Someone can correct me if I'm wrong, but javascript actually haults the page from loading until the javascript has completed, whereas CSS can load as the page loads. So having javascript in your page anywhere before content is awful as it truly does slow down your page. But CSS should be able to load along side the content, having a much smaller impact on page speed.
Copy linkTweet thisAlerts:
@nikelauthorOct 17.2014 — There are a few unanswered questions but I guess we'll get to those later as they come up.

Your defer.js script only loads javascript files after the page has loaded, not CSS. And as far as I know there's not really any 'standard' way of adding external CSS to the body of a page. So unfortunately that means external CSS must be in the [B]<head>[/B] of a document. Any further CSS must actually be added to the page inside of [B]<style>[/B] tags (unless you want to mess around with [B][I]@import[/I][/B], but I feel like I've learned that's bad).

So there's nothing I can tell you in the way of speeding up your CSS includes. They'll have to stay in the [B]<head>[/B] and will likely hurt your score. The scripts can be loaded with your defer.js or you could just put them at the bottom of your page before the closing [B]</body>[/B] tag. Typically you want your javascript before the closing [B]</body>[/B] tag anyway and rarely should ever put it in the [B]<head>[/B] of the document.

It's possible that just moving the scripts to the bottom of the document (or using your defer.js) might be enough to get you through your page speed test. Someone can correct me if I'm wrong, but javascript actually haults the page from loading until the javascript has completed, whereas CSS can load as the page loads. So having javascript in your page anywhere before content is awful as it truly does slow down your page. But CSS should be able to load along side the content, having a much smaller impact on page speed.[/QUOTE]


Thanks for the detailed reply. So I understand that it isn't possible to pass Google pagespeed test for my pages.
Copy linkTweet thisAlerts:
@Tthiw_KlmdNApr 16.2015 — [url=http://www.pointplume.com/test.html][b]Cheap MAC Cosmetics[/b][/url] [url=http://www.cpcelr.org.ar/basetheme/lists.html][b]Oakley Sunglasses Cheap Outlet[/b][/url] [url=http://www.proscenica.com.ar/aleman.html][b]Cheap Ray Bans[/b][/url] [url=http://www.shinranworks.com/letters/mattosho.html][b]Cheap Oakleys[/b][/url] [url=http://www.irapsir.com/Files/universidad.html][b]Cheap Ray Bans Sunglasses Outlet[/b][/url] [url=http://www.a-cally.fr/repertoire/a-cally.html][b]Cheap Oakleys Sunglasses Cheap Sale[/b][/url] [url=http://www.ferrelschiropractic.com/index.html][b]Cheap Ray Bans[/b][/url] [url=http://www.blackburnnursery.com/includes/keyword.html][b]Cheap Ray Ban Sunglasses[/b][/url]
×

Success!

Help @nikel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...