After switching to the OpenLiteSpeed web server, I was running my site using the LiteSpeed Cache plugin. However, I received a notification from Google Search Console that a CLS error had occurred, but when I checked with the audit tool, there was no problem.
After testing with browser resizing, I found that the site title was stretching when pressing refresh multiple times. This seemed to be the main cause of the CLS error, and I thought it could have a negative impact on SEO (Search Engine Optimization).
I took a few steps to fix the issue. First, I changed the LiteSpeed Cache settings from the aggressive and extreme settings to the recommended settings. Also, to prevent the site title from stretching, I added some CSS code to fix the title so that it stays fixed without breaking the line.
After completing the modification, I checked Google Search Console and saw that the number of CLS errors had gradually decreased. If you, like me, are having trouble finding the cause of the CLS error, please check the site title and try to solve the problem using the method described below.
Table of Contents
LiteSpeed Cache Presets
Finding the cause of the CLS error while changing the LiteSpeed Cache settings can be difficult, so the easiest way is to try changing the preset to Advanced (Recommended).
In my case, I had an issue where the layout was broken when I used the aggressive and extreme settings, so I switched to the recommended settings and it was resolved. However, the issue that this method did not resolve was the site title stretching.
I checked the Astra theme community about this issue and found that several users had contacted me with the same issue. The response was that it was an issue with the cache plugin and that it needed to be addressed by the Astra theme.
Referring to this answer, if it is an issue with the Astra theme, the issue should not occur when changing to a different theme, but when I actually changed the theme, the site title still stretched.
Since the issue persisted even after changing the theme, I went back to various articles and the solution I finally found was to prevent line breaks in the site title so it wouldn’t stretch.
Additional CSS – Prevent line breaks
In your WordPress admin page, go to Appearance > Customize, then select Additional CSS. Then, add the code below to prevent the site title from breaking.
.site-title {
white-space: nowrap; /* 텍스트 줄바꿈 방지 */
overflow: hidden; /* 넘칠 경우 숨김 */
text-overflow: ellipsis; /* 넘칠 경우 '...' 표시 */
max-width: 300px; /* 원하는 최대 너비로 조정 */
}The above code prevents text from wrapping, hides it when it overflows, and sets a maximum width to prevent the layout from changing. After adding this code, clear the cache, resize the browser, and refresh, you can see that the site title is now stretched.
CLS issues can negatively impact your SEO (search engine optimization), so it’s best to resolve them as quickly as possible. After installing the CLS measurement tool, try resizing your browser on both mobile and desktop environments to see where the issue occurs.
If you are experiencing issues, you can try disabling CSS and JS binding in your cache plugin and if it is the cause, add the problematic part to the exclusion list to resolve the issue.
If the issue is with your theme and not with the cache plugin, you can try adding CSS code to add some margin to that part or fix it so that the layout doesn’t change.
▶ How to set up WordPress .htaccess to work
▶ WordPress Widgets: How to Switch to the Older (Classic) Version
▶ Google Fonts – How to Speed Things Up by Removing Them in WordPress
