Home » Shopify Speed Optimization » Largest Contentful Element (Preload) in Shopify Optimization

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.
Largest-Contentful-Paint-element-desktop

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 %}
76

Leave A Comment