Astra Theme Approach to Optimizing CLS Scores

CLS (Cumulative Layout Shift)It is a key metric for web page load stability. Lower CLS values help improve page load performance and result in better placement in search results.Astra The theme provides a number of optimizations for CLS issues to help websites improve the stability of the page structure.

What is CLS

CLS indicates whether visual elements move unexpectedly during the loading of a web page. For example, images, text, or buttons load at inconsistent speeds, causing the content of the page to bounce up and down, a phenomenon that increases the CLS score.Lower scores mean more stable pagesThe

Common Causes of CLS

• calligraphic styledelayed loading
• SVG logo without fixed height
• Unstable header display on mobile
• Image not sized
• Dynamic loading of content
• iframe Undefined size

Optimization Methods in Astra

Loading Google Fonts Locally

Traditional fonts are loaded remotely by calling Google's servers, with delays.Astra Provide local loading function:

Path: Astra > Settings > Performance, enable "Load Google Fonts locally"

When enabled, font resources are stored locally at the site, reducing jitter and waiting during loading.

Font preloading

calligraphic stylepreloadedfeature will allow the browser to prioritize key fonts, avoiding text delays in the initial rendering of the page and reducing the number oftypographicalThe phenomenon of mutation.

With Google Fonts stored locally, there is no need to request them remotely, and the fonts load faster, helping to achieve the desired CLS zero score.

Setting the SVG logo height

SVG The image itself does not contain height data. If not set, it may cause the head position to change after loading.Astra It will automatically recognize and add a new name for the logo Set the height to keep the page header stable.

Stabilize mobile header display

Some pages flicker briefly in the header area when loading on mobile devices, and Astra uses static styling and responsive breakpoints to avoid this and improve overall fluidity.

Adding Dimensions to Images

Unsized images are prone to triggering positional misalignment when loaded. When using the Astra When building a page, you can set the width scale or manually enter pixel values in the image module to ensure that the image is pre-spaced before it is loaded.

Avoid dynamically loading content at the top

Common notification bars, subscription alerts, or recommendation blocks that are inserted in the middle or top of the page can cause content to bounce due to delayed loading. It is recommended to place such dynamic areas at the bottom of the page to minimize layout changes.

iframe Add fixed size

Embedded content such as videos, maps,form (document)et al. (and other authors) iframe elementIf an iframe is not pre-sized, it is easy for the page structure to change during loading. Adding specific width and height values to each iframe stabilizes its placement on the page.

summarize

Optimizing the CLS requires synchronizing multiple aspects of font loading, image sizing, header structure, embedded content, and more.Astra Relevant function modules are provided in the theme settings to reduce visual interference caused by element movement during page loading. Keeping the page structure clear and organized helps to improve the overall page quality and access efficiency.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off