Cumulative Layout Shift Mobile Visualization

Cumulative Layout Shift and its scores are all about the impact moving HTML elements compared to the size of the viewport have (without user interaction) when a page is loaded and/or viewed. The animation below shows the size of the HTML elements moving and visualizes how large of a movement this represents in the mobile viewport while loading. The list of HTML elements responsible for the movement seen in the animation, with the corresponding scores, and the test data can be found in the tables below the animation.

Cumulative Layout Shift Mobile Visualization for https://teejungle.net/collections/2021-collection
Cumulative Layout Shift Mobile Visualization for https://teejungle.net/collections/2021-collection
HTML elements

These HTML elements contribute most to the Cumulative Layout Shifts of the page.

CLS ScoreHTML element
0.0012div#shopify-section-announcement-bar>a.announcement-bar.announcement-bar--link>p.announcement-bar__message>#text
0.0012ul#SiteNav>#text
Mobile test data
CLS Score0.0012
Tested URLhttps://teejungle.net/collections/2021-collection
Status Code200
Tested fromUnited States
Tested with devicePixel 2
User AgentMozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3765.0 Mobile Safari/537.36
Viewport411w by 731h
[device scale factor: 2.625]
Test ran at04:58 on April 19, 2021 (local server time)
Cumulative Layout Shift Desktop Visualization

Cumulative Layout Shift and its scores are all about the impact moving HTML elements compared to the size of the viewport have (without user interaction) when a page is loaded and/or viewed. The animation below shows the size of the HTML elements moving and visualizes how large of a movement this represents in the desktop viewport while loading. The list of HTML elements responsible for the movement seen in the animation, with the corresponding scores, and the test data can be found in the tables below the animation.

Cumulative Layout Shift Desktop Visualization for https://teejungle.net/collections/2021-collection
Cumulative Layout Shift Desktop Visualization for https://teejungle.net/collections/2021-collection
HTML elements

These HTML elements contribute most to the Cumulative Layout Shifts of the page.

CLS ScoreHTML element
0.0001div#shopify-section-header>header.site-header>div.grid.grid--no-gutters.grid--table.site-header__inner>div.grid__item.one-third.medium-up--one-sixth>button.site-header__link.text-link.site-header__toggle-nav.js-drawer-open-left>span.icon__fallback-text>#text
0.0001div#shopify-section-header>header.site-header>div.grid.grid--no-gutters.grid--table.site-header__inner>div.grid__item.one-third.medium-up--one-sixth.text-right>a.site-header__link.site-header__search.js-drawer-open-top
0.0001div#shopify-section-header>header.site-header>div.grid.grid--no-gutters.grid--table.site-header__inner>div.grid__item.one-third.medium-up--one-sixth.text-right>#text
0.0001div#shopify-section-header>header.site-header>div.grid.grid--no-gutters.grid--table.site-header__inner>div.grid__item.one-third.medium-up--one-sixth.text-right>a.site-header__link.site-header__cart.cart-link.js-drawer-open-right
0.6296div#shopify-section-collection-template>div.grid.collection-grid.grid--uniform.grid--no-gutters>div.product-item.grid__item.medium-up--one-third>div.product-item__link-wrapper
0.6296div#shopify-section-collection-template>div.grid.collection-grid.grid--uniform.grid--no-gutters>div.product-item.grid__item.medium-up--one-third>div.product-item__link-wrapper
0.6296div#shopify-section-collection-template>div.grid.collection-grid.grid--uniform.grid--no-gutters>div.product-item.grid__item.medium-up--one-third>div.product-item__link-wrapper
0.6296div#shopify-section-collection-template>div.grid.collection-grid.grid--uniform.grid--no-gutters>div.product-item.grid__item.medium-up--one-third>div.product-item__link-wrapper
0.6296div#shopify-section-collection-template>div.grid.collection-grid.grid--uniform.grid--no-gutters>div.product-item.grid__item.medium-up--one-third>div.product-item__link-wrapper
0.0001ul#SiteNav>#text
0.0001ul#SiteNav>li.action-bar__menu-item>a.action-bar__link
0.0001ul#SiteNav>li.action-bar__menu-item>a.action-bar__link
0.0001ul#SiteNav>li.action-bar__menu-item>a.action-bar__link
0.0001ul#SiteNav>li.action-bar__menu-item>a.action-bar__link
0.0001div#shopify-section-announcement-bar>a.announcement-bar.announcement-bar--link>p.announcement-bar__message>#text
0.0001ul#SiteNav>#text
Desktop test data
CLS Score0.6299 this is a poor score!
Tested URLhttps://teejungle.net/collections/2021-collection
Status Code200
Tested fromUnited States
Tested with devicedesktop
User AgentMozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.0 Safari/537.36
Viewport1920w by 1080h
[device scale factor: 2]
Test ran at04:58 on April 19, 2021 (local server time)
1 Enter URL
2 See analysis

Cookie Interstitials Experimental!
The following fields can be used to click cookie interstitials away. See FAQ on how to use this feature.

Country Experimental!
Select a country from where to test the Cumulative Layout Score. See FAQ on how to use this feature.

FAQ

First of all, keep in mind that using this feature may impact (either positively or negatively) the Cumulative Layout Shift scores. Therefore it is highly recommended to perform tests for both scenarios.

To utilize the experimental feature, fill in the URL and click on "Advanced" under the URL field in the form.

Next, add the text of the HTML element to click, often this is "Accept", "Accept all", "Verstanden" (German) or "OK", etc.

Optionally but highly recommended
Next, check what type of HTML element this text is located in. Currently only 'button', 'div', 'span' and 'a' are supported. If one is missing, contact Fili.

