FROM CACHE - en_header

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

QuintenM
Excursionist
19 0 1

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.

Software developer focused on speed and customization in websites

My Youtube channel

Youtube channel for some tips/tricks and website reviews
( from a developer point of view to help both store owners as developers )
Replies 3 (3)
Jason
Shopify Expert
10959 196 2213

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.

 

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
PaulNewton
Shopify Partner
4765 390 1021

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

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
hasanarmstrong
Excursionist
23 5 5

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

Front-end developer who helps Shopify merchants with their website/s.
https://hasanarmstrong.com