Invision Community 4: SEO, prepare for v5 and dormant account notifications Matt November 11, 2024Nov 11
Posted January 19, 20214 yr 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
January 19, 20214 yr 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, 20214 yr by Adlago
January 19, 20214 yr Author 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" ?
January 19, 20214 yr Solution 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=""}
January 26, 20213 yr 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.
January 26, 20213 yr Author 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?
January 26, 20213 yr Author 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.
February 25, 20213 yr Author 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, 20213 yr by My Sharona
