Skip to content
Table Of Content
Largest Contentful Element (Preload) in Shopify Optimization
We set for the Largest Contentful Element in Shopify optimization for the images, we need to optimize your images and preload.
1. Identification for largest contentful paint Element
Tools like GT metrix,lighthouse,Page speed insights.
2. Check that image which is in largest contentful paint element for image after that how to set it.
Example
{ %- for media in product.media -%}
{ %- case media.media_type -%}
{ %- when ‘image’ -%}
{ % assign image_url = media | img_url: ‘1×1’ %}
{ % break %}
{ %- endcase -%}
{ %- endfor -%}
{ % if image_url %}
{ % assign sizes = ‘200,400,600,700,800,900,1000,1200’ | split: ‘,’ %}
{ %- for size in sizes -%}
{ % capture preloadSrcset %}
{ % assign sizeX = size | append: ‘x’ %}
{{ image_url | replace: ‘1×1’, sizeX }} {{size}}w ,
{{preloadSrcset}}
{ % endcapture %}
{ %- endfor -%}
{{image_url}}
< link rel=”preload” as=”image” href=”{{ image_url | replace: ‘_1x1’, ” }}” imagesrcset=”{{preloadSrcset}}” / >
{ % endif %}
