Jump to content

Prestashop 1.7 how to edit $stylesheets smarty variable


Smokovsky
 Share

Recommended Posts

I'm trying to improve my Google PageSpeed Insigths. In category "Preload key requests" I can see such result:

 

…css/199038f….woff2
4500 ms
…css/19c1b86….woff2
4230 ms
…css/570eb83….woff2
4080 ms


 

Those files are in classic/assets/css/, anyways I couldn't find the place where it's added to code, so I could fix those links to preload. I found a file stylesheets.tpl in classic/templates/_partials/, and I've changed:

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

 

to

{foreach $stylesheets.external as $stylesheet}
  <link rel="preload" as="style" href="{$stylesheet.uri}" media="{$stylesheet.media}">
{/foreach}

 

It worked for the insights, no more warning about it but unfortunately it's breaking website (acting like there were no styles at all). I tried a few more combinations like: as="font", as="font" type="woff2" but it didn't help.

My plan for now is to delete those three css files from $stylesheets.external and add them manualy in head.tpl but I can't locate where to find this object? 

How to edit $stylesheets variable?

Share this post


Link to post
Share on other sites

The fonts are loaded/referenced in theme.css and are not part of $stylesheet (which is assigned by FrontContoller class by the way). But you can try to explicitly preload them by adding them additonally in your stylesheet.tpl file.

 

Share this post


Link to post
Share on other sites

  

18 hours ago, rrataj said:

Those fonts may be attached/included from some css file as a @font-face, not necessary from stylesheets.tpl. Then it is tricky to have it preloaded.

Yeah, those are attached with @font-face in theme.css

 

@JBW

Okay so as I could understand, I should add something like

 {literal}
 <link rel="preload" as="font" href="../../assets/css/570eb83859dc23dd0eec423a49e147fe.woff2">
 {/literal}

before this loop

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="{$stylesheet.media}">
{/foreach}

am I right?

Because the only effect after this modification is one error in console saying:

GET https://website.nvm/index.php?controller=404 net::ERR_ABORTED 404 (Not Found)       (index):61


Could you please provide further help with this?

Edited by Smokovsky (see edit history)

Share this post


Link to post
Share on other sites

17 minutes ago, Smokovsky said:

 

Okay so as I could understand, I should add something like

 {literal}
 <link rel="preload" as="font" href="../../assets/css/570eb83859dc23dd0eec423a49e147fe.woff2">
 {/literal}


Could you please provide further help with this?

@Smokovsky

It should be like:

 {literal}
 <link rel="preload" as="font" href="assets/css/570eb83859dc23dd0eec423a49e147fe.woff2">
 {/literal}

 

Share this post


Link to post
Share on other sites

4 minutes ago, Smokovsky said:

Well it didn't change a bit. Still the same error appears (ofc cleared cache in BO, no files in /cache folder too).

@Smokovsky

Ok, could you try this?


{literal}
	<link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/570eb83859dc23dd0eec423a49e147fe.woff2">
{/literal}

 

  • Thanks 1

Share this post


Link to post
Share on other sites

It worked with one more forward slash between {/literal} and css. Anyways Google PageSpeed still suggest to preload it, and chrome console is now showing a warning

https://website.nvm/themes/theme_name/assets/css/570eb83859dc23dd0eec423a49e147fe.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.


Any further ideas? :(

 

ps. I removed css resposible for loading this exact file from theme.css

url(../css/e79bfd88537def476913f3ed52f4f4b3.eot);src:local("Material Icons"),local("MaterialIcons-Regular"),url(../css/570eb83859dc23dd0eec423a49e147fe.woff2) format("woff2"),

as result Google PageSpeed now wants to preload .woff (earlier woff2) file. I could preload whole set (there is woff2, woff, ttf, svg) but console would overflow with those warnings...

Edited by Smokovsky (see edit history)

Share this post


Link to post
Share on other sites

22 minutes ago, Smokovsky said:

It worked with one more forward slash between {/literal} and css. Anyways Google PageSpeed still suggest to preload it, and chrome console is now showing a warning

https://website.nvm/themes/theme_name/assets/css/570eb83859dc23dd0eec423a49e147fe.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.


Any further ideas? :(

Yes, it looks like you have to add `crossorigin` for preloading fonts: https://github.com/w3c/preload/issues/32

So:

{literal}
	<link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}/css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
{/literal}

But as I mentioned above, "it's tricky" ;) 

Share this post


Link to post
Share on other sites

2 hours ago, Smokovsky said:

I did as you said, anyways warning remains 😶 What more, for a split of second when loading not-cached page, material icons (like cart) are broken (it lasts no longer then 0.1s but still visible for me at least)

This is normal, and this is exactly how fonts preload works. 

Warning may indicate that the font you are preloading is not used on the page, so you can test it and check if it's actually used and if the file is needed.

Diving deeper - some fonts may be used only on some specific pages like: category page or product page. This is theme specific and without knowing more details I can't say more.

Share this post


Link to post
Share on other sites

Okay so I will try to provide some more informations.
The theme is standard classic. This one font I'm testing on is MaterialIcons woff2 file (as I said it is used on every page - for example cart icon). And I think this warning occours when style/font is preloaded and not used within 3 seconds. Is there anything else you would like to know?

Share this post


Link to post
Share on other sites

