[Resolved] Avoid large layout shifts

Home Forums Support [Resolved] Avoid large layout shifts

Home Forums Support Avoid large layout shifts

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1570590
    ETO

    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?

    #1570747
    David
    Staff
    Customer Support

    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

    #1572073
    ETO

    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?

    #1572458
    David
    Staff
    Customer Support

    The logo is still lazy loading. ?

    #1574078
    ETO

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

    #1574190
    David
    Staff
    Customer Support

    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.

    #1574300
    ETO

    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.

    #1574563
    ETO

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

    #1574577
    David
    Staff
    Customer 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.

    #1577091
    ETO

    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>

    #1577239
    David
    Staff
    Customer Support

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

    #1577691
    ETO

    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)?

    #1578346
    David
    Staff
    Customer Support

    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.

    #1578408
    ETO

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

    #1578679
    David
    Staff
    Customer Support

    Yep they’re inline SVGs – i would go with the Plugin and the SVG icons ๐Ÿ™‚

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