1504246 - Experiment if inline interactive examples will have a sufficient impact on page load versus iframe

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Performance, enhancement, P1)

Description

[John Whitlock [:jwhitlock]]

Interactive examples, introduced in 2018, are loaded via an iframe, so that we benefit from the browser's security model. However, they appear to be a large component of page load time.

As an experiment, load the source for an interactive example as inline JS, CSS, and markup, and measure the effect on page load, versus the same metrics in the previous week.  This will determine if it is worth pursuing an inline strategy with proper reviews and security mitigations.

This work is already in progress:

* https://github.com/mozilla/kuma/pull/5019
* https://github.com/mdn/sprints/issues/467

Comment 1

[[github robot]]

Commit pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/c1ae253bc6122561e97c066a58dde7ba163fc9e8
bug 1504246: Manually inline a set of examples for testing in production (#5019)

* Insert a function for substituting macros after sanitizing. Allows macros of the form ``@MacroNameGoesHere@`` to be replaced with arbitrary HTML not subject to the ordinary sanitizating process.
* Add inline interactive examples for JS Array reference pages
* Allow messages from https://developer.mozilla.org in ``perf-post-message-handler.js``

Comment 2

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/085f594c200208a4f03d01e91217fbba028b991e
Revert "bug 1504246: Manually inline a set of examples for testing in production (#5019)"

This reverts commit c1ae253bc6122561e97c066a58dde7ba163fc9e8.

https://github.com/mozilla/kuma/commit/6bb573900c4391a844761aecce37fe641c8f89f3
Merge pull request #5099 from hobinjk/revert-manual-inlined-examples

Revert "bug 1504246: Manually inline a set of examples for testing in…

Comment 3

[John Whitlock [:jwhitlock]]

On the test page, the results, averaged over 5 runs, are:

• Interactive example as iframe:
  • Starts at 3.3 seconds
  • Interactive at 3.9 seconds
  • Complete at 4.5 seconds
  • 1.3 seconds to load (complete - start)
• Interactive example as inlined code:
  • Starts at 0.0 seconds
  • Interactive at 0.8 seconds
  • Complete at 3.1 seconds
  • 3.1 seconds to load (complete - start)

Source data, with loading videos, are available for Mozilla employees at: https://docs.google.com/spreadsheets/d/14-Vjq-gmZSB1Y7ZI8jexnowTTpVSJLvrTAS5nMCjbNU/edit?usp=sharing

Inlining examples would have a significant performance gain.