Cumulative Layout Shift Improving
-
Hi, can you help, please!
Gtmetrix says that my Cumulative Layout Shift 0.41
Looks like the main problem is the featured image on home page.
It changes its size several times being loading. And also space above the menu changes. Is there any way to fix it?
Thanks!The page I need help with: [log in to see the link]
-
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/uXIGS1Based 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/hkLkuUNow, here’s how the Storefront theme demo loads for comparison:
Link to image: https://d.pr/i/sjG0pCHopefully 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 / Statussection of your site. Once there, click on theGet system reportbutton and then copy it by clicking on theCopy for supportbutton. 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:00I’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("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!
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,
- The topic ‘Cumulative Layout Shift Improving’ is closed to new replies.
