Avoid large layout shifts

Hi there,

your logo is being lazy loaded which is causing the layout to shift.
Most lazy loaders provide an option to exclude images based on a CSS Class.
You can use is-logo-image to exclude the logos

Thank you so much, David.
I added is-logo-image CSS class to exclude the logo in LSCache settings.
Isn't there anything else that causes the layout to shift?

The logo is still lazy loading. ?

There was cache that is why you saw it so. Could you please check the others except for the logo?

Thats working :)
I just ran a Page Speed Insights test on your site. The Lab Data reports 0 CLS on Mobile, and Desktop it is 0.006 which is fine. That shift on desktop is because of the time it takes to load the Font Awesome icons in your menu. But 0.006 is not something to be concerned about.

Thanks, David.
Actually, I do not want to use Font Awesome icons in the menu, but I do not know how to use SVG icons or any other appropriate kind instead of FA icons.
I know that GP supports SVG icons but do not know what and how to do. I would be grateful if you could guide me concerning this issue.

By the way, GTmetrix says the CLS is 0.44, which too high. I added a screenshot link so that you check the details.

You can add inline <svg> icons to the Menu Label.
You can download an SVG icon from the FontAwesome website, open it in a text editor, and copy its HTML into the menu label. But it may require some CSS to style.

CLS - if you look at the Time line images in the GT Metrix report you will see the layout shift is occurring because the advert is being loaded after the content has appeared. Funny thing there is that Google ignores their ads in the Page Speed Insights report.

Not much the Theme can do about that - you may want to check the advert settings as it should define its own containers height to avoid this.

Hello, David!
I downloaded the SVG icons from FA. I opened one of the SVG icons with Notepad++ and it shows the code below. Just to be sure, should I copy this whole code and past it where I want it to appear?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-42.8-9 37.1 15.8 42.8 9 42.8 9z"/></svg>

Thats correct - yes its not a pretty way to add icons lol.

Thank you, David.
Yes, it is not pretty at all.
This is the official FA plugin: https://wordpress.org/plugins/font-awesome/
It says it supports SVG icons as well.
And this is the settings page: https://drive.google.com/file/d/1P9xlaQjrDXF3SeS07BKZQoKdItbIFzvw/view?usp=drivesdk

So, here is my question: Which way is better to use in terms of page speed, official FA plugin with SVG settings or web font without a plugin (current one)?

I haven't actually tried the SVG version on the official plugin. Try that, ill take a look to see how its adding the code, if its inline SVG then that would be the better way to go.

I added it to my other site so that you can check it.

Yep they're inline SVGs - i would go with the Plugin and the SVG icons :)