Eliminate render-blocking JavaScript and CSS in above-the-fold content
Permalink
Is it possible to overcome this? (Google Site Speed)
@drm92
What version of Concrete are you using?
If it is 5.6.x or below, you can install Miser which will do as you ask
http://www.concrete5.org/community/forums/customizing_c5/miser-web-...
What version of Concrete are you using?
If it is 5.6.x or below, you can install Miser which will do as you ask
http://www.concrete5.org/community/forums/customizing_c5/miser-web-...
The answer is complicated.
First off, don't worry about render-blocking if you aren't doing all the other basic optimizations like gzip, image compression, file concatenation, and file minification. Once you have done all those things and you still are looking for better performance, then you can look into render-blocking.
The good news is that concrete 5.7 has an asset management system to deal with combining and minifying files.
http://www.concrete5.org/community/forums/5-7-discussion/asset-cach...
Render blocking JavaScript
Some JavaScript can be made to stop render blocking by setting it to "async" or putting the JavaScript in the body of the HTML (right before </body>). What makes it complicated is that depending on what the JavaScript does, it needs to be in the HTML <head>.
Render blocking CSS
The main approach to prevent CSS render blocking is inlining the CSS on a per page basis. Inlining takes the "above the fold" critical CSS required to render that page and puts in it in the HTML <head>. This way the entire site CSS doesn't have to be read to render that one specific page. Where this technique shines is with larger sites with a lot of CSS.
There are various tools for extracting the "above the fold" CSS.
Here are a few examples:
https://github.com/filamentgroup/criticalCSS...
http://jonassebastianohlsson.com/criticalpathcssgenerator/...
https://github.com/pocketjoso/penthouse...
The main take away is that for smaller static sites it is a very manageable task. Where thinks get very complicated is making this work with a content management system. It would be very interesting to see if concrete5 could implement these techniques.
For more technical information on the topic, check this out.
https://developers.google.com/web/fundamentals/performance/critical-...
This covers some of the ways the Guardian newspaper website was redesigned.
Breaking news at 1000ms – Patrick Hamann at Front-Trends 2014
http://vimeo.com/100505617 - video
https://speakerdeck.com/patrickhamann/breaking-news-at-1000ms-front-... - slides