Jump to content
You're invited! Join our 4.6 Live Event on ZOOM 6/24 ×

Community

Cumulative Layout Shift (CLS)


My Sharona
 Share

Go to solution Solved by Adlago,

Recommended Posts

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

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 by Adlago
Link to comment
Share on other sites

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

  • 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

1290266105_Screenshotat2021-01-19232328.thumb.png.e13f0acaefa68c87d7f69207c21fe260.png

 

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=""}
 

 

Link to comment
Share on other sites

On 1/19/2021 at 4:32 PM, Adlago said:

In your theme, you should create a template. For example

1290266105_Screenshotat2021-01-19232328.thumb.png.e13f0acaefa68c87d7f69207c21fe260.png

 

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

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

  • 5 weeks later...
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We use technologies, such as cookies, to customise content and advertising, to provide social media features and to analyse traffic to the site. We also share information about your use of our site with our trusted social media, advertising and analytics partners. See more about cookies and our Privacy Policy