5 ms·

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, espec

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.

Dalewyn 4y ago
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.
- chrisweekly 4y ago
  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.
  - teknopaul 4y ago
    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
    - tryfinally 4y ago
      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.
- christophilus 4y ago
  I use aspect ratio for this now that it's supported in CSS. It might be my favorite CSS feature since flex.
Banana699 4y ago
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 ?
- teknopaul 4y ago
  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.

Dalewyn 4y ago

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.

chrisweekly 4y ago
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.
- teknopaul 4y ago
  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
  - tryfinally 4y ago
    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.
christophilus 4y ago
I use aspect ratio for this now that it's supported in CSS. It might be my favorite CSS feature since flex.

Banana699 4y ago

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 ?

teknopaul 4y ago
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.