Skip to content
100% Free Generator

CLS element finder

List likely layout-shifting elements and prioritize what to inspect first for CLS issues.

Build your output

Fill in the details below, generate a first draft, then refine the output before publishing it live.

Example input: hero image without dimensions sticky banner injected after load
100% Free CLS element finder Tool

About the Free CLS element finder Tool

Review layout shift candidates and likely CLS-causing elements. Identify late-loading images, embeds, and banners that shift content.

What is the CLS element finder?

CLS, or Cumulative Layout Shift, measures how much a page's content moves around while it loads. The CLS element finder reviews layout shift candidates, the elements that are likely to move as a page loads, and points out the ones most likely to be causing the shift. It is aimed at developers and SEOs who know their page scores badly on Core Web Vitals but cannot immediately see which elements are to blame.

You enter information about the elements on your page, such as images, embeds, and blocks of text that load late or resize after appearing, and the server reviews which ones are likely shift candidates. The tool is an analysis aid rather than a live monitor. It helps you reason about the elements that cause layout shift and decide which ones need to be stabilized.

What the CLS element finder reviews

The review centers on the characteristics that make an element likely to shift the layout. Elements that appear without reserved space, such as images loading without set dimensions, are classic candidates because they push content down the moment they arrive. The tool reviews the candidates you describe and highlights the ones with the classic signatures of layout shift.

Beyond images, the review considers elements whose size or position changes after the page starts rendering. Late-loading ads, embedded media, fonts that render with unexpected dimensions, and dynamically injected content all fall into this category. For each candidate you enter, the tool assesses how likely it is to move surrounding content, which is what actually counts toward CLS.

The output is a ranked sense of which elements deserve your attention first. An element that shifts once at the top of the page hurts the score far more than one that moves at the bottom after the user has scrolled away. By focusing the review on the candidates most likely to cause movement, the tool helps you spend your fix time on the elements that matter to your score.

Beyond individual elements, the review supports reasoning about page-level patterns. A page whose images all load without reserved dimensions has a systematic problem, not a series of one-off issues, and fixing the pattern once, such as in a shared template, corrects every instance. The same logic applies to embeds and ad units that are injected by a common script. Recognizing the pattern behind the candidates is what lets you fix the source rather than the symptoms.

Interaction with other parts of the page is part of the picture too. An element can be stable on its own but trigger shift when it interacts with a slow-loading sibling, a font that renders late, or a container that resizes. The review helps you think through those relationships so the fix you apply does not simply move the shift from one element to another.

How to use the CLS element finder

You get the best results by gathering the layout candidates on your page before you start.

  1. Open the page you want to review and note the elements that load after the initial render, such as images, embeds, or ad slots.
  2. Identify which of those elements lack reserved space, meaning the page does not know their size before they arrive.
  3. Enter the candidates into the tool, including what type of element each one is and where it sits on the page.
  4. Submit the form and wait for the server to review the candidates for layout shift risk.
  5. Read the assessment, then apply the recommended stabilization, such as reserving space with explicit dimensions, to the highest-risk elements.

Re-check after your fixes. Layout shift is sensitive to small changes, so confirm each stabilization actually moves the candidate out of the risk group before moving on to the next one.

How to get better results

  • Enter every late-loading element on the page, not just the ones you already suspect, so the review is based on the full picture rather than your assumptions.
  • Note where each element sits on the page. Elements near the top of the viewport shift more than those far below it, and position matters to the assessment.
  • Include the loading behavior in your entry, such as whether the element has known dimensions, because that is the strongest signal of shift risk.
  • Review your pages at several viewport sizes, since an element that is stable on desktop can shift on a narrow phone screen.
  • Combine the review with a field measurement of your CLS score so you can confirm that fixing the flagged candidates actually moves the number.
  • Treat the output as a starting point for testing, not a verdict. Resize the viewport and reload to confirm each element's behavior in practice.
  • Review template-level elements separately from page-specific ones, since a fix applied once in a shared template corrects every page that uses it.

