Jump to content

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...