Symbols are causing large cumulative layout shifts

Posted in: Newspaper
Post count: 361
Topfgartenwelt
#352078
Jun 15, 2020 at 6:26 pm

The used symbols (font-awesome) are causing large layout shifts in Google Page Speed Insights and let the pages drop into a poor rating in the Google Search console. I think it’s exactly the problem that is mentioned here: https://blog.fontawesome.com/how-to-use-asynchronous-font-loading/

In the mobile theme the greatest problems are caused by the symbols for views, comments and also the > in the breadcrumps… Is there a way to remove the > in the breadcrumps? Is it div#td-top-mobile-toggle>i.td-icon-font>::before ?

Greetings Kathrin

Post count: 361
Topfgartenwelt
#352100
Jun 15, 2020 at 10:37 pm

font awesome causes –> “flash of unstyled content” (FOUC)

Post count: 35449
Calin
#352188
Jun 16, 2020 at 10:58 am

Hi,

All these fonts are set on mobile using this file wp-content/plugins/td-composer/mobile/style.css on breadcrumbs is apply this code -> https://i.imgur.com/WzLqvEE.png

Thank you!

Post count: 361
Topfgartenwelt
#352212
Jun 16, 2020 at 1:11 pm

Ok and how can I comment them out? Or what can I do to prevent them from causing layout shifts?

Greetings Kathrin

Post count: 35449
Calin
#352258
Jun 16, 2020 at 4:31 pm

Hi,

You can use the standard comments as in the example from here -> https://www.w3schools.com/css/css_comments.asp

Thank you!

Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.