Defer javascript and show interim content on initial page load

[rrit (Ayke)]

@Falco

Doesn’t that means that we can simply put a fullscreen spinner (that has 100% width and 100% height) […] to get an extremely low LCP?

This is probably already blocked by https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/2020_11_lcp.md:

Full viewport images, which are visually equivalent to background images, are no longer considered as the largest contentful paint

---

@david

I think the key part is LCP “ candidate ” It will only be considered the largest contentful paint if it really is the largest

Good point: see Largest Contentful Paint (LCP)  |  Articles  |  web.dev

For text elements, only the size of their text nodes is considered (the smallest rectangle that encompasses all text nodes).

For all elements, any margin, padding, or border applied via CSS is not considered.

• That’s why the static text-node must be rendered exactly the same size as the EmberJs text-node.
• Or even slightly bigger by increasing the line-height.
  E.g. if the width of the text-nodes doesn’t match, there are a lot of geometric cases introduced by different linebreaks where the static text-node becomes smaller than the EmberJs-one.

See: LCP examples

---

@david

So using the crawler view works quite well because the content (i.e. the text) is largely the same?

I actually used the noscript-rendering of the posts inside a topic page. The CSS-classes do slightly match the real ones - so the look is equal.

See: Changes to app/views/layouts/application.html.erb

Edit: My fault, this is actually the crawler view: app/views/topics/show.html.erb