Cumulative Layout Shift Improving

Hi @handmadehome,

Thanks for reaching out to us about the issue you find in a GTmetrix report. I’m happy to help you!

I analyzed your site using GTmetrix on my side and see the following about avoiding large layout shifts:

Link to image: https://d.pr/i/uXIGS1

Based on what I’m seeing in the GTmetrix documentation, I think the issue is that a lot of the content shifts when the page loads. Here’s a screen recording I took to see what I mean; it’s a little hard to record what happens but you can sort of see how the content on the page appears to move around as the page loads:

Link to image: https://d.pr/i/hkLkuU

Now, here’s how the Storefront theme demo loads for comparison:

Link to image: https://d.pr/i/sjG0pC

Hopefully it’s clear how the site content loads without any of the content moving (shifting).

It seems something on the site, such as plugin or custom code (most likely CSS code) added to the site is affecting how the Storefront theme would normally behave.

Have you added any custom code to the site? From what I can tell, it looks like the site more or less follows the default Storefront theme styling.

If you haven’t added any code, I suspect the issue lies with a plugin/theme active on the site that’s affecting how the page loads.

It will be great if you could share your site’s current System Status Report, so we can take a closer look at what plugins are installed and what versions you’re using. You can get it by navigating to the WooCommerce / Status section of your site. Once there, click on the Get system report button and then copy it by clicking on the Copy for support button. Then paste it here in a comment when you reply.

Thank you!

Hi @wpniall
Thank you so much for your explanation! There is really a big difference in how my website and storefront load… I tried to find a way to fix this issue but had no success. Could you help me, please? I added my custom CSS and status report below.

Here is all custom CSS I have added:

