My Sharona Posted January 19, 2021 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
Adlago Posted January 19, 2021 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
My Sharona Posted January 19, 2021 Author 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" ?
Solution Adlago Posted January 19, 2021 Solution 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
Apfelstrudel Posted January 26, 2021 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
My Sharona Posted January 26, 2021 Author 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?
My Sharona Posted January 26, 2021 Author 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.
My Sharona Posted February 25, 2021 Author 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
Recommended Posts