How To Improve CLS For the SVG Logo? - Astra Theme

No results found. Try again with different words?

Search must be at least 3 characters.

    How To Improve CLS For the SVG Logo?

    Cumulative Layout Shift (CLS) is an important metric related to the website’s visual stability. More precisely, this metric tracks unexpected layout shifts that users experience on your website. This document will show you how to improve the CLS score if you’re using the SVG logo for your website.

    When you add a logo image in the .png and .jpg formats to your website, the logo height will be added automatically based on the logo width. Contrary to this, if you upload the SVG image, WordPress will only set the logo width but not height.

    As a result, some logo shrinking is possible, which can cause an unexpected layout shift in the header section. Astra Theme version 3.6.0 improved the way SVG logo images are handled, which prevents unexpected shifts. Hence, this change can help improve the overall CLS score. 

    How Did We Improve This?

    To improve this, we added some JavaScript code that will automatically calculate the height for the SVG logo once it’s imported to your website. After that. the height will be calculated based on the logo width you set in the customizer. You can find more details about this in our Blog article.

    This SVG logo improvement will be reflecting on a standard and transparent header. This issue was not present with the sticky header logo.

    How To Fix This?

    For all new websites, the SVG logo improvement will be applied automatically. Once you upload the SVG logo and set the logo width, the height will be automatically calculated and saved. On the other hand, if you already have a website with an SVG logo, you’ll need to make some minor changes.

    We didn’t apply this improvement to existing websites to avoid any potential issues that could have appeared. In some cases, applying this improvement automatically to logos already in use could result in unwanted changes.

    To apply this improvement to your website, please follow these steps:

    Step 1 – Navigate to Customizer > Header > “Site Identity & Logo” widget;

    Step 2 – Update/edit the logo width value

    Step 3 – Click the “Publish” button to save the changes. 

    Based on the width you just updated, the logo height will be automatically calculated and saved in customizer settings. This will apply improvements to the SVG logo used on your website.

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    [EXTENDED] Cyber Monday Sale

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Don't Miss Our Biggest Discount

    ***LIMITED TIME ONLY***

    100% Unconditional Money-back Guarantee

    Purchase today & lock in your deal!

    Scroll to Top
    Now choose your preferred
    page builder addon
    Choose your preferred page builder addon

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.