.product_meta { padding-top: 0px;  color: #e8e8e8; font-size: 10px!important;}

.single-product div.product .product_meta a { padding-top: 0px;  color: #e8e8e8; font-size: 8px;}

.sku_wrapper { padding-top: 0px;  color: #ffffff; font-size: 1px; }

.woocommerce .star-rating span:before {    color: #F7D358;
}

.ivole-all-reviews-shortcode .star-rating span:before {color: #F7D358;}

div.allarworks {
margin: auto;
text-align: center; 
font-size: 40px;}

.woocommerce-loop-category__title .count{
display: none !important;
}

input[type=radio] {
    margin: 10px !important;
}
input[type='radio'] + label {
    display: contents;
}

#uwa_auction_form.uwa_auction_form input {
    width: 102px!important;
}
.uwa_auction_form .bid_button {
    padding: 6px 11px!important;
}

.disabled { 
     pointer-events: none; 
     cursor: default;
}

I also use Code Snippets plugin to add php code

System report:

### WordPress Environment ###

WordPress address (URL): https://www.shop.handmadehome.me
Site address (URL): https://www.shop.handmadehome.me
WC Version: 5.9.0
REST API Version: ? 5.9.0
WC Blocks Version: ? 6.4.0
Action Scheduler Version: ? 3.3.0
WC Admin Version: ? 2.8.0
Log Directory Writable: ?
WP Version: 5.8.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ?
Language: en_US
External object cache: ?

### Server Environment ###

Server Info: Apache/2.4.25 (Debian)
PHP Version: 7.4.25
PHP Post Max Size: 100 MB
PHP Time Limit: 300
PHP Max Input Vars: 10000
cURL Version: 7.52.1
OpenSSL/1.0.2u

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.4.20-MariaDB-1:10.4.20+maria~stretch-log
Max Upload Size: 100 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 5.9.0
WC Database Prefix: wp_
Total Database Size: 95.86MB
Database Data Size: 84.84MB
Database Index Size: 11.02MB
wp_woocommerce_sessions: Data: 7.02MB + Index: 0.23MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.17MB + Index: 0.16MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 2.02MB + Index: 1.13MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 2.52MB + Index: 1.80MB + Engine InnoDB
wp_adtribes_my_conversions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_bv_fw_requests: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_bv_ip_store: Data: 0.20MB + Index: 0.11MB + Engine InnoDB
wp_bv_lp_requests: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.17MB + Index: 0.16MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_mclean_refs: Data: 0.19MB + Index: 0.00MB + Engine InnoDB
wp_mclean_scan: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_options: Data: 2.41MB + Index: 0.28MB + Engine InnoDB
wp_plugin_notes_plus: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_postmeta: Data: 22.55MB + Index: 4.03MB + Engine InnoDB
wp_posts: Data: 5.52MB + Index: 0.72MB + Engine InnoDB
wp_pum_subscribers: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_say_what_strings: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_sfa_abandoned_carts: Data: 1.52MB + Index: 0.00MB + Engine InnoDB
wp_smush_dir_images: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_snippets: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_termmeta: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.13MB + Index: 0.08MB + Engine InnoDB
wp_term_taxonomy: Data: 0.05MB + Index: 0.03MB + Engine InnoDB
wp_tm_taskmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_tm_tasks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_usermeta: Data: 1.52MB + Index: 0.36MB + Engine InnoDB
wp_users: Data: 0.06MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.05MB + Index: 0.09MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_bolt_checkout_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woo_ua_auction_log: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wpforms_tasks_meta: Data: 0.05MB + Index: 0.00MB + Engine InnoDB
wp_wpml_mails: Data: 35.52MB + Index: 0.00MB + Engine InnoDB
wp_xyz_ips_short_code: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_yoast_indexable: Data: 1.52MB + Index: 0.67MB + Engine InnoDB
wp_yoast_indexable_hierarchy: Data: 0.08MB + Index: 0.08MB + Engine InnoDB
wp_yoast_migrations: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_yoast_primary_term: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_yoast_seo_links: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_yoast_seo_meta: Data: 0.45MB + Index: 0.00MB + Engine InnoDB

### Post Type Counts ###

amn_mi-lite: 1
amn_wpforms-lite: 1
attachment: 3581
br_notice: 1
customize_changeset: 2
custom_css: 1
feedback: 2
jetpack_migration: 2
jp_img_sitemap: 4
jp_img_sitemap_index: 2
jp_sitemap: 2
jp_sitemap_master: 2
nav_menu_item: 18
oembed_cache: 4
page: 29
popup: 7
popup_theme: 8
post: 3
product: 215
product_variation: 55
psppnotif_workflow: 4
revision: 32
seedprod: 1
shop_coupon: 21
shop_order: 130
shop_order_refund: 5
wpforms: 8
wp_block: 3
xlwcty_thankyou: 1
yith-wcbm-badge: 1

### Security ###

Secure connection (HTTPS): ?
Hide errors from visitors: ?

### Active Plugins (57) ###

Automated UPS Shipping: by HITShipo – 3.2.1
AfterShip Tracking - All-In-One WooCommerce Order Tracking (Free plan available): by AfterShip – 1.13.9
Akismet Anti-Spam: by Automattic – 4.2.1
Auto Image Attributes From Filename With Bulk Updater: by Arun Basil Lal – 2.1
Category Banner Management for Woocommerce: by theDotstore – 2.2.2
Breeze: by Cloudways – 1.2.6
Code Snippets: by Code Snippets Pro – 2.14.2
Cookie Notice & Compliance for GDPR / CCPA: by Hu-manity.co – 2.1.5
Customer Reviews for WooCommerce: by CusRev – 4.31
Decorator - WooCommerce Email Customizer: by WebToffee – 1.1.1
Disable WooCommerce Bloat: by ospiotr – 2.6.1
Easy Theme and Plugin Upgrades: by Chris Jean – 2.0.2
Easy Widget Columns: by Alexis J. Villegas – 1.2.4
ELEX WooCommerce Bulk Edit Products, Prices & Attributes (Basic): by ELEXtensions – 1.2.1
Facebook for WooCommerce: by Facebook – 2.6.7
Genesis Widget Column Classes: by Jory Hogeveen – 1.3.1
Heartbeat Control by WP Rocket: by WP Rocket – 2.0
Social Login Buttons by Heateor: by Team Heateor – 1.2.10
Homepage Control: by WooThemes – 2.0.3
Insert PHP Code Snippet: by xyzscripts.com – 1.3.2
Jetpack: by Automattic – 10.3
Kadence WooCommerce Email Designer: by Kadence WP – 1.4.8
Mailchimp for WooCommerce: by Mailchimp – 2.5.4
Mailgun: by Mailgun – 1.7.9
Max Mega Menu - StoreFront Integration: by megamenu.com – 1.0.3
Max Mega Menu: by megamenu.com – 2.9.5
Plugin Notes Plus: by Jamie Bergen – 1.2.5
Popup Maker: by Popup Maker – 1.16.3
Product page shipping calculator for WooCommerce: by PI Websolution – 1.2.36
Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.1.5
Say What?: by Ademti Software – 2.0.2
Server IP & Memory Usage Display: by Apasionados
Apasionados del Marketing – 2.1.0

Social Icons for WooCoomerce Emails: by Luiz Bills – 2.1.0
Social Icons Widget & Block by WPZOOM: by WPZOOM – 4.2.2
Title Toggle for Storefront Theme: by Wooassist – 1.2.4
Super Socializer: by Team Heateor – 7.13.26
Temporary Login Without Password: by StoreApps – 1.7.1
Checkout Field Editor for WooCommerce: by ThemeHigh – 1.5.0
Woo Custom Stock Status: by Softound Solutions – 1.3.0
WooCommerce Blocks: by Automattic – 6.4.0
Woo Login Redirect: by WP Doctor – 2.2.4
Preview E-mails for WooCommerce: by Digamber Pradhan – 2.0.1
Product Feed PRO for WooCommerce: by AdTribes.io – 10.9.0
NextMove Lite - Thank You Page for WooCommerce: by XLPlugins – 2.15.0
WooCommerce PayPal Checkout Gateway: by WooCommerce – 2.1.3
WooCommerce Stripe Gateway: by WooCommerce – 5.8.1
Booster for WooCommerce: by Pluggabl LLC – 5.4.8
WooCommerce Login Popup and Shortcodes: by Phpbits Creative Studio – 1.0.2
WooCommerce PayPal Payments: by WooCommerce – 1.6.2
WooCommerce: by Automattic – 5.9.0
Yoast SEO: by Team Yoast – 17.6
WP Crontrol: by John Blackbourn & crontributors – 1.12.0
WP Mail Logging: by Wysija – 1.10.1
WP Rollback: by Impress.org – 1.7.1
Smush Pro: by WPMU DEV – 3.9.3
WPForms Lite: by WPForms – 1.7.1.2
YITH WooCommerce Badge Management: by YITH – 1.7.0

### Inactive Plugins (18) ###

Cart Notices for WooCommerce: by BeRocket – 3.5.7.2
Export Media Library: by Mass Edge Inc. – 3.0.1
Flexible Shipping: by WP Desk – 4.10.1
Gallery Custom Links: by Jordy Meow – 2.0.6
Hello Dolly: by Matt Mullenweg – 1.7.2
MalCare Security - Free Malware Scanner, Protection & Security for WordPress: by MalCare Security – 4.63
Media Cleaner: by Jordy Meow – 6.2.6
Order / Coupon / Subscription Export Import Plugin for WooCommerce (BASIC): by WebToffee – 2.1.4
Print Invoice & Delivery Notes for WooCommerce: by Tyche Softwares – 4.6.4
Product CSV Import Export (BASIC): by WebToffee – 2.1.2
Product Input Fields for WooCommerce: by Tyche Softwares – 1.3.1
Product Reviews Import Export (Basic): by WebToffee – 1.4.4
Query Monitor: by John Blackbourn – 3.7.1
Simple checkout page donations/tips for WooCommerce: by Rynaldo Stoltz – 1.3
Ultimate WooCommerce Auction Pro: by Nitesh Singh – 1.2.8
UpdraftPlus - Backup/Restore: by UpdraftPlus.Com
DavidAnderson – 1.16.65

WooCommerce Customizer: by SkyVerge – 2.7.4
WooCommerce Shipping & Tax: by WooCommerce – 1.25.20

### Dropin Plugins (2) ###

advanced-cache.php: advanced-cache.php
object-cache.php: Object Cache Pro (Drop-in)

### Must Use Plugins (1) ###

Object Cache Pro (MU): by Rhubarb Group – 1.14.1

### Settings ###

API Enabled: –
Force SSL: –
Currency: USD (US$)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: auction (auction)
external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –

### WC Pages ###

Shop base: #5 - /shop/
Cart: #6 - /cart/
Checkout: #7 - /checkout/
My account: #8 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: Storefront
Version: 3.9.1
Author URL: https://woocommerce.com/
Child Theme: ? – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ?

### Templates ###

Overrides: –

### WooCommerce PayPal Payments ###

Onboarded: Yes
Shop country code: CZ
PayPal card processing available in country: No
Pay Later messaging available in country: No
Vault enabled: Yes

### Action Scheduler ###

Complete: 3,267
Oldest: 2021-11-04 09:40:19 +0400
Newest: 2021-11-29 12:25:31 +0400

Pending: 9
Oldest: 2021-11-29 12:40:31 +0400
Newest: 2021-12-03 07:03:56 +0400

### Status report information ###

Generated at: 2021-11-29 12:40:14 +04:00

I’m not good enough at programming to be able to figure out why it happens. I just have some assumptions about Gtmetrix suggestion to Avoid Large Layout Shifts. Maybe it can help a little:

For Element number 1:
div class="header-widget-region" role="complementary"
I have social icons widget (Social Icons Widget & Block by WPZOO) in this area.

Elements 2 and 3:

For Those Who Dare To Dream    …
<div id="content" class="site-content" tabindex="-1">

For Those Who Dare To Dream    …
<div id="post-223" class="post-223 page type-page status-publish has-post-thumbnail hentry" style="background-image: url(&quot;https://www.shop.handmadehome.me/wp-content/uploads…" data-featured-image="https://www.shop.handmadehome.me/wp-content/uploads/2019/11/T2A0211-1024px…">

Here I have no idea why featured images and text (it’s post content) behave so strange…

For elements 4 and 5

HOME SCULPTURES WEARABLE ART CONTACT ABOUT ARTIST FAQ’s CRYSTALLIZED …
<div class="storefront-primary-navigation">

PORTFOLIO
<li id="menu-item-4747" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4747">

I use Max Mega Menu and Max Mega Menu – StoreFront Integration plugins

Thank you so much for your help!

• This reply was modified 3 years ago by handmadehome.
• This reply was modified 3 years ago by handmadehome.
• This reply was modified 3 years ago by handmadehome.

Hey @handmadehome,

There is really a big difference in how my website and storefront load… I tried to find a way to fix this issue but had no success.

Thanks for sharing the CSS you’re using and additional information.

Inspecting your site I can see that there is quite a high number of requests being made to load other files along with several errors recorded in the console:

There are also quite a high number of plugins installed on your website.

I think the best course of action here would be to perform a conflict test to see at which point the cumulative layout shift issue is being introduced. We have guidance in our documentation on [how to test for plugin and theme conflicts](https://woocommerce.com/document/how-to-test-for-conflicts/).

Additionally, if there are any plugins you are not using it would be a good idea to leave these disabled.

Kind regards,

I’ve checked plugins but that didn’t help:( Looks like the problem is caused by dynamic content…. They all are html: like post content (li, div) I could remove some of them. Then the issue disappears. But in this case, my website remains without a featured image and statement on it…

I also made a test for your Storefront demo website: https://gtmetrix.com/reports/themes.woocommerce.com/jXBKjpWU/
Don’t you find it has very similar issues with Cumulative Layout Shift as mine?

@handmadehome

The report indicates the CLS to be low due to the animation on the button and hero section message. We must understand here that tools like GT Metrix scrape the code in text and do not actually see the visual effect or experience the way we do.

In this specific case, the CLS tool seems to think that the animation of the buttons and the text (which is very minor) shifts the layout. That does not seem to be the case.

Tools like GT Metrix do give good pointers for performance. But it may not be 100% practical to implement its suggestion without compromising certain features (like animation in this case).