A few tips:

  • The search for the text is case-sensitive. So 'Accept' is not the same as 'accept'.
  • If clicking on the background of the cookie interstitial is enough to accept the cookie notification, often 'div' with a few select sequential words from the notification text will work.
  • This experimental feature tries to find the HTML element with a partial match for the text provided. If no HTML element is provided, the tool will try to find the text only and as a partial match anywhere within the page and click on the first occurance it finds. For example, the word "ok" will match as a partial match with the word "looking" in a paragraph. So in order for this experimental feature to work, the combination needs to be unique on the page, as in the only HTML element with this specific text nested in its tree. If the most direct element does not provide a unique combination, try one a level up, e.g instead of "a" and "OK" try "div" and "OK".
  • You can also click away other type of interstitials, such as newsletter popups. For example, use 'X' or 'Close' as text and select the correct HTML element.
  • If the cookie interstitial has a close function (without clicking on the accept or reject button or link), it is possible to target this instead. See previous point.
  • If the interstitial is not disappearing with the settings submitted, the HTML element and/or text is probably incorrect or not unique. Try again with an unique combination of a HTML element and text.
  • All requests are made from the USA, so if the interstitial changes because of geo specific content, make sure to use the relevant data for US visitors.
As this feature is highly experimental there are no guarantees it will work in your situation, however contact Fili to provide the feedback.

With the Cumulative Layout Shift Debugger it is possible to check the Cumulative Layout Shift from countries other than the United States, and simulate the geographic location of a real user.

To utilize the experimental feature, fill in the URL and click on "Advanced" under the URL field in the form.

Next, select a country (default is the Google Cloud data center in the United States) and click the green "Check CLS" button.

Currently only a handful of countries are available and as this feature is highly experimental there are no guarantees it will work in your situation, however contact Fili to provide feedback.

The test will take several minutes to complete, this is because:

  • The Cumulative Layout Shift debugger will try to download the URL you submit, follow any redirect and try to test the final destination on both desktop and mobile emulated devices.
  • If the Cumulative Layout Shift score is zero, the Cumulative Layout Shift debugger will attempt to test several times before finalizing the report. Each attempt can take up to two minutes.
  • If the HTML code of the webpage changes a lot after the page is loaded, e.g. because of deferred javascript, it will take up to two minutes for a single test to complete.
  • The Cumulative Layout Shift debugger will also attempt to query the Chrome User Experience Report to check the stats there for the specific final destination and the relevant hostname, as these numbers may differ and may impact the Google rankings.
  • Depending on the number of shifts, it can take up to 30 seconds per emulated device to generate a Cumulative Layout Shift animation with all the shifting elements.
Please be patient, and just keep the loading page open until the report appears (the loading page checks every 5 seconds if the results are finished). If you still encounter a problem, contact Fili.

There are several reasons why the Cumulative Layout Shift Debugger is unable to access the URL you provided. For example:

  • Firewalls may be blocking requests originating from Google Cloud IP addresses;
  • The website is so slow it does not render within 30 seconds;
  • The domain name does not resolve or the scheme is wrong (http vs https);
  • The SSL certificate is invalid or self-signed;
  • The webpage is flagged as dangerous, like phishing or malware, and blocked from loading in modern browsers;
  • The page may be blocked due to geo- and/or language based restrictions implemented on the server side.
Any, or a combination, of the potential reasons mentioned above may be the cause why an URL is inaccessible for the Cumulative Layout Shift Debugger.

Doublecheck the URL again for any potential mistakes and/or misspellings, make sure the website loads within 30 seconds and try to whitelist any request (even if just temporary) coming with the string "webvitals.dev" as part of the User Agent String.

Google considers any Cumulative Layout Shift score below 0.1 to be OK or acceptable for the user experience, and although any Cumulative Layout Shift score between 0.01 and 0.1 can always be futher improved no immediate action is required.

Google considers any Cumulative Layout Shift score between 0.1 and 0.25 to be in need of improvement, however depending on the individual movements (shifts of elements within the viewport) the priority is lower than a poor score.

Tip: Try to focus on improving the orange and/or red rectangles in the Cumulative Layout Shift animation as the highest priority to fix and then check the Cumulative Layout Shift score again.

Google considers any Cumulative Layout Shift score above 0.25 to be a poor score, something that requires urgent attention to be addressed, as this translates to a lot of movement (shifts of elements within the viewport) on the page and provides a poor user experience.

The rectangles in the Cumulative Layout Shift animation are representative for the elements moving (shifting in slow-motion) while the webpage is being loaded in the viewport is shown in the animations. Each moving (shifting) element has a Cumulative Layout Shift score associated with it and depending on the severity of the movement (Cumulative Layout Shift) the rectangle is color-coded as green (below 0.1 or acceptable), orange (between 0.1 and 0.25, or needs improvement) and red (above 0.25 or poor user experience).

The Cumulative Layout Shift score in the top left corner is the aggregated total Cumulative Layout Shift score of the entire webpage, as loaded within the viewport. If there is one Cumulative Layout Shift score for the webpage to consider, this is it.

Yes, the link for the Cumulative Layout Shift report is shareable with anyone up to 31 days after generating it. Also the Cumulative Layout Shift animations can be downloaded and saved to locally by right-click and choose "Save image as", or click on the animation and hitting "Ctrl-S" on the keyboard.

Try to improve the Cumulative Layout Shift score of the webpage. Based on the Cumulative Layout Shift animation in the report, focus on identifying in the webpage code what is causing the shifts, pay special attention to the orange and/or red rectangles if any and aim at fixing these first. See also the HTML elements in the table underneath the animation. If you don't know how, talk to your developer and show them this report. You can share the link from this report up to 31 days after generation.

Either congratulations are in order, or while fetching and rendering the webpage one or more of the known issues have impacted the Cumulative Layout Shift score.