Loading Issues Dawn Theme

Shopify Discussion
,
1

Hi there

I’m having some LCP issues with my Shopify store on mobile which is giving me a lower performance score. I’ve reduced image sizes but still can’t seem to determine what the issue is or how to fix it. Performance report is below…

Shopify store: www.islandbrook.com.au

Performance report: https://pagespeed.web.dev/analysis/https-www-islandbrook-com-au/7pch8fnp62?form_factor=mobile

Any help is appreciated.

2

@IBE May this help you.

Use Appropriate Formats: Convert images to modern formats like WebP for faster loading.

Compress Images: Use tools like TinyPNG or Shopify apps like Crush.pics to reduce file size.

Use Responsive Images: Add multiple image sizes for different screen resolutions using the srcset attribute.

Use Lazy Loading Wisely
Minimize CSS and JavaScript
Improve Server Response Time
Preload Key Resources
Reduce Third-Party Scripts
Enable Faster Fonts
Check Theme Performance

3

Hi @IBE
It seems you need to enable lazy loading or a similar feature. We might also need to adjust the code, as the Hero Image quality is excellent but quite heavy.

brisk_code_0-1737704523190.jpeg
brisk_code_0-1737704523190.jpeg1620×1080 337 KB

For this purpose, follow the instructions or give me collaborator access to do it.

You will modify the theme code:

  1. Online store > themes

  2. Actions >Edit Code.

Next, you must modify the theme code to enable lazy image loading.

  1. under the section >theme.liquid

  2. locate the file section of the file, usually near the top.

  3. Add the following code within the section to include a lazy loading js library.

This code will load the lazy sizes library from a CDN.

After saving the changes, the lazy loading javascript library will be included in your theme.

Next, you will need to update the image tags in your theme to utilize lazy loading:

  1. locate the code for the image tags in your theme files. (eg. product templates, collection templates, etc.).

  2. Replace the src attribute of the image tag with data-src. This will specify the actual image source that will be loaded lazily

  3. Add lazyload class to the image tag.

Here is an example of how the updated image tag should look: