Retro All-Stars Posted March 18 Share Posted March 18 (edited) 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} <!-- MODIFICATION Critical CSS --> <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 Edited March 18 by Retro All-Stars correcting spelling mistake (see edit history) Link to comment Share on other sites More sharing options...
Prestashop Addict Posted March 18 Share Posted March 18 In smarty template you must use literal tag for style and script {literal}<style> critical css inserted here </style>{/literal} Link to comment Share on other sites More sharing options...
Retro All-Stars Posted March 18 Author Share Posted March 18 Ok thank you, I don't have the 500 error now. But it didn't solve my speed issue... Here is the info from google Chrome : That image is only 6kb in size... Another web page test gives me this additional information: I really don't understand how category pages don't behave the same... some pages can take 20-30 seconds to load and others take 3-4 seconds. The style of the categories is the same. With small cover images. There are products in those categories but they are not activated right now (not visible to the public). My website is still in development stage. I have 4000 products in my catalog. Only 2 of them are activated for testing. Oliver Link to comment Share on other sites More sharing options...
Retro All-Stars Posted March 19 Author Share Posted March 19 Ok, I found that the speed issue is coming from the faceted search module. Now my site is faster after configuring the module correctly. thank you SOLVED Link to comment Share on other sites More sharing options...
El Patron Posted March 21 Share Posted March 21 https://prestaheroes.com/collections/performance/products/csspro-eliminate-render-block-css?variant=43015592771791 Link to comment Share on other sites More sharing options...
.png.022b5452a8f28f552bc9430097a16da2.png)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now