- This topic has 16 replies, 2 voices, and was last updated 1 year, 6 months ago by David.
December 7, 2020 at 8:57 am #1570590ETO
When I test my website with Google PageSpeed Insight, it says “Avoid large layout shifts 5 elements found”.
Could you please check it to see what causes this problem?December 7, 2020 at 11:51 am #1570747DavidStaffCustomer Support
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-imageto exclude the logosDecember 8, 2020 at 1:24 pm #1572073ETO
Thank you so much, David.
is-logo-imageCSS class to exclude the logo in LSCache settings.
Isn’t there anything else that causes the layout to shift?December 9, 2020 at 1:29 am #1572458DavidStaffCustomer SupportDecember 10, 2020 at 3:11 am #1574078ETO
There was cache that is why you saw it so. Could you please check the others except for the logo?December 10, 2020 at 4:49 am #1574190DavidStaffCustomer Support
Thats working 🙂
I just ran a Page Speed Insights test on your site. The Lab Data reports
0CLS on Mobile, and Desktop it is
0.006which 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.December 10, 2020 at 6:15 am #1574300ETO
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.December 10, 2020 at 8:08 am #1574563ETO
By the way, GTmetrix says the CLS is 0.44, which too high. I added a screenshot link so that you check the details.December 10, 2020 at 8:23 am #1574577DavidStaffCustomer Support
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.December 12, 2020 at 1:05 am #1577091ETO
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>December 12, 2020 at 4:16 am #1577239DavidStaffCustomer SupportDecember 12, 2020 at 10:25 am #1577691ETO
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)?December 13, 2020 at 4:27 am #1578346DavidStaffCustomer SupportDecember 13, 2020 at 5:33 am #1578408ETO
I added it to my other site so that you can check it.December 13, 2020 at 7:26 am #1578679
- You must be logged in to reply to this topic.