How to improve largest contentful paint on mobile devices?

Technical Q&A
, , ,
1

Hi,

I am reaching out and hoping someone might know how to fix my problem. I am having troubles with my pagespeed score, especially with the largest contenful paint. I managed to fix it on desktop version using this coding (I highlighted what I added):

class=“img-slide__item swiper-slide”

{% if block.settings.image_tabs != blank %}
{%- capture sizes -%}
(min-width: 1800px)
{{ 1800 | minus: 100 | divided_by: 2 }}px,
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) /
2)
{%- endcapture -%}
{{
block.settings.image_tabs
| image_url: width: 2500
| image_tag:
loading: eager,
preload: true,
fetchpriority: high,
sizes: sizes,
widths: ‘560, 720, 1440, 1920, 2240, 2500’

My problem is, that this only fix the problem on desktop - What code should I add to fix the problem on mobile device? My customers primarily uses their phone to go to my website so I really hope it can be fixed.

Thank you so much.

Kind regards
Kathrine

2

Hello @Dadelfri3007 ,

To address the issue of improving the Largest Contentful Paint (LCP) on mobile devices, you can adjust the image loading strategy specifically for mobile screens. Here’s how you can modify your code:

{%- capture desktopSizes -%}
(min-width: 1800px) {{ 1800 | minus: 100 | divided_by: 2 }}px,
(min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
{%- endcapture -%}

{%- capture mobileSizes -%}
(max-width: 750px) 90vw, 100vw
{%- endcapture -%}

{% if block.settings.image_tabs != blank %}
<img class=“img-slide__item swiper-slide”
{% if is_mobile %}
sizes=“{{ mobileSizes }}”
{% else %}
sizes=“{{ desktopSizes }}”
{% endif %}
srcset=“{{
block.settings.image_tabs
| image_url: width: 2500
| image_tag: loading: eager, preload: true, fetchpriority: high, widths: ‘560, 720, 1440, 1920, 2240, 2500’
}}”>
{% endif %}

In this modified code:

  • We’ve introduced a mobileSizes variable to define the image sizes for mobile devices. This ensures that smaller images are loaded on smaller screens.
  • We’ve added a conditional statement ({% if is_mobile %}) to dynamically set the sizes attribute based on whether the user is accessing the site from a mobile device.
  • If the user is on a mobile device, the sizes attribute is set to mobileSizes; otherwise, it defaults to desktopSizes.

This adjustment should help optimize the loading of images for mobile devices, potentially improving your pagespeed score, particularly the Largest Contentful Paint metric

3

Hi, thanks for the reply and help! However, when I add the new code, my pictures disappears from my both desktop and mobile version of my shop.
Kind regards
Kathrine