Edit History

Retro All-Stars · March 18

Hi,

I am using version 8.2 with the classic theme. I have some of my category pages (not all of them) that take a long time to load. The problem is Render blocking resources. The CSS file takes too much time to load, so my category images take 11-12 seconds to load. But some of my category pages load correctly... I don't understand... All my images have been compressed to a minimal size already.

I am now looking to modify the stylesheet calls to use critical css so my images can load faster.
I used the service from criticalcss.com

They tell me to put the new critical style in the head of the template. And also move the existing stylesheet block from the head to the end of the body of the page. This is exactly what I did in my template files (I created a custom prestashop theme for my modifications)

The problem is that I get a 500 error with this modification, So I don't know if it's because I can't move this code at the end of the body? This is what I have:

File : layout-both-columns.tpl

...

<head>
    {block name='head'}
      {include file='_partials/head.tpl'}
    {/block}

    
    <style> critical css inserted here </style>

</head>

...

    </main>

    {block name='javascript_bottom'}
      {include file="_partials/password-policy-template.tpl"}
      {include file="_partials/javascript.tpl" javascript=$javascript.bottom}
    {/block}

    {block name='hook_before_body_closing_tag'}
      {hook h='displayBeforeBodyClosingTag'}
    {/block}

    {block name='stylesheets'}
      {include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
    {/block}

</body>

</html>

Can somebody give me hints on how to use critical css with Prestashop. I think I am close to a working solution. I don't want to pay for an expansive module.

Thank you!

Oliver

Retro All-Stars · March 18

Hi,