I am using PageSpeed Insights to determine why LCP traffic is downgraded and am currently trying to fix it.
One of them is the “Rendering the largest content” element, which takes 10,870 ms to complete. Does anyone know how to fix this?
My URL - https://ucghdd.com/
Theme - Empire
Hi @Valeria_16 ,
In order to improve the Largest Contentful Paint (LCP) time for your Shopify site, you should address the long load delay of 9,740 ms that is being caused by the image element. Here are some steps you can take to optimize the performance:
f you find this information useful, a Like would be greatly appreciated.
If this solves the problem, please Mark it as Solution!
Regards,
Sweans
Hi Sweans
Thanks for the answer, but I have made these points. I will attach the template code for the images below - rimg and the slideshow template, maybe you can suggest something
rimg
{%- capture _ -%}
{% comment %}
@param img
An Image Drop to display.
@param lazy (optional)
Lazy-load the image. Outputs markup to connect with the rimg JS.
Defaults to false.
@param background (optional)
Output the image markup as a background image.
Defaults to false.
@param size (optional)
The size to display the image at. Uses the same syntax as `img_url`.
Defaults to the image's native size.
@param crop (optional)
The crop type to use. One of: top, center, bottom, left, right.
Defaults to no cropping.
@param scale (optional)
A number to scale the image by.
Defaults to '1'.
@param format (optional)
The format type to use. One of: jpg, pjpg.
Defaults to original image format.
@param placeholder (optional)
The size to display to placeholder image at. Uses the same syntax as
`img_url`. Only applies if `lazy` is true.
Defaults to no placeholder image.
@param alt (optional)
Alt text for the image.
Defaults to the img's alt property or an empty string if none exists.
@param class (optional)
CSS class names to add to the image tag's `class` attribute.
Defaults to blank.
@param style (optional)
CSS styles to apply to the image tag's `style` attribute.
Defaults to blank.
@param attr (optional)
Extra attributes to add to the image tag. For example: `id="example"`.
Defaults to blank.
@param canvas (optional)
Add an extra element, useful for styling loaders.
Defaults to false.
@param disable_noscript (optional)
Eliminates noscript tags, saving data in the cases when they aren't required.
Defaults to false.
@param focal_point (optional)
Applies `background-size:cover;background-position:{{ focal_point }};` to the style property
of the container if the image is a background-image and `object-fit:cover;object-position:[focal point]`
otherwise on the image element.
Defaults to blank.
{% endcomment %}
{% comment %}
Defaults
{% endcomment %}
{% assign lazy = lazy | default: false %}
{% assign background = background | default: false %}
{% assign size_default = img.width | append: 'x' | append: img.height %}
{% assign size = size | default: size_default %}
{% assign crop = crop | default: false %}
{% assign scale = scale | default: 1 %}
{% assign format = format | default: '' %}
{% assign placeholder = placeholder | default: false %}
{% assign alt = alt | default: img.alt | default: '' %}
{% assign class = class | default: blank %}
{% assign style = style | default: blank %}
{% assign attr = attr | default: blank %}
{% assign canvas = canvas | default: false %}
{% assign disable_noscript = disable_noscript | default: false %}
{% assign focal_point = focal_point | default: blank %}
{% comment %}
Parse size parameter and force to numbers.
{% endcomment %}
{% assign rimg_s = size | split: 'x' %}
{% assign rimg_w = rimg_s[0] %}
{% assign rimg_h = rimg_s[1] %}
{% assign rimg_size_aspect_ratio = rimg_w | times: 1.0 | divided_by: rimg_h %}
{% comment %}
Include focal point in style parameter if it exists
{% endcomment %}
{% if focal_point != blank %}
{%- capture focal_point_style -%}
{% if background %}
background-size:cover;background-position:{{ focal_point }};
{% else %}
object-fit:cover;object-position:{{ focal_point }};
{% endif %}
{%- endcapture -%}
{% if style != blank %}
{% assign style = style | append: focal_point_style %}
{% else %}
{% assign style = focal_point_style %}
{% endif %}
{% endif %}
{% comment %}
Calculate width and height based on the size parameter.
{% endcomment %}
{% if rimg_w == blank and rimg_h == blank %}
{% assign rimg_w = img.width %}
{% assign rimg_h = img.height %}
{% comment %} Size to a specific height {% endcomment %}
{% elsif rimg_w == blank %}
{% assign rimg_w = rimg_h | times: img.aspect_ratio %}
{% if rimg_w > img.width %}
{% assign rimg_w = img.width %}
{% assign rimg_h = rimg_w | divided_by: img.aspect_ratio %}
{% endif %}
{% comment %} Size to a specific width {% endcomment %}
{% elsif rimg_h == blank %}
{% assign rimg_h = rimg_w | divided_by: img.aspect_ratio %}
{% if rimg_h > img.height %}
{% assign rimg_h = img.height %}
{% assign rimg_w = rimg_h | times: img.aspect_ratio %}
{% endif %}
{% comment %} Size to a width and height, no crop {% endcomment %}
{% elsif crop == blank %}
{% if img.aspect_ratio > rimg_size_aspect_ratio %}
{% assign rimg_h = rimg_w | divided_by: img.aspect_ratio %}
{% if rimg_h > img.height %}
{% assign rimg_h = img.height %}
{% assign rimg_w = rimg_h | times: img.aspect_ratio %}
{% endif %}
{% else %}
{% assign rimg_w = rimg_h | times: img.aspect_ratio %}
{% if rimg_w > img.width %}
{% assign rimg_w = img.width %}
{% assign rimg_h = rimg_w | divided_by: img.aspect_ratio %}
{% endif %}
{% endif %}
{% comment %} Otherwise we are sizing to a width and height, and cropping.
If requested size is larger than the image size then we should use the
largest possible size while maintaining the requested aspect ratio. {% endcomment %}
{% else %}
{% if img.aspect_ratio > rimg_size_aspect_ratio %}
{% comment %} fit height {% endcomment %}
{% assign rimg_h = rimg_w | divided_by: rimg_size_aspect_ratio %}
{% if rimg_h > img.height or rimg_w > img.width %}
{% assign rimg_h = img.height %}
{% assign rimg_w = rimg_h | times: rimg_size_aspect_ratio %}
{% endif %}
{% else %}
{% comment %} fit width {% endcomment %}
{% assign rimg_w = rimg_h | times: rimg_size_aspect_ratio %}
{% if rimg_h > img.height or rimg_w > img.width %}
{% assign rimg_w = img.width %}
{% assign rimg_h = rimg_w | divided_by: rimg_size_aspect_ratio %}
{% endif %}
{% endif %}
{% endif %}
{% assign rimg_w = rimg_w | ceil %}
{% assign rimg_h = rimg_h | ceil %}
{% assign rimg_size = '' | append: rimg_w | append: 'x' | append: rimg_h %}
{% comment %}
Set the scale, default to 1.
{% endcomment %}
{% assign rimg_scale = scale %}
{% comment %}
Set the format
{% endcomment %}
{% assign rimg_format = format %}
{% comment %}
Try to guess the alt text based off the image if none is provided.
{% endcomment %}
{% assign rimg_alt = alt | escape %}
{% comment %}
Define a URL template. We use this to generate exact-size URLs in JS.
{% endcomment %}
{% assign rimg_url_template = img
| img_url: '1x1', crop: crop
| replace: '_1x1', '_{size}'
%}
{% unless rimg_format == '' %}
{% assign rimg_url_template = img
| img_url: '1x1', crop: crop, format: rimg_format
| replace: '_1x1', '_{size}'
%}
{% endunless %}
{% comment %}
Define a placeholder SVG that shares the image's aspect ratio.
Setting the image's initial `srcset` attribute to this inline SVG allows the
image to have the correct aspect ratio before we actually load the image.
{% endcomment %}
{% assign rimg_placeholder = 'data:image/svg+xml;utf8,'
| append: ""
| replace: 'X', rimg_w
| replace: 'Y', rimg_h
| replace: ' ', '%20'
%}
{% comment %}
Generate a `srcset` string.
{% endcomment %}
{% assign rimg_density = '' %}
{% for i in (1..4) %}
{% assign rimg_densities_w = rimg_w | times: i | round %}
{% assign rimg_densities_h = rimg_h | times: i | round %}
{% assign rimg_density = rimg_density | append: ' ' %}
{% if rimg_densities_w > img.width or rimg_densities_h > img.height %}
{% if img.aspect_ratio > rimg_size_aspect_ratio %}
{% assign rimg_max_density = img.height | divided_by: rimg_h %}
{% assign rimg_max_density_float = img.height | times: 100 | divided_by: rimg_h | times: 0.01 %}
{% else %}
{% assign rimg_max_density = img.width | divided_by: rimg_w %}
{% assign rimg_max_density_float = img.width | times: 100 | divided_by: rimg_w | times: 0.01 %}
{% endif %}
{% if rimg_max_density != rimg_max_density_float %}
{% assign rimg_max_density = rimg_max_density_float %}
{% endif %}
{% unless rimg_density contains rimg_max_density %}
{% assign rimg_density = rimg_density | append: rimg_max_density %}
{% endunless %}
{% break %}
{% else %}
{% assign rimg_density = rimg_density | append: i %}
{% endif %}
{% endfor %}
{% assign rimg_densities = rimg_density | split: ' ' %}
{% assign rimg_density_srcset = '' %}
{% for rimg_densities_i in rimg_densities %}
{% assign rimg_densities_w = rimg_w | times: rimg_densities_i | round %}
{% assign rimg_densities_h = rimg_h | times: rimg_densities_i | round %}
{% assign rimg_densities_size = rimg_densities_w | append: 'x' | append: rimg_densities_h %}
{% assign rimg_density_src=img | img_url: rimg_densities_size, crop: crop %}
{% unless rimg_format == '' %}
{% assign rimg_density_src=img | img_url: rimg_densities_size, crop: crop, format: rimg_format %}
{% endunless %}
{% assign rimg_density_srcset = rimg_density_srcset
| append: ', '
| append: rimg_density_src
| append: ' '
| append: rimg_densities_i
| append: 'x'
%}
{% endfor %}
{% assign rimg_density_srcset = rimg_density_srcset | remove_first: ', ' %}
{%- endcapture -%}
{% comment %} Background image {% endcomment %}
{% if background %}
{% if lazy %}
data-rimg="lazy"
data-rimg-scale="{{ rimg_scale }}"
data-rimg-template="{{ rimg_url_template }}"
data-rimg-max="{{ img.width }}x{{ img.height }}"
data-rimg-crop="{{ crop }}"
{% if placeholder %}data-rimg-placeholder="{{ placeholder }}"{% endif %}
{% if class != blank %}class="{{ class }}"{% endif %}
{% if style != blank %}style="{{ style }}"{% endif %}
{% if attr != blank %}{{ attr }}{% endif %}
{% else %}
{% if class != blank %}class="{{ class }}"{% endif %}
style="
{% if rimg_format == '' %}
background-image: url('{{ img | img_url: rimg_size, crop: crop }}');
{% else %}
background-image: url('{{ img | img_url: rimg_size, format: rimg_format }}');
{% endif %}
{% if style != blank %}{{ style }}{% endif %}
"
{% if attr != blank %}{{ attr }}{% endif %}
{% endif %}
{% comment %} Image tag {% endcomment %}
{% else %}
{% if lazy and disable_noscript != true %}
{% endif %}
{% endif %}
{% if canvas %}
{% endif %}
{%- capture _ -%}
{% comment %}
Unset all parameters so they don't leak between snippet calls.
{% endcomment %}
{% assign lazy = nil %}
{% assign background = nil %}
{% assign size = nil %}
{% assign crop = nil %}
{% assign scale = nil %}
{% assign format = nil %}
{% assign placeholder = nil %}
{% assign alt = nil %}
{% assign class = nil %}
{% assign style = nil %}
{% assign attr = nil %}
{% assign canvas = nil %}
{% assign disable_noscript = nil %}
{% assign focal_point = nil %}
{% comment %}
Unset all local variables so they don't pollute the global scope.
{% endcomment %}
{% assign rimg_s = blank %}
{% assign rimg_w = blank %}
{% assign rimg_h = blank %}
{% assign rimg_size_aspect_ratio = blank %}
{% assign rimg_scale = blank %}
{% assign rimg_url_template = blank %}
{% assign rimg_alt = blank %}
{% assign rimg_density = blank %}
{% assign rimg_densities = blank %}
{% assign rimg_densities_i = blank %}
{% assign rimg_densities_w = blank %}
{% assign rimg_densities_h = blank %}
{% assign rimg_density_src=blank %}
{% assign rimg_densities_size = blank %}
{% assign rimg_density_srcset = blank %}
{% assign rimg_placeholder = blank %}
{%- endcapture -%}
Slideshow
{% liquid
assign block_slide_image = block.settings.background_image
assign block_slide_image_mobile = block.settings.mobile_background_image
assign block_slide_title = block.settings.title | escape
assign block_subheading = block.settings.text | escape
assign block_button_label = block.settings.button_one_label | escape
assign block_button_link = block.settings.button_one_link
assign block_button_label_2 = block.settings.button_two_label | escape
assign block_button_link_2 = block.settings.button_two_link
assign block_text_alignment = block.settings.text_alignment
assign block_text_color = block.settings.color
assign block_background_link = block.settings.link
assign block_crop_images = 'center'
if section.settings.slideshow_height == 'original'
assign block_crop_images = false
endif
if block.settings.show_overlay
assign block_overlay_color = block.settings.overlay_color
assign block_overlay_opacity = block.settings.overlay_opacity
endif
assign block_button_1_class = 'slideshow-slide__button--' | append: block.settings.button_one_style
assign block_button_2_class = 'slideshow-slide__button--' | append: block.settings.button_two_style
%}
{% comment %}Inject /pxs-slideshow/slideshow-slide begin{% endcomment %}
{%- comment -%}
@param block_index {Number}
The 0-based index of the current block
@param block_slide_image {Image}
The image for the background of the slide
@param block_slide_image_mobile {Image}
The mobile image for the background of the slide
@param block_preheading {String}
This will appear above the heading in a
tag.
@param block_slide_title {String}
This is the title of the slide and will be inside
## tags.
@param block_subheading {String}
This is the content of the slide, shown below the title.
@param block_text {String}
Text content of the slide, shown below the subheading
@param block_button_label {String}
The label of the tag that will be below the subheading.
@param block_button_link {String}
The link that will be used as the href on the tag of the first link.
@param block_button_label_2 {String}
The label on the second link in the slide.
@param block_button_link_2 {String}
The link used for the href of the second link in the slide.
@param block_image_position {String}
Adds a position class to the slide's image in the format of slideshow-slide__image-wrapper--position-{ image_position }. Options should be center, top, bottom, left, or right.
@param block_text_alignment {String}
The value of this property will be appended a class on the slide's content in the format slideshow-slide__content--text-{ text_alignment }.
@param block_text_color
This will add a text color style to the slide as well as a CSS variable called --slide-text-color on the section that will change when the slide changes.
@param block_background_link {String}
If this is provided, the entire slide will be wrapped in an tag to allow the entire slide to be clickable.
@param block_overlay_color {Color}
If this is not transparent (and the overlay_opacity is greater than 0) and overlay element will be present on the slide with a background-color and opacity style added to it.
@param block_overlay_opacity {Number}
This is the opacity of the overlay, which is applied as an inline style.
@param block_overlay_style {String}
If this is provided and the overlay_opacity is greater than 0, a class will be added to the overlay element in the format slideshow-slide__overlay--{ overlay_style }.
@param block_class {String}
Any extra classes to be added to the slide
@param block_button_1_class
Any classes to be added to the first button on the slide
@param block_button_2_class
Any classes to be added to the second button on the slide
{%- endcomment -%}
{%- assign placeholder_number = block_index | modulo: 2 | plus: 1 -%}
{%- assign placeholder = 'lifestyle-' | append: placeholder_number -%}
{%- assign slide_number = block_index | plus: 1 -%}
{%- assign overlay_opacity = 0 -%}
{%- if block_overlay_opacity > 0 -%}
{%- assign overlay_opacity = block_overlay_opacity | times: 0.01 -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_slide_image != blank -%}
{%
render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: '2000x',
lazy: true,
canvas: true,
focal_point: block_slide_image.presentation.focal_point,
%}
{%- else -%}
{{ placeholder | placeholder_svg_tag: 'slideshow-slide__image slideshow-slide__placeholder' }}
{%- endif -%}
{%- if block_slide_image_mobile != blank -%}
{%
render 'rimg',
img: block_slide_image_mobile,
class: 'slideshow-slide__image slideshow-slide__image--mobile',
size: '800x',
lazy: false,
canvas: true,
focal_point: block_slide_image_mobile.presentation.focal_point,
%}
{%- endif -%}
{%- if block_overlay_opacity != 0 and block_overlay_color != 'rgba(0,0,0,0)' -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_preheading != blank -%}
{{ block_preheading | escape }}
{%- endif -%}
{%- if block_slide_title != blank -%}
##
{{ block_slide_title | escape }}
{%- endif -%}
{%- if block_subheading != blank -%}
{{ block_subheading | escape }}
{%- endif -%}
{%- if block_text != blank -%}
{{ block_text }}
{%- endif -%}
{%- if block_background_link != blank -%}
{%- endif -%}
{%- if block_button_label != blank -%}
{%- if block_button_link != blank -%}
{{ block_button_label | escape }}
{%- else -%}
{{ block_button_label | escape }}
{%- endif -%}
{%- endif -%}
{%- if block_button_label_2 != blank -%}
{%- if block_button_link_2 != blank -%}
{{ block_button_label_2 | escape }}
{%- else -%}
{{ block_button_label_2 | escape }}
{%- endif -%}
{%- endif -%}
{% comment %}Inject /pxs-slideshow/slideshow-slide end{% endcomment %}
Hi @Valeria_16 ,
Thank you for sharing the template code. Let’s go through the code and identify optimizations to improve the Largest Contentful Paint (LCP) for your slideshow images on Shopify.
Key Points in Your Template
rimg render tag for images.lazy loading is set for desktop images but not for mobile images.'2000x' for desktop and '800x' for mobile.canvas: true option may impact how images are rendered and possibly affect performance.Recommendations for Optimization
Here are some strategies and improvements you might consider:
{%
render 'rimg',
img: block_slide_image_mobile,
class: 'slideshow-slide__image slideshow-slide__image--mobile',
size: '800x',
lazy: true, // Change to true
canvas: true,
focal_point: block_slide_image_mobile.presentation.focal_point,
%}
{%
render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: '2000x', // Consider changing to a srcset attribute
lazy: true,
canvas: true,
focal_point: block_slide_image.presentation.focal_point,
srcset: '1000w, 1500w, 2000w', // Provide multiple sizes for responsive loading
sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw'
%}
<head> and ensure that JavaScript is loaded asynchronously or deferred, unless it is required for the initial paint.{% if block_overlay_opacity != 0 and block_overlay_color != 'rgba(0,0,0,0)' %}
{% endif %}
{%
render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: '2000x',
lazy: true,
canvas: false, // Set to false if performance improves
focal_point: block_slide_image.presentation.focal_point,
%}
Remember the following tips:
Example code adjustments:
Here’s a quick way to incorporate the above suggestions into your existing code:
{% if block_background_link != blank %}
{% endif %}
{% if block_slide_image != blank %}
{% render 'rimg',
img: block_slide_image,
class: 'slideshow-slide__image slideshow-slide__image--desktop',
size: '2000x',
lazy: true,
canvas: false,
focal_point: block_slide_image.presentation.focal_point,
srcset: '1000w, 1500w, 2000w',
sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw'
%}
{% else %}
{{ placeholder | placeholder_svg_tag: 'slideshow-slide__image slideshow-slide__placeholder' }}
{% endif %}
{% if block_slide_image_mobile != blank %}
{% render 'rimg',
img: block_slide_image_mobile,
class: 'slideshow-slide__image slideshow-slide__image--mobile',
size: '800x',
lazy: true, // Changed to true
canvas: false,
focal_point: block_slide_image_mobile.presentation.focal_point,
srcset: '400w, 600w, 800w',
sizes: '(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw'
%}
{% endif %}
{% if block_overlay_opacity != 0 and block_overlay_color != 'rgba(0,0,0,0)' %}
{% endif %}
{% if block_background_link != blank %}
{% endif %}
{% if block_background_link != blank %}
{% endif %}
{% if block_preheading != blank %}
{{ block_preheading | escape }}
{% endif %}
{% if block_slide_title != blank %}
##
{{ block_slide_title | escape }}
{% endif %}
{% if block_subheading != blank %}
{{ block_subheading | escape }}
{% endif %}
{% if block_text != blank %}
{{ block_text }}
{% endif %}
{% if block_background_link != blank %}
{% endif %}
{% if block_button_label != blank %}
{% if block_button_link != blank %}
{{ block_button_label | escape }}
{% else %}
{{ block_button_label | escape }}
{% endif %}
{% endif %}
{% if block_button_label_2 != blank %}
{% if block_button_link_
2 != blank %}
{{ block_button_label_2 | escape }}
{% else %}
{{ block_button_label_2 | escape }}
{% endif %}
{% endif %}
By applying these strategies, you can decrease the LCP and enhance the overall performance and user experience of your Shopify store.
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
Hi Valeria_16,
We have just checked the speed of the store, it scored 45 on mobile and 61 on desktop. Here is the detailed link: https://pagespeed.web.dev/analysis/https-ucghdd-com/yq0csa80rg?form_factor=mobile. We have this recommendation as follows:
Best Regards,
Melody.
Hello @Valeria_16 , thanks for sharing your website. I have analyzed your website using Google Page Insights , and the report indicates your Total Blocking Time and speed index are high. This is a common challenge due to render-blocking resources and excessive JavaScript execution time.
Here are the advanced techniques to increase the performance of your website :
ShopifyAPI.ScriptTag.create({
event: ‘onload’,
src: ‘https://example.com/script.js’,
async: true
});
{% if product.available %}
{{ product.price | money }}
Add to Cart
{% else %}
Sold Out
{% endif %}
Use JavaScript to delay non-critical scripts until page is fully loaded or after user interaction:
Alternatively ,if you do not want to go through this process manually,I suggest to use Website Speedy -is an shopify app. It automatically optimizes LCP, FCP, and other metrics and is simple to set up. It has a free trial period of 14 days.
(Disclaimer: We are the developers of Website Speedy and are happy to assist with any questions you may have!)