Hello - this ticket is actually to share SEO optimisation I have made to the theme. If anybody is interested perhaps feel free to use it. I'm sure it can be improved even further.
By default the theme's CSS & JS load in the header and this causes lower score in search engines as it block above-the-fold content rendering. In Prestashop you have the option to "Move Javascript to the end" from Avanced Parameters -> Performance -> CCC (COMBINE, COMPRESS AND CACHE). However I'm not sure why this is not working. Instead what you can do is open header.tpl from the theme and cut the following code:
You then edit footer.tpl and paste the code just before the closing </body> tag. This way you will have your JS load at the end instead of the beginning of loading the page. If you you like you can go even further and move the CSS code there as well. This will help further in improving your score and visual load times BUT with one drawback for your Internet Explorer users (Firefox, Chrome, MS Edge are fine, it's just the IE that suffers from this). The drawback is that the customers on initial page load will see the page without css and then suddenly it would be. It's for some miliseconds that they will see the page displaying strangely but it might be irritating so better test before putting on your live site.
So to move both CSS and JS open header.tpl from the theme folder and cut the following code:
Hello - this ticket is actually to share SEO optimisation I have made to the theme. If anybody is interested perhaps feel free to use it. I'm sure it can be improved even further.
By default the theme's CSS & JS load in the header and this causes lower score in search engines as it block above-the-fold content rendering. In Prestashop you have the option to "Move Javascript to the end" from Avanced Parameters -> Performance -> CCC (COMBINE, COMPRESS AND CACHE). However I'm not sure why this is not working. Instead what you can do is open header.tpl from the theme and cut the following code:
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}
You then edit footer.tpl and paste the code just before the closing </body> tag. This way you will have your JS load at the end instead of the beginning of loading the page. If you you like you can go even further and move the CSS code there as well. This will help further in improving your score and visual load times BUT with one drawback for your Internet Explorer users (Firefox, Chrome, MS Edge are fine, it's just the IE that suffers from this). The drawback is that the customers on initial page load will see the page without css and then suddenly it would be. It's for some miliseconds that they will see the page displaying strangely but it might be irritating so better test before putting on your live site.
So to move both CSS and JS open header.tpl from the theme folder and cut the following 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}
{if isset($js_defer) && !$js_defer && isset($js_files) && isset($js_def)}
{$js_def}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri|escape:'html':'UTF-8'}"></script>
{/foreach}
{/if}
{if (isset($FIELD_customCSS))}
<!-- Start Custom CSS -->
<style>{$FIELD_customCSS}</style>
<!-- End Custom CSS -->
{/if}
and the following code:
<link rel="stylesheet" href="http{if Tools::usingSecureMode()}s{/if}://fonts.googleapis.com/css?family=Open+Sans:300,600&subset=latin,latin-ext" type="text/css" media="all" />
Then again paste it just before the closing </body> tag in the footer.tpl
Note: While cutting and pasting just leave {$HOOK_HEADER} code in the header.tpl as it needs to be there and is just between the CSS and JS code.
Hi Kiril,
Thank you very much. We do appreciate it.
Best Regards,
Criss - FieldThemes