Bonjour,
Sa fait une semaine que je me prend la tête sur se problème,
J'ai tous essayer mais je n'y arrive pas, j'ai le problème "Largest Contentful Paint" pour la première image des pages produits, mon thème est sense , si vous pouvez m'aider se serais vraiment sympa car je ne sais plus quoi essayer.
Je vous joint les pages.
Mon site : yokofy.com
Merci
product-thumbnail.liquid
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{- 'icon-play.svg' | inline_asset_content -}}
</span>
{%- endif -%}
</span>
{{
media.preview_image
| image_url: width: 1946
| image_tag:
loading : lazy,
sizes: sizes,
widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946'
}}
</button>
<template>
{%- liquid
case media.media_type
when 'external_video'
assign video_class = 'js-' | append: media.host
if media.host == 'youtube'
echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
else
echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
endif
when 'video'
echo media | media_tag: image_size: '2048x', autoplay: true, loop: loop, controls: true, preload: 'none'
when 'model'
echo media | media_tag: image_size: '2048x', toggleable: true
endcase
-%}
</template>
{%- if media.media_type == 'model' -%}
</product-model>
{%- if xr_button -%}
<button
class="button button--full-width product__xr-button"
type="button"
aria-label="{{ 'products.product.xr_button_label' | t }}"
data-shopify-xr
data-shopify-model3d-id="{{ media.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
<span class="svg-wrapper">
{{- 'icon-3d-model.svg' | inline_asset_content -}}
</span>
{{ 'products.product.xr_button' | t }}
</button>
{%- endif -%}
{%- else -%}
</deferred-media>
{%- endif -%}
{%- endif -%}
</div>
product-media-gallery.liquid
{% comment %}
<span class="svg-wrapper">
{{- 'icon-3d-model.svg' | inline_asset_content -}}
</span>
</span>
{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
<span class="thumbnail__badge" aria-hidden="true">
<span class="svg-wrapper">
{{- 'icon-play.svg' | inline_asset_content -}}
</span>
</span>
{%- endif -%}
{%- capture thumbnail_id -%}
Thumbnail-{{ section.id }}-{{ forloop.index }}
{%- endcapture -%}
<button
class="thumbnail global-media-settings global-media-settings--no-shadow"
aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
{% if media == product.selected_or_first_available_variant.featured_media
or product.selected_or_first_available_variant.featured_media == null
and forloop.index == 1
%}
aria-current="true"
{% endif %}
aria-controls="GalleryViewer-{{ section.id }}"
aria-describedby="{{ thumbnail_id }}"
>
{{
media.preview_image
| image_url: width: 416
| image_tag:
loading: 'lazy',
sizes: sizes,
widths: '54, 74, 104, 162, 208, 324, 416',
id: thumbnail_id,
alt: media.alt
| escape
}}
</button>
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
<button
type="button"
class="slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
aria-controls="GalleryThumbnails-{{ section.id }}"
data-step="3"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
</slider-component>
{%- endif -%}
</media-gallery>
main-product.liquid
<product-info
</span>
</button>
<div class="slider-counter slider-counter--{{ block.settings.pagination_style }}{% if block.settings.pagination_style == 'counter' or block.settings.pagination_style == 'numbers' %} caption{% endif %}">
{%- if block.settings.pagination_style == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ number_of_slides }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for i in (1..number_of_slides) -%}
<button
class="slider-counter__link slider-counter__link--{{ block.settings.pagination_style }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ block.id }}"
>
{%- if block.settings.pagination_style == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<span class="dot"></span>
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
</div>
{%- endif -%}
</slideshow-component>
{%- if block.settings.make_collapsible_row -%}
</details>
{%- endif -%}
</div>
</aside>
{%- endif -%}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-complementary-products.css' | asset_url | stylesheet_tag }}
{%- if block.settings.enable_quick_add -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</product-recommendations>
{%- when 'icon-with-text' -%}
{% render 'icon-with-text', block: block %}
{%- endcase -%}
{%- endfor -%}
<a href="{{ product.url }}" class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{{- 'icon-arrow.svg' | inline_asset_content -}}
</a>
</section>
</div>
</div>
{% render 'product-media-modal', variant_images: variant_images %}
{% assign popups = section.blocks | where: 'type', 'popup' %}
{%- for block in popups -%}
<modal-dialog id="PopupModal-{{ block.id }}" class="product-popup-modal" {{ block.shopify_attributes }}>
<div
role="dialog"
