CODEWITHSUNDEEP
javascriptcssgoogle-pagespeedhead.js
Simone Nigro
Simone Nigro

Reputation: 4887

Optimize CSS Delivery with head.js for Google Page Speed fail

My page templates have a assets javascript array with assets list of css, js to use in that page, eg.:

<!DOCTYPE html>
<html>
..........
..........
<script type="text/javascript">
var assets= ["/css/my.css", "/js/my.js", "/js/other.js"];
</script>
<script type="text/javascript" src="/js/head.js" async="async"></script>
</body>
</html>

with head.js (loaded asynchronously), load assets list of page:

// head.core code - v1.0.2 
// head.css3 code - v1.0.0 
// head.load code - v1.0.3
head.load(assets);

now, Google Page Speed on mobile tab (not on desktop) says Optimize CSS Delivery of my.css

but my.css is loaded asynchronously from head.js loaded asynchronously.

What am I doing wrong?

Upvotes: 1

Views: 421

Answers (1)

user1461064
user1461064

Reputation: 48

Optimize CSS delivery need not necessarily mean to load them asynchronously alone. It could also mean that CSS may be bloated and it has class that may not be used to render Above the fold or not on this given page itself.

When developer using tool minify their CSS, this happens where in all CSS across pages are bundled together and is bloated!

One way to handle is use CSS inline that required to render the Above the fold and move rest of the CSS to bottom of the page. If not you can try to use Google Apache or Ngnix page speed plugin. https://developers.google.com/speed/pagespeed/module/

Upvotes: 1

Related Questions