prestashop: remove rendering blocking css

If you do a Page Speed test on Google, to make sure your site is loading fast enough and a slow load time is not penalizing your SEO, you can do this hetre:

https://developers.google.com/speed/pagespeed/insights/

One tipical error you'll get is 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

The solution I got was to remove the CSS from header.tpl and add it to footer.tpl
Copy/Paste this code
 
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
{/foreach}
{/if}
 
 
<noscript id="deferred-styles">
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
{/foreach}
{/if}

</noscript>

 
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
else window.addEventListener('load', loadDeferredStyles);
</script>
 
 
 
 
Tool to Generate the Critical Path
 
https://www.sitelocity.com/critical-path-css-generator

Leave a Reply

Your email address will not be published. Required fields are marked *