Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi Shopify fellows,
I need help with the site speed right now. The desktop speed is very good, however, the mobile speed keeps going down.
Can we fix this? Can someone look into this and let me know what I should do to improve mobile speed?
Thanks in advance!
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 <head> 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 <img src="" loading="lazy"/> 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 : <img src="flower-large.jpg">
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 }}'></svg>"
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.
<head>
...
<link rel="preload" href=" src="{{ product.featured_image | img_url: '350x350' }}" as="image">
...
</head>
<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 }}'></svg>"
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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024