My Sharona Posted January 19, 2021 Share Posted January 19, 2021 Via my Google Search Console, I am showing that a number of pages are loading unnecessarily slow in a mobile environment. The most time consuming aspect of these is the webfont load (showing as, "…font/fontawesome-webfont.woff2?v=4.7.0"). The recommended solution is to declare preload links. <head> ... <link rel="preload" href="styles.css" as="style"> <link rel="preload" href="ui.js" as="script"> ... </head> Can this be added somewhere in the global template(s)? TYIA Link to comment Share on other sites More sharing options...
Adlago Posted January 19, 2021 Share Posted January 19, 2021 (edited) For preload font awesome use this, in your head <link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous"> For preload css, see this Edited January 19, 2021 by Adlago My Sharona 1 Link to comment Share on other sites More sharing options...
My Sharona Posted January 19, 2021 Author Share Posted January 19, 2021 30 minutes ago, Adlago said: For preload font awesome use this, in your head <link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous"> For preload css, see this Thank you, @Adlago I read your thread but like the last user there, I am unsure where exactly to place this code. Would it be: core> front> global> global template or might it work in the "custom css" ? Link to comment Share on other sites More sharing options...
Solution Adlago Posted January 19, 2021 Solution Share Posted January 19, 2021 18 minutes ago, My Sharona said: I read your thread but like the last user there, I am unsure where exactly to place this code. Would it be: core> front> global> global template or might it work in the "custom css" ? In your theme, you should create a template. For example Open this template core_global_analysis/preload_css, and add this code {{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}} <link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style"> {{endforeach}} and Save. Open your global template, and add before {template="includeMeta" app="core" group="global" location="global" params=""} This {template="preload_css" app="core" group="analysis" location="global" params=""} My Sharona and Ibai 2 Link to comment Share on other sites More sharing options...
Apfelstrudel Posted January 26, 2021 Share Posted January 26, 2021 May I ask why this step is not part of the standard suite? From my point of view it should be. I also have thousands of CLS errors in Search Console. But I assume they also come from lazy load being enabled. xtech 1 Link to comment Share on other sites More sharing options...
My Sharona Posted January 26, 2021 Author Share Posted January 26, 2021 On 1/19/2021 at 4:32 PM, Adlago said: In your theme, you should create a template. For example Open this template core_global_analysis/preload_css, and add this code {{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}} <link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\Theme::i()->cssCacheBustKey() )"}' as="style"> {{endforeach}} and Save. Open your global template, and add before {template="includeMeta" app="core" group="global" location="global" params=""} This {template="preload_css" app="core" group="analysis" location="global" params=""} Apologies for the delay in responding @Adlago. Thank you much for the explanation. Will attempt to implement later this week. One last question if you don't mind.. Is there a reason why this would not work by simply inserting it into the CSS "Custom" template? Link to comment Share on other sites More sharing options...
My Sharona Posted January 26, 2021 Author Share Posted January 26, 2021 5 hours ago, Apfelstrudel said: May I ask why this step is not part of the standard suite? From my point of view it should be. I also have thousands of CLS errors in Search Console. But I assume they also come from lazy load being enabled. I don't know about you @Apfelstrudel but my Console Errors began showing up after this last patch, 4.5.4.2. Link to comment Share on other sites More sharing options...
My Sharona Posted February 25, 2021 Author Share Posted February 25, 2021 (edited) Just circling back here and wanting to give some love to @Adlago after the fix was validated by Google Analytics. This fix does solve the CLS issue we were/are experiencing. Thank you sir! Edited February 25, 2021 by My Sharona Adlago 1 Link to comment Share on other sites More sharing options...
Recommended Posts