几个月前我开始了我的网上商店，由于我不是程序员，我终于到了需要帮助的地步。
我试图根据谷歌提高Pagespeed，我设法让我的索引页面的CLS几乎为0。 - Lazyload，系统字体，图片的纵横比等等......我设法在液体代码中找到了这一切我的 Shopify 商店并自行优化。...好吧，我完全崩溃了几次页面，但这就是备份的用途；-)
但我对产品页面一无所知。Lighthouse 可以告诉我导致 CLS 几乎为 1（！）的对象 - 主要是 0,9 左右 - 但我现在查看了这些对象的代码 5 天，我迷路了。它应该是由以下原因引起的：
- main#MainContent.main-content
- div.col-12.col-md-6.order-1
- div.page-container.page-element.is-moved-by-drawer
...有时还有一些会导致小数字 ob CLS
我尝试了我的主题的不同模板，但没有任何变化我搜索了很多...我的意思是 5 天内很多...我尝试了很多我在谷歌搜索这个问题时发现的建议我试图找到代码检查器或 HTML 代码分析器但这并没有帮助我尝试了这个线程中提到的东西：Cumulative Layout Shift with Bootstrap 4 grid
我没有看到据称是由这些元素引起的布局偏移，我能看到的唯一布局偏移在某种程度上没有被谷歌提及 - 但如果我删除导致我可以看到的布局偏移的应用程序，结果不会改变。（应用程序称为 Legal Pro - 需要保持商店符合德国法律的要求。它在价格和剩余库存之间注入产品数据。我无法更改应用程序，只能停用它。但即使应用程序被删除，灯塔数据没有改变。甚至一点都没有！
我愿意用具有较少 CLS 的代码完全替换产品页面的代码，但将完整的新代码适应现有页面是我的能力范围之外。我可以改变它，但不能写它。：-/
我会非常感谢任何帮助。给我一些我可以用谷歌搜索的东西。
（是的，我知道该页面上还有更多问题，但 CLS 现在给我一个糟糕的 Google 排名 - 当时有一个问题）
该页面的产品页面代码是这样的：
<div class="row product-single">
<div class="col-md-6">
<div class="photos">
<div class="photos__item photos__item--main">
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- for image in product.images -%}
<div class="product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
id="ProductPhoto"
style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
data-image-id="{{ image.id }}">
<a href="{{ image | img_url: '1200x1200' }}" data-lightbox="image-product"
class="product__photo-wrapper product__photo-wrapper-{{ section.id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
<noscript>
<a href="{{ featured_image | img_url: '1200x1200' }}">
<img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
</a>
</noscript>
{% include 'productVideo' %}
</div>
{%- if product.images.size > 1 -%}
<div class="photos__item photos__item--thumbs">
<div class="product-single__thumbnails product-single__thumbnails-{{ section.id }} product-single__thumbnails--static">
{%- for image in product.images -%}
<div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
<a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1200x1200' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload {% unless image == featured_image %} lazypreload{% endunless %}"
src="{{ image | img_url: '1024x' }}"
data-src="{{ img_url }}"
data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</a>
</div>
{%- endfor -%}
</div>
</div>
<script >
{%- capture arrow_left -%}{%- include 'icon-arrow-left' -%}{%- endcapture -%}
{%- capture arrow_right -%}{%- include 'icon-arrow-right' -%}{%- endcapture -%}
{%- capture arrow_up -%}{%- include 'icon-arrow-up' -%}{%- endcapture -%}
{%- capture arrow_down -%}{%- include 'icon-arrow-down' -%}{%- endcapture -%}
var sliderArrows = {
left: {{ arrow_left | json }},
right: {{ arrow_right | json }},
up: {{ arrow_up | json }},
down: {{ arrow_down | json }}
}
</script>
{%- endif -%}
{% if section.settings.positiontab == "left" %}
<div class=" {% unless settings.productpage == "product-1" %}pl-5 {% endunless %}" >
<div class="{% unless settings.productpage == "product-1" %}pl-5 {% endunless %}">
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
</div>
</div>
{% endif %}
</div>
</div>
<div class="col-12 col-md-6 order-1" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product-single__info-wrapper">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<div class="product-single__meta small--text-center">
<h1 itemprop="name" class="product-single__title">{{ product.title }}<span id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
<span class="product-tag gradient-theme">
{{ 'products.product.on_sale' | t }}
</span>
</span>
</h1>
<ul class="pb-3 product-single__meta-list list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
<li>
{%- unless product.compare_at_price_max > product.price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{%- endunless -%}
<span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
</li>
{% if product.compare_at_price_max > product.price %}
<li>
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
{{ current_variant.compare_at_price | money }}
</s>
</li>
{% endif %}
{%- if section.settings.stock_enable -%}
<li>{%- include 'productStock' -%}</li>
{%- endif -%}
</ul>
<div class="review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
{% if product.metafields.info.shortdesc != blank %}
<div class=" pb-4 rte product-single__description" itemprop="Beschreibung">
{{product.metafields.info.shortdesc}}
</div>
{% endif %}
</div>
{% if product.metafields.info.affiliate_link != blank %}{% comment %}AFFILIATE PRODUCT{% endcomment %}
<a href="{{product.metafields.info.affiliate_link}}" class="my-3 btn btn-theme btn--full product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}">
{{product.metafields.info.affiliate_button}}
</a>
{% else %} {% comment %}NORMAL PRODUCT{% endcomment %}
{% capture "form_class" %}product-form {% if section.settings.product_selector == 'select'%} product-form-select{% endif %} {% if section.settings.enable_payment_button %} product-form--payment-button{% endif %}{%- endcapture %}
{% capture "form_id" %}AddToCartForm-{{ section.id }}{%- endcapture %}
{% form 'product', product, class:form_class, id:form_id %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
{% include 'productOption' %}
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}" {% unless variant.available %} disabled="disabled" {% endunless %}>
{% if variant.available %}
{{ variant.title }} - {{ variant.price | money_with_currency }}
{% else %}
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
{% endif %}
</option>
{% endfor %}
</select>
<div class="product-form__quantity-submit pt-4">
<div class="product-form__item product-form__item--submit {% unless section.settings.enable_payment_button %} btn-disablebuynow {% endunless %}">
<button type="submit"
name="add"
id="AddToCart-{{ section.id }}"
class="btn btn--full btn-theme product-form__cart-submit {% if section.settings.enable_payment_button %}product-form__cart-submit--outline{% endif %}{% unless current_variant.available %} btn--sold-out{% endunless %}"
{% unless current_variant.available %}disabled="disabled"{% endunless %}>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
</button>
</div>
{% if section.settings.enable_payment_button %}
<div class="product-form__buynow">
{{ form | payment_button }}
{% if current_variant.available == false %}<style>.shopify-payment-button{display:none}</style>{% endif %}
</div>
{% endif %}
</div>
<div class="js-contact-soldout {% if current_variant.available %}hide{% endif %}">
<span class="btn btn-waitlist btn-theme" data-toggle="modal" data-target="#jsSoldout" title="{{ 'products.product.soldout_messenger' | t }}">{{'products.product.waitlist' | t}}</span>
</div>
<div class="gr-btnjs d-flex py-4 align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div>
{% if settings.enable_compare %}
<span class="btn js-btn-compare mr-4" data-tooltip="true" title="{{ 'products.product.compare_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-exchange' -%}
{%- include 'icon-close' -%}
<span>{{ 'products.product.compare_text' | t }}</span>
</span>
{% endif %}
{% if settings.enable_wishlsit %}
<span data-tooltip="true" class="js-btn-wishlist mr-4" title="{{ 'products.product.wishlist_text' | t }}" data-handle="{{product.handle}}">
{%- include 'icon-heart' -%}
<span class="wishlist-text">{{ 'products.product.wishlist_text' | t }}</span>
</span>
{% endif %}
</div>
<div>
{%- include 'productSizeGuide' -%}
</div>
</div>
<div>
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
{% endform %}
{% include 'notifySoldoutProduct' %}
{% endif %}
<div class="row text-left pt-2">
<div class="product-single__information col text-uppercase">
{% if section.settings.product_vendor_enable %}
<p class="product-single__vendor"><small class="text-body">{{'products.product.vendor' | t }}: </small><small>{{ product.vendor }}</small></p>
{% endif %}
{% if section.settings.product_type_enable %}
<p class="product-single__type"><small class="text-body">{{'products.product.type' | t }}: </small><small>{{ product.type }}</small></p>
{% endif %}
{% if section.settings.variant_sku_enable %}
<p class="product-single__sku "><small class="text-body">{{'products.product.sku' | t }}: </small><small class="js-variant-sku">{{ current_variant.sku | default:'null' }}</small></p>
{% endif %}
{% if section.settings.variant_available_enable %}
<p class="product-single__availability "><small class="text-body">{{'products.product.available' | t }}: </small><small>{% if current_variant.available %}{{ 'products.product.available' | t }}{% else %}{{'products.product.sold_out' | t }}{% endif %}</small></p>
{% endif %}
</div>
{% if settings.safe_checkout_detail != blank %}
<div class="safe-checkout-detail col">
<img class="lazyload img-fluid w-100" data-src="{{ settings.safe_checkout_detail | img_url: '600x' }}"/>
</div>
{% endif %}
</div>
{% include 'fake-viewer' %}
{% include 'free-shipping' %}
{% include 'shipping-time' %}
{% if settings.enable_countdown_page %}
{% include 'product-countdown' %}
{% endif %}
{% if section.settings.positiontab == "right" %}
{% if section.settings.enable_tabvertical %}
{%- include 'product-information-vertical' -%}
{% else %}
{%- include 'product-information' -%}
{% endif %}
{% endif%}
</div>
</div>
</div>