Ensure navigation is smooth between extensions and main quarkus.io

[holly-cummins]

I notice the whole menu component flashes when navigating from the main site to extensions, breaking the illusion that it's a single site.

There are a few possible solutions

• Always host the top menu in the parent, and embed extensions in an iframe. This feels clunky but some microfrontend frameworks use this kind of solution. It's also invasive to the parent site, and means anyone visiting the 'actual' url would see a naked site, unless we had all sorts of circular redirections.
• Use link prefetching to pre-load the extensions page. This is wasteful for people who don't visit the page, and ideally we would want to only preload the menu, not the whole card list.
• Use some of the performance optimisations described in https://blog.bitsrc.io/how-we-achieved-smooth-navigation-across-micro-frontends-42130577924d
• Try and externalise the css to make sure the menu uses the same css as the main site. This would also ensure consistency, but because the parent css is so complex, would have technical risks about unintended consequences of changes on the parent site.
• ...?

[holly-cummins]

Lighthouse confirms that it's ... uh ... not good:

These are the failing checks:

Largest Contentful Paint

Largest Contentful Paint marks the time at which the largest text or image is painted. Learn more about the Largest Contentful Paint metric

Total Blocking Time

Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. Learn more about the Total Blocking Time metric.

Max Potential First Input Delay

The maximum potential First Input Delay that your users could experience is the duration of the longest task. Learn more about the Maximum Potential First Input Delay metric.

Avoid an excessive DOM size

A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn how to avoid an excessive DOM size.

Minimize main-thread work

Consider reducing the time spent parsing, compiling and executing JS. You may find delivering smaller JS payloads helps with this. Learn how to minimize main-thread work

Page prevented back/forward cache restoration

Many navigations are performed by going back to a previous page, or forwards again. The back/forward cache (bfcache) can speed up these return navigations. Learn more about the bfcache