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.