Why the CLS element finder matters

Cumulative Layout Shift is one of the three Core Web Vitals, and it is the one users feel most directly. A page whose content jumps around as it loads is confusing to read, easy to mis-tap, and genuinely unpleasant to use. A visitor who tries to click a button and hits a moving element instead is a visitor who may not come back. Search engines factor CLS into their assessment of page experience, so a high-shift page carries both a usability cost and a ranking cost.

What makes CLS frustrating is that it is often not obvious from looking at a finished page. The shift happens during the loading window, and by the time the page is stable, there is no visible sign of the movement. The finder helps by directing your attention to the elements that are structurally likely to shift, so you do not have to guess or watch page loads frame by frame. That turns a vague Core Web Vitals problem into a concrete list of elements to fix.

There is also a maintenance angle. Layout shift problems tend to creep back in whenever a page gains a new component, such as a video embed, a newsletter form, or a new ad slot. Each addition is a potential new candidate, and pages that used to be stable can regress without anyone noticing. Reviewing candidates as part of the launch process, rather than only when the score drops, keeps the page experience steady over the life of the site.

When to use the CLS element finder

  • When your page experience reports a poor CLS score and you need to identify which elements are responsible.
  • When you are redesigning a page or adding new components, such as ads or embeds, and want to review the shift risk before launch.
  • When you have just fixed an element you believe caused shift and want to review the remaining candidates.
  • When you want a consistent way to review layout stability across many templates without inspecting each page manually.
  • When you add new components to existing pages, such as embeds, forms, or ad units, and want to check the shift risk before they go live.

Related SEO Tools

Complete your SEO workflow with these related free tools:

  • Keyword research - Research the search volume, CPC, and competition of keywords.
  • User-Agent parser - Parse a User-Agent into readable individual components. Identify browser, OS, and device details from a UA string.
  • URL parser - Parse a URL into readable individual components. Break down scheme, host, path, query, and fragment for inspection.
  • Word density counter - Count the number and density of each word in a text. Check keyword balance and avoid overuse in content.

Related SEO Guides

Learn more about this topic with our in-depth guides:

Frequently asked questions

What counts as a layout shift candidate?

Any element whose arrival or resizing can move content that has already been displayed. The most common candidates are images without reserved dimensions, late-loading ads, embedded media, and content injected after the initial render.

Does the tool measure my page's actual CLS score?

No. The finder reviews the layout shift candidates you enter and assesses which are likely to cause movement. Actual CLS measurement comes from performance tools and field data; the finder supports that work by focusing your attention on the right elements.

Is this tool a live page monitor?

No. You enter the candidates you have identified on your page, and the server reviews them against the characteristics of layout-shift-causing elements. It is an analysis aid, not a service that watches your live page.

How do I fix an element the tool flags as risky?

The standard fix is to reserve the element's space before it loads, most commonly by giving images and embeds explicit dimensions, and to avoid injecting content into space that is already displayed. After applying the fix, re-check the element and confirm the shift is gone.

Do layout shifts below the fold matter?

Less so, because CLS is measured against the visible viewport. An element that shifts far down the page after the user has scrolled away has less impact than one that moves near the top. That is why the position of each candidate matters when you review your page.

Can layout shift be caused by fonts?

Yes. If a page's text first renders with one font and then reflows when a different font loads with different metrics, the text shifts. It is a quieter cause than images and ads, which is why it is easy to miss, but font-loading behavior is a legitimate candidate to include in your review.

What is the most common fix for a layout shift element?

Reserving the element's space before it loads. For images, that means declaring dimensions so the page knows the space from the start. For embeds and ads, it means allocating a container of the right size. Reserving space prevents the shift instead of repairing it after the fact.

Should I review every element on every page?

No, but review the elements that commonly shift: anything that loads after the first render, changes size after appearing, or has no reserved space. Templates make this efficient, since fixing a pattern in one template corrects every page built from it.