How to disable lazy loading above the fold while keeping it below?

Technical Q&A
, ,

Topic summary

Main issue: A store using the “Taste” theme suspects its automatic lazy loading is applied to above-the-fold content (the part visible without scrolling), slowing perceived speed. Goal is to disable lazy loading above the fold while keeping it for below-the-fold content. Lazy loading = deferring image/section loading until they enter the viewport.

Proposed approaches:

  • Check theme settings: Look for built-in lazy-loading options that allow disabling it for above-the-fold elements.
  • Custom code: Identify the theme’s lazy-loading JavaScript or related CSS classes, then modify logic to skip elements in the initial viewport (e.g., add conditions to exclude hero images/sections).

Latest update: Another participant with similar speed issues asked whether a solution was found and requested guidance.

Outcome/status: No confirmed solution or code examples shared yet; discussion remains open with actionable next steps to review theme options or implement targeted code changes.

Summarized with AI on January 15. AI used: gpt-5.
1

I believe the theme I am using (Taste) automatically lazy loads images/sections. However I think it is also lazy loading image sand sections that are above the fold, causing my site speed to slow down.

How can I disable lazy loading ABOVE the fold, but keep lazy loading activated BELOW the fold?

1 Like
2

Hello @eack77 ,

First you need to Check Theme Options: Start by checking your theme’s settings or options panel. Many modern themes come with built-in options for lazy loading, and some may allow you to specify whether it should be applied above the fold or not. Look for any settings related to lazy loading and see if there’s an option to disable it above the fold.
Custom Code: If your theme doesn’t provide a built-in option, you may need to resort to custom code.

a. Identify the Lazy Loading Code: First, you need to identify the JavaScript code that is responsible for lazy loading in your theme. This can often be found in your theme’s JavaScript files. Look for code that includes phrases like “lazy load” or Check CSS class for particular section that is using for lazy loading.

b. Modify the Code: Once you’ve identified the code responsible for lazy loading, you’ll need to modify it to exclude above-the-fold content. This might involve adding conditions to the lazy loading code to skip images and sections that are above the fold.

3

Hello,

I was wondering if you had found a solution to your problem as I am facing the same issue at the moment, my store just opened and my speed test is not very high so I thought maybe it could be solved through this. Could you please help me on how did you solve your issue.

I appreciate it.

Thank you.