- This topic has 16 replies, 2 voices, and was last updated 3 years, 3 months ago by David.
-
AuthorPosts
-
December 7, 2020 at 8:57 am #1570590ETO
Hello!
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 SupportHi 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 useis-logo-image
to exclude the logosDecember 8, 2020 at 1:24 pm #1572073ETOThank you so much, David.
I addedis-logo-image
CSS 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 SupportThe logo is still lazy loading. ?
December 10, 2020 at 3:11 am #1574078ETOThere 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 SupportThats working ๐
I just ran a Page Speed Insights test on your site. The Lab Data reports0
CLS on Mobile, and Desktop it is0.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.December 10, 2020 at 6:15 am #1574300ETOThanks, 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.December 10, 2020 at 8:08 am #1574563ETOBy 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 SupportYou 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 #1577091ETOHello, 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>
December 12, 2020 at 4:16 am #1577239DavidStaffCustomer SupportThats correct – yes its not a pretty way to add icons lol.
December 12, 2020 at 10:25 am #1577691ETOThank 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=drivesdkSo, 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 SupportI 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.
December 13, 2020 at 5:33 am #1578408ETOI added it to my other site so that you can check it.
December 13, 2020 at 7:26 am #1578679DavidStaffCustomer SupportYep they’re inline SVGs – i would go with the Plugin and the SVG icons ๐
-
AuthorPosts
- You must be logged in to reply to this topic.