Runtime page load duration

Method

To compare ‘traditional’ load time vs. module federation (runtime module loading and shared dependencies) load time, we will:

1. Ensure that the guest MFEs content is the largest content loaded on the page so that Largest Contentful Paint measures against when it loads.

2. Traditional: Record Lighthouse’s measurement for Largest Contentful Paint when loading the host MFE with a “traditional” config without any modules from the Guest. Then record LCP for the guest MFE with a “traditional” config. Add the two together.

3. IFrame: Add an iframe to the host MFE that displays the guest MFE and measure LCP (hopefully it still uses the guest MFE’s content as LCP)

4. Module Federation: Measure LCP for the host MFE plus the module from the guest MFE.

A few notes:

• I removed the New Relic script from the HTML file.

• The content is being served ungzipped, which would significantly reduce the amount of bytes being transferred.

• The “Traditional” and “IFrame” tests both need to treat the guest as a full MFE, which means it will have a larger code bundle and will involve a full page refresh. (This is, of course, something we want to get away from, and so is a valid part of proving our performance has improved!)

• All of these tests are testing “load the frontend and then navigate to an MFE page” in spirit. All three are assuming the entry point is a ‘simple’ page that doesn’t load a lot of content, and then we show navigate to and show the guest MFE content. In order to do this in a way that LCP can be calculated in a meaningful way, the module federation and iframe approaches just load the guest MFE right away and forego any interactivity - i.e., you don’t have to click a link to get it to do it. In the “Traditional” MFEs, we’re just adding the two load times together.

Throttling for all tests

Desktop

Unthrottled CPU/Memory Power: 2939 CPU throttling: 4x slowdown (Simulated) Screen emulation: 412x823, DPR 1.75 Axe version: 4.8.1

Network throttling: 40 ms TCP RTT, 10,240 kb/s throughput (Simulated)

Mobile

Unthrottled CPU/Memory Power: 2939 CPU throttling: 4x slowdown (Simulated) Screen emulation: 412x823, DPR 1.75 Axe version: 4.8.1

Network throttling: 150 ms TCP RTT, 1,638.4 kb/s throughput (Simulated)

Traditional

This is an “apples to oranges” comparison to the Module Federation numbers because the loading profile is so different. In this test, I’m using Lighthouse on the host and guest pages separately and then combining their LCP scores.