(Developers only) Determining if html element is above or below fold before page is served to user

[QuintenM]

Hallo i'm working on a shopify site and for improving the site speed im trying to implement lazyloading and other since such as that to improve site speed,

Is there a way to determine that a element likely is going to be below/above the fold.

So that some people don't get confused my goal is something thats able to detect the answer to this question with code. i get that for some elements like header you can already predict its above the fold same for some content thats always at top of the page by manualy looking but this is not what im looking for.

[Jason]

You'd need to render the code - along with the imagery, JS and CSS to be able to make that judgement. Any of those will/can effect where an element sits on the page so HTML peeking won't be enough. For example, I could make an obscure html flow where CSS makes the last element the first. Unless you rendered the results you'd never know.

[PaulNewton]

I know you described a technical goal, but what is your actual business GOAL, why is this being pursued and what is it worth?

Why are normal frontend methods not suitable for improving performance of visible elements.

@Jason's got it, to continue on that the only parallel "before served to user" is getting the page served in advance and then through webdrivers / intersection observer recording the info you need.

BUUUT that will only give a subset of that specific view , i.e. chrome 1920 x 1080 + customer logged in/out + before/after widgets/apps load ,etc.

Even if you setup a full cross-browser testing process get more info your not going to get anywhere near a factual answer.

There's just too many variables so even then it's a heuristic at best if you follow such data , or with experience just knowing and marking elements likely to be AtF.

Aside from setting up tests for QA/detecting bugs, you'd need some odd/valuable use case to bother with doing all that in the "server" side sense for a tool like shopify.

If your concerned about somethings occasionally not being AtF , , in a very general sense,  just use a simple visual website change detection service.

Really just use IntersectionObserver at browser time https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

[hasanarmstrong]

Hi @QuintenM,

If you want to detect whether an element is above the folder you can use the Intersection Observer API https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API.

Best,

Hasan