Well, if my above answer with "crossorigin" is not working for the warning then I have no other ideas :(

Maybe the problem is related to the priorities/order in head or the fact that you don't preload CSS, while preloading fonts. But it's just a blind shot.

Share this post


Link to post
Share on other sites

  • 4 weeks later...

Hi, I had a similar problem to www.kiwigym.ro I added so, seems to work

{literal}
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/7a3ebca0cba2e2c6090e84e1d77e0f94.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/199038f07312bfc6f0aabd3ed6a2b64d.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/19c1b868764c0e4d15a45d3f61250488.woff2" type="font/woff2" crossorigin>
{/literal}

Share this post


Link to post
Share on other sites

  • 3 weeks later...
  • 1 month later...
On 10/26/2020 at 6:10 PM, rrataj said:

Yes, it looks like you have to add `crossorigin` for preloading fonts: https://github.com/w3c/preload/issues/32

So:

{literal}
	<link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}/css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
{/literal}

But as I mentioned above, "it's tricky" ;) 

After suggestion of PageSpeed insights, I would also like to preload a font, which is called by a css file as a @font-face. I am going to try to edit the stylesheets.tpl like you described above, but my problem is that the font file (as well as the css file) are not located under /themes/.../assets, but under /modules/...

I guess I need to replace {/literal}{$urls.theme_assets}{literal} with a snippet for getting the "/modules" url, right?

Share this post


Link to post
Share on other sites

On 10/26/2020 at 8:25 PM, Smokovsky said:

Okay so I will try to provide some more informations.
The theme is standard classic. This one font I'm testing on is MaterialIcons woff2 file (as I said it is used on every page - for example cart icon). And I think this warning occours when style/font is preloaded and not used within 3 seconds. Is there anything else you would like to know?

Did you solve it?

anyone solve it?

Share this post


Link to post
Share on other sites

On 11/23/2020 at 5:55 AM, KiwiGym said:

Hi, I had a similar problem to www.kiwigym.ro I added so, seems to work

{literal}
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/7a3ebca0cba2e2c6090e84e1d77e0f94.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/199038f07312bfc6f0aabd3ed6a2b64d.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="{/literal}{$urls.theme_assets}{literal}css/19c1b868764c0e4d15a45d3f61250488.woff2" type="font/woff2" crossorigin>
{/literal}

In what file you put this code?

Share this post


Link to post
Share on other sites

Hi, I put this code in stylesheets.tpl

In my case location this file is  ..themes/child_classic/templates/_partials

My stylesheets.tpl file:

{literal}
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/7a3ebca0cba2e2c6090e84e1d77e0f94.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/199038f07312bfc6f0aabd3ed6a2b64d.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/19c1b868764c0e4d15a45d3f61250488.woff2" type="font/woff2" crossorigin>
{/literal}

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="print" onload="this.media='all'">
{/foreach}

{foreach $stylesheets.inline as $stylesheet}
  <style>
    {$stylesheet.content}
  </style>
{/foreach}

 

Share this post


Link to post
Share on other sites

  • 2 months later...
On 2/12/2021 at 7:59 AM, NextOne said:

Hi, I put this code in stylesheets.tpl

In my case location this file is  ..themes/child_classic/templates/_partials

My stylesheets.tpl file:

{literal}
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/570eb83859dc23dd0eec423a49e147fe.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/7a3ebca0cba2e2c6090e84e1d77e0f94.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/199038f07312bfc6f0aabd3ed6a2b64d.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="https://poolneo.pl/themes/classic/assets/css/19c1b868764c0e4d15a45d3f61250488.woff2" type="font/woff2" crossorigin>
{/literal}

{foreach $stylesheets.external as $stylesheet}
  <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="print" onload="this.media='all'">
{/foreach}

{foreach $stylesheets.inline as $stylesheet}
  <style>
    {$stylesheet.content}
  </style>
{/foreach}

 

Thank you for this link preload code

Thank you for showing me where to put this code (stylesheet.tpl).

Only problem is that my personal google PageSpeed insight showed other targets for the hrefs that needed preloading... so I discarded the 4 that were proposed in the classic theme example above, and replaced them with the 2  targeted fonts in my own theme... it worked perfectly.

I AM SO HAPPY! I've been stuck with this for days and days.

 

 

Share this post


Link to post
Share on other sites

  • 6 months later...

Hi,

I have followed the great tips in this thread and Google Page Speed has improved some. However, I also have the issue as mentioned by Smokovsky that when the pages load you see it without the stylesheet for a split second (on PC) which irritates me at least.

I have this in my stylesheet.tpl

{literal}
  <link rel="preload" as="font" href="/themes/theme_1515/assets/css/playfair-display-v22-latin-regular.woff2" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="/themes/theme_1515/assets/css/raleway-v22-latin-regular.woff" type="font/woff2" crossorigin>
  <link rel="preload" as="font" href="/themes/theme_1515/montserrat-v18-latin-regular.woff2" type="font/woff2" crossorigin>
  {/literal}

{foreach $stylesheets.external as $stylesheet}
  <link rel="preload" href="{$stylesheet.uri}" as="style">     
  <link rel="stylesheet" href="{$stylesheet.uri}" type="text/css" media="print" onload="this.media='all'; this.onload=null;">
{/foreach}

The shop is smartwall.dk

Share this post


Link to post
Share on other sites

  • 5 months later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More