Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

You have to really do some extra work to make this happen "nicely". Swapping out parts of the page without jerking the user around is a difficult problem, especially if you aren't working with fixed sizes of elements. And creating a "skeleton" system of placeholders during loading is a whole other set of state you have to build out and maintain.

I find most sites using this kind of progressive loading are completely useless during the loading phase... What's the point of showing the user a page full of skeleton/loading placeholders? You might as well have just server-rendered the whole thing and made the user wait an extra second or two.



I remember how it was good practice to assign width and height to <img> tags.

The idea being the browser would know how to render the things around the picture without needing to download the picture first, preventing the page from jumping around as the quicker and lighter HTML was downloaded and rendered first.


That still is a best practice.

That "jumping around" is now referred to as "CLS" -- Cumulative Layout Shift -- one of the "Core Web Vitals" metrics used to quantify performance-related UX.


I sometmes like CLS, it makes it look like things are happening instead of feeling like a wait time. I recently used a simple templating mechanism

elem = jquery.clone() ... elem.slideDown()

And this renders bits of the page moving them as it does it; slideDown() is in jquery core. It used to be popular before that biz of rendering grey squares first got invented


Layout shift feels fairly terrible when you're navigating to an element that is at the bottom of the page (via #id) or simply refreshing the page. There is literally nothing more annoying than clicking the wrong link because the layout shifted under the cursor at just the wrong moment. CLS is also known as "jank" for a reason.


I use aspect ratio for this now that it's supported in CSS. It might be my favorite CSS feature since flex.


GP was talking about loading JS, adding JS to a webpage doesn't affect its rendering (unless the loaded JS is DOM-manipulating) does it ?


Yes it does by default.

You can document.write() in js by default so it has to wait for the js to load.

"async" tag stops the default behaviour but the person writing the blog does not sem to know what.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: