Woocommerce Product Page CLS

  • Resolved slservice33

    (@slservice33)


    3 years, 5 months ago

    Cumulative Layout Shift

    Hi, I cant see what causes high CLS (tested by pagespeed insights) on all my woocommerce product pages but things are shifting about a lot during page loading

    All my other webpages are fine for CLS.

    They are just standard woocommerce product pages automatically generated by woocommerce.

    I’ve checked CSS and JS settings in litespeed cache and these aren’t effecting CLS for woocommerce pages.

    Any help much appreciated

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,

    Your product pages load without shifting layout for me. So clearing your browser cache may resolve the issue.

    If it still doesn’t, please share a copy of your site’s System Status. You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”.? Once you’ve done that, paste it here in your response.

    Thread Starter slservice33

    (@slservice33)

    Hi the CLS is 1.3 seconds on mobile and 0.3 on desktop according to https://developers.google.com/speed/pagespeed/insights/

    While this may not sound like much Google consider this very poor for cumulative layout shift and rate my woocommerce product pages as “Failing” and “poor performance”
    (my non woocommerce pages have CLS 0.001s mobile 0s desktop)

    Thread Starter slservice33

    (@slservice33)

    woocommerce system report

    
### WordPress Environment ###

WordPress address (URL): https://www.slservice.net
Site address (URL): https://www.slservice.net
WC Version: 5.3.0
REST API Version: ? 5.3.0
WC Blocks Version: ? 4.9.1
Action Scheduler Version: ? 3.1.6
WC Admin Version: ? 2.2.6
Log Directory Writable: ?
WP Version: 5.7.2
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: –
WP Cron: ?
Language: en_GB
External object cache: –

### Server Environment ###

Server Info: LiteSpeed
PHP Version: 7.4.11
PHP Post Max Size: 256 MB
PHP Time Limit: 240
PHP Max Input Vars: 5000
cURL Version: 7.71.0
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.4.14-MariaDB-cll-lve
Max Upload Size: 256 MB
Default Timezone is UTC: ?
fsockopen/cURL: ?
SoapClient: ?
DOMDocument: ?
GZip: ?
Multibyte String: ?
Remote Post: ?
Remote Get: ?

### Database ###

WC Database Version: 5.3.0
WC Database Prefix: wp_
Total Database Size: 96.09MB
Database Data Size: 92.22MB
Database Index Size: 3.87MB
wp_woocommerce_sessions: Data: 0.28MB + Index: 0.02MB + 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.17MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.06MB + Index: 0.14MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.05MB + 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.03MB + 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: 0.06MB + Index: 0.11MB + 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: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_ce4wp_abandoned_checkout: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_e_submissions: Data: 0.02MB + Index: 0.27MB + Engine InnoDB
wp_e_submissions_actions_log: Data: 0.02MB + Index: 0.11MB + Engine InnoDB
wp_e_submissions_values: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_litespeed_cssjs: Data: 37.52MB + Index: 0.11MB + Engine InnoDB
wp_litespeed_img_optm: Data: 0.19MB + Index: 0.11MB + Engine InnoDB
wp_litespeed_img_optming: Data: 0.02MB + Index: 0.05MB + 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_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_options: Data: 7.52MB + Index: 0.14MB + Engine InnoDB
wp_postmeta: Data: 42.52MB + Index: 0.84MB + Engine InnoDB
wp_posts: Data: 2.52MB + Index: 0.13MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.13MB + Index: 0.06MB + Engine InnoDB
wp_users: Data: 0.02MB + 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.05MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.05MB + 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.11MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + 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.03MB + Engine InnoDB
wp_wpda_vertical_menu_theme: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_yoast_indexable: Data: 0.39MB + Index: 0.23MB + Engine InnoDB
wp_yoast_indexable_hierarchy: Data: 0.05MB + Index: 0.05MB + 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

### Post Type Counts ###

attachment: 158
custom_css: 3
customize_changeset: 17
elementor_library: 3
nav_menu_item: 16
page: 11
post: 1
product: 40
product_variation: 6
revision: 149
shop_order: 75
shop_order_refund: 6

### Security ###

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

### Active Plugins (16) ###

