According to these screenshots your main problem is LCP.
Indeed, your first slide loading needs to be prioritised.
Currently, request to load your first slide image only starts about 2 seconds after starting page load, this is too big a delay:
There is a whole lot of other low-priority stuff, like reviews code and data loading before this image – needs to be changed.
Hello, I am Shadow
First, I noticed that your theme store has an error causing some tags that should be in the section to fall into the body section. This is not good for SEO.
Next, your store is not loading images in the usual way but through JavaScript. Essentially, this loads more images within the viewport and makes the store load more. Switch to using the tag. For images not in the viewport, use loading=“eager” and fetchpriority to ensure the images load as quickly as possible.
There are many other issues, but overall, your store is still fine. Don’t focus too much on the PageSpeed score because they measure your site using a slow 4G network. In reality, most people’s networks are much faster. You can check this in Online Store => Theme.
Hello @ALEXJOO ,
To Fix the Mobile Page Load
Reduce javaScript execution time & Reduce the impact of third-party code
Here, you have to load the Javascript file After the Page Load Ex:
2.Largest Contentful Paint element :
Before :
After :
<img class=“lazyload”
src=“data:image/svg+xml;utf8,<svg%20xmlns=‘http://www.w3.org/2000/svg’%20width=’{{ preview_image.width }}‘%20height=’{{ preview_image.height }}'>”
data-src=“{{ image_100x | img_url: ‘100x’ }} 100w”
data-srcset="{{ image_1200x }} 1200w,
{{ image_980x }} 980w,
{{ image_480x }} 480w”
width=“{{preview_image.width}}”
height=“{{preview_image.height}}”
alt=“{{ preview_image.alt }}”>
2.PreLoad:
Unlike prefetching, which acts more like a suggestion to the browser, the preload resource hint directs the browser to load the assets regardless of what it thinks. The browser cannot ignore the preloading directive.
…
…
<img class=“lazyload”
src=“data:image/svg+xml;utf8,<svg%20xmlns=‘http://www.w3.org/2000/svg’%20width=’{{ preview_image.width }}‘%20height=’{{ preview_image.height }}'>”
data-src=“{{ image_100x | img_url: ‘100x’ }} 100w”
data-srcset="{{ image_1200x }} 1200w,
{{ image_980x }} 980w,
{{ image_480x }} 480w”
width=“{{preview_image.width}}”
height=“{{preview_image.height}}”
alt=“{{ preview_image.alt }}”>
Used Tools : 1. imageresizer.com
