Smokovsky Posted October 24, 2020 Share Posted October 24, 2020 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? Link to comment Share on other sites More sharing options...
rrataj Posted October 25, 2020 Share Posted October 25, 2020 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. Link to comment Share on other sites More sharing options...
JBW Posted October 26, 2020 Share Posted October 26, 2020 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. Link to comment Share on other sites More sharing options...
Smokovsky Posted October 26, 2020 Author Share Posted October 26, 2020 (edited) 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 October 26, 2020 by Smokovsky (see edit history) Link to comment Share on other sites More sharing options...
rrataj Posted October 26, 2020 Share Posted October 26, 2020 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} Link to comment Share on other sites More sharing options...
Smokovsky Posted October 26, 2020 Author Share Posted October 26, 2020 Well it didn't change a bit. Still the same error appears (ofc cleared cache in BO, no files in /cache folder too). Link to comment Share on other sites More sharing options...
rrataj Posted October 26, 2020 Share Posted October 26, 2020 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} 1 Link to comment Share on other sites More sharing options...
Smokovsky Posted October 26, 2020 Author Share Posted October 26, 2020 (edited) 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 October 26, 2020 by Smokovsky (see edit history) Link to comment Share on other sites More sharing options...
rrataj Posted October 26, 2020 Share Posted October 26, 2020 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" Link to comment Share on other sites More sharing options...
Smokovsky Posted October 26, 2020 Author Share Posted October 26, 2020 (edited) 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) Edited October 26, 2020 by Smokovsky (see edit history) Link to comment Share on other sites More sharing options...
rrataj Posted October 26, 2020 Share Posted October 26, 2020 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. Link to comment Share on other sites More sharing options...
Smokovsky Posted October 26, 2020 Author Share Posted October 26, 2020 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? Link to comment Share on other sites More sharing options...
rrataj Posted October 27, 2020 Share Posted October 27, 2020 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. Link to comment Share on other sites More sharing options...
TamasFelix Posted November 23, 2020 Share Posted November 23, 2020 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} Link to comment Share on other sites More sharing options...
Luigi Donato Posted December 9, 2020 Share Posted December 9, 2020 Not work for me because it is called in second time Link to comment Share on other sites More sharing options...
nik Posted January 28, 2021 Share Posted January 28, 2021 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? Link to comment Share on other sites More sharing options...
Presta_lover Posted January 31, 2021 Share Posted January 31, 2021 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? Link to comment Share on other sites More sharing options...
NextOne Posted February 1, 2021 Share Posted February 1, 2021 Hmm, I think I have solved the problem, check out my page: https://poolneo.pl/ I added the code from @KiwiGym and didn't remove anything in the main style.css Link to comment Share on other sites More sharing options...
petrixstar Posted February 6, 2021 Share Posted February 6, 2021 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? Link to comment Share on other sites More sharing options...
petrixstar Posted February 6, 2021 Share Posted February 6, 2021 On 2/1/2021 at 11:39 AM, NextOne said: Hmm, I think I have solved the problem, check out my page: https://poolneo.pl/ I added the code from @KiwiGym and didn't remove anything in the main style.css where you put this code? Link to comment Share on other sites More sharing options...
NextOne Posted February 12, 2021 Share Posted February 12, 2021 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} Link to comment Share on other sites More sharing options...
Pig3onMort Posted April 29, 2021 Share Posted April 29, 2021 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. Link to comment Share on other sites More sharing options...
Prestafan1234 Posted November 12, 2021 Share Posted November 12, 2021 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 Link to comment Share on other sites More sharing options...
Prestafan1234 Posted April 22, 2022 Share Posted April 22, 2022 Does anyone have a solution to the page loading as text for a split second? The fixes improves Google Page Speed insights ratings, but it does not look good with the flash of text. Link to comment Share on other sites More sharing options...
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