Astra Pro: by Brainstorm Force – 3.4.2
Elementor Pro: by Elementor.com – 3.2.2
Elementor: by Elementor.com – 3.2.4
Fish and Ships: by wpcentrics – 1.2.8
Reviews and Rating - Google My Business: by Noah Hearle
Design Extreme – 3.31

Site Kit by Google: by Google – 1.33.0
Jetpack by WordPress.com: by Automattic – 9.7
LiteSpeed Cache: by LiteSpeed Technologies – 3.6.4
Woocommerce additional product identifier fields: by WPmarketingrobot
Auke1810
Michel Jongbloed – 1.4.0

WooCommerce PayPal Checkout Gateway: by WooCommerce – 2.1.1
WooCommerce Stripe Gateway: by WooCommerce – 5.2.0
WooCommerce Shipping & Tax: by WooCommerce – 1.25.13
WooCommerce Shortcodes: by WooThemes
Claudio Sanches – 1.0.0

WooCommerce: by Automattic – 5.3.0
Yoast SEO: by Team Yoast – 16.4
Asset CleanUp: Page Speed Booster: by Gabe Livan – 1.3.7.7

### Inactive Plugins (2) ###

Facebook for WooCommerce: by Facebook – 2.4.1
Google Ads & Marketing by Kliken: by Kliken – 1.0.7

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

SSO: by Garth Mortensen
Mike Hansen – 0.3

### Settings ###

API Enabled: –
Force SSL: –
Currency: GBP (￡)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: 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: #327 - /shop/
Basket: #328 - /cart/
Checkout: #329 - /checkout/
My account: #330 - /my-account/
Terms and conditions: ? Page not set

### Theme ###

Name: Astra
Version: 3.4.7
Author URL: https://wpastra.com/about/
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: –

### Action Scheduler ###

Complete: 197
Oldest: 2021-05-04 08:43:38 +0000
Newest: 2021-06-01 13:58:37 +0000

### Status report information ###

Generated at: 2021-06-01 20:53:20 +01:00
    Thread Starter slservice33

    (@slservice33)

    and it does not look to be images that are causing the layout to shift the moving elements identified in page speed insights are both text boxes.

    Thread Starter slservice33

    (@slservice33)

    Actaully on desktop it looks like –
    – one shift occurs when the black “buy with G Pay” bar appears
    – another shift when the little thumbnail images appear below the main image

    Which means 2 significant layout shifts on desktop

    And on mobile
    – again the layout shifts when the thumbnails appear below the main product image but being mobile the shift takes a lot longer

    Anyway to stop the layout shifting when the thumbnails appear ?

    Hi,

    – one shift occurs when the black “buy with G Pay” bar appears

    This is coming directly from Stripe.com. If you want to use Payment Request buttons like Apple Pay and Google Pay, these scripts need to be loaded directly from Stripe. I found an open issue on GitHub which you may be interested in following: https://github.com/woocommerce/woocommerce-gateway-stripe/issues/1439

    – another shift when the little thumbnail images appear below the main image

    I’m not sure if I see this issue on my end (both on desktop and mobile), but came across this article which may be helpful: https://wp-rocket.me/google-core-web-vitals-wordpress/improve-cumulative-layout-shift/

    Thread Starter slservice33

    (@slservice33)

    Hi, yes very nicely worded response subtly shifting focus away from yourselves.
    A useful skill in customer service!

    This a page entirely created by woocommerce when I added a product.

    From what I understand the layout shifts occur because the image dimensions are not included in the code so there is no placeholder included for it and after it loads the layout shifts to accommodate it.

    And as far as I know unless I create a child theme and start adding extra code specifying the missing dimensions there is nothing I can do to improve the CLS for woocommerce product pages.

    There is a thread here which seems to say it an ongoing problem and until woocommerce gets the dimensions in the code then the layout will shift.

    https://github.com/woocommerce/woocommerce/issues/25461

    If you can ever get it sorted that will be good for the Google page rating

    Thnaks ??

    Plugin Support Thu P. a11n

    (@thup90)

    Hi there,

    Thanks for your feedback. It looks like this issue will be fixed in a future release, but due to the priority, it won’t be for a while.

    I’d recommend subscribing to the Github issue so you can keep up with the development progress.

    Meanwhile, I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Woocommerce Product Page CLS’ is closed to new replies.