Fix CLS

Hello.

I am ready to fix the CLS through code. Layout shifts on desktop are usually caused by images and iframes without width/height, fonts without reserved space, and blocks that load and redraw above already rendered content.

Plan: I will reproduce the shift in Chrome (Layout Shift regions), find specific elements, set their sizes, and reserve space. First, I will upload the current version to a test hosting, make adjustments, and check the CLS there, then I will transfer it to the main one.

I work with PHP, frontend, and Core Web Vitals constantly. Please provide access to the code and hosting, and let me know which section is experiencing the most issues. I will give you an estimate on timelines and payment after I review the site.

Show original

Translate

Good day!

Fixing CLS through code is my area, and from your screenshots, it's already clear where the problem is, so I won't guess.

The shifts (0.535 + 0.126 in main.home-page) come from the header/navigation (nav#top-nav, contacts-block, right-column, soc-list) and the hero slider (LCP element img.home-header__slide). That is, when the slider and the top menu load, they "push" the layout down — hence the CLS of 0.66.

How I will fix it: I will find all the shifting elements through DevTools (Layout Shift regions) and reserve space for them — I will set the width/height or aspect-ratio for the slider images and icons, fix the height of the slider container, reserve space for contacts/social networks in the header, and if necessary, adjust the fonts (font-display/preload). After this, the CLS will drop into the green zone.

Why PageSpeed "doesn't see it," but Chrome does: on desktop with real loading, the shift manifests, which is why the error appeared in Search Console specifically for the desktop version. I am fixing the real CLS, not just the number in the test.
…
As for the process — exactly as you want: I will raise the current version on a separate hosting, make corrections there, and check the CLS, and only after verification will I transfer the changes to the main hosting. No experiments on the live site.

Access to the code and both hostings will be needed. Please let me know what the site is running on (CMS/engine) — and I will immediately provide a more precise timeline.

Show original

Translate

Hello. The situation where PageSpeed is silent, but Search Console shows an error for CLS is standard. Google simply collects data based on the behavior of real users when they interact with the page and scroll through it.

Since layout shift is an issue strictly related to the frontend, the tech stack of the site won't hinder solving it at all. Regarding the copy on another hosting: we need to first take a look at the site live. Often the cause is some small detail that can be safely fixed immediately without lengthy manipulations. If there is indeed something large in the templates, we will proceed exactly according to your plan, through a test server, so as not to touch production.

Send the link to the site in private messages. I will check what exactly is "jumping" there and provide exact timelines and pricing.

Show original

Translate

▎ Good day, Oleksandr! ▎ ▎ A classic situation: PageSpeed by default measures mobile in laboratory conditions and your desktop shift is not captured, while Chrome and Search Console take real field data — hence the error is specifically with the desktop version. ▎ ▎ I create websites with a stable layout without shifts (CLS is normal) — I can send a screenshot from DevTools → Performance → Layout Shift, where you can see how the culprit is identified. ▎ ▎ Process: I will raise a copy on a test host, find the exact block that jumps through Layout Shift Regions, fix it in the code, check CLS specifically on desktop (and wait for the update in Search Console), and only then will I transfer it to production. ▎ ▎ As a bonus, I will connect auto-monitoring of Core Web Vitals with an alert — so that CLS does not return unnoticed after subsequent content edits. ▎ ▎ A question regarding the matter: desktop CLS is almost always one of two things — late fonts (jump during font swap) or injected blocks without reserved space. Do you have more fonts or dynamic blocks? ▎ ▎ Respectfully, Stanislav

Show original

Translate

Hello, Alexander! I have reviewed your issue. Layout shift (CLS) is a common problem that usually occurs due to the dynamic loading of blocks, banners, or images without predefined sizes (width/height) in CSS/HTML. Because of this, the page "jumps" during loading, and the Search Console immediately flags a Core Web Vitals error. I am ready to track the exact moment of the shift in the desktop version using DevTools, find the problematic element in the code, and fix it to completely eliminate CLS and resolve the error in Google. Please let me know which CMS the site is built on or if it is pure PHP. I would be happy to help, feel free to write!

Show original

Translate

Good day, Oleksandr! CLS, which is visible in Chrome but not caught by PageSpeed — a typical story: the lab test measures clean loading, while the real shift is caused by late elements (banners, fonts, images without specified sizes that jump after rendering). I catch it through DevTools → Performance, in the Layout Shift section — it highlights which block is jumping and why. I will raise a copy on the test host, fix it in the code, check that CLS is normal on desktop, and only then will I transfer it to production. Please provide a link to the site — I will see which block is shifting and name the exact term.

Show original

Translate

To address the issue with Cumulative Layout Shift, I will conduct a deep technical analysis of the code, as visual shifts often occur due to improper handling of asynchronous content loading or the lack of fixed sizes in layout elements. I will identify the causes that trigger these critical metrics in Google Search Console and fix them directly in the code.

After eliminating the causes of the layout shift, I will set up the current version of the site on a test hosting environment, perform comprehensive testing for display accuracy on desktop devices, and ensure that the CLS metric is within the norm. Only after successful verification will I transfer all changes to the main hosting.

I have over 11 years of experience in backend development and server administration, so I take a comprehensive approach to optimization: in addition to fixing the CLS, I will check the Nginx/Apache settings to ensure stable project performance under load.

The cost and exact timelines will depend on the current structure of your code and the scope of changes. Please send the link to the site and access to the project in private messages — I will analyze the state of the code, and we will discuss the budget and work schedule in detail.

Show original

Translate

Good day, Alexander!

CLS optimization is my specialization.

The reasons for CLS usually are:
- Images without explicit width/height dimensions
- Dynamically loaded elements
- Fonts without font-display
- Banners/ads without reserved space
…
What I will do:
- Diagnosis through Chrome DevTools + CLS Report
- Fix all elements causing shifts
- Testing on a staging host
- Transfer changes to the main site

Deadline: 1-2 days
Cost: 200 PLN

Show original

Translate

Good day. I can fix it. I specialize in CWV. I have extensive experience in website optimization.

Show original

Translate

Good day! We have extensive experience in optimizing Core Web Vitals. To eliminate CLS, we will analyze the rendering of elements and fix the sizes of images and blocks through CSS to prevent content shifting during loading. We will implement this through optimizing the critical rendering path and configuring asynchronous resource loading. We are ready to start working promptly.

Show original

Translate