Mobile Page Speed is terrible. How to fix?
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:
- Google tag Manager
- TikTok.., etc
2.Largest Contentful Paint element :
- Properly Sized images: For Example:
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>
- Below Fold Images Lazyload: Remove Lazyload From First Image and Below fold Images will be on lazy load
<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 }}">
- Compressed Images before upload:
Used Tools : 1. imageresizer.com
Community Blog Articles
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024