1 files changed, 49 insertions, 0 deletions
diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md
index b6130335654..dd3945ae324 100644
--- a/doc/development/fe_guide/performance.md
+++ b/doc/development/fe_guide/performance.md
@@ -246,6 +246,55 @@ Layout to be recalculated, which is much more expensive. For details on this, se
 If you _do_ need to change layout (for example, a sidebar that pushes main content over), prefer [FLIP](https://aerotwist.com/blog/flip-your-animations/). FLIP allows you to change expensive
 properties once, and handle the actual animation with transforms.
 
+### Prefetching assets
+
+In addition to prefetching data from the [API](graphql.md#making-initial-queries-early-with-graphql-startup-calls)
+we allow prefetching the named JavaScript "chunks" as
+[defined in the Webpack configuration](https://gitlab.com/gitlab-org/gitlab/-/blob/master/config/webpack.config.js#L298-359).
+We support two types of prefetching for the chunks:
+
+- The [`prefetch` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/prefetch)
+  is used to prefetch a chunk for the future navigation
+- The [`preload` link type](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preloadh)
+  is used to prefetch a chunk that is crucial for the current navigation but is not 
+  discovered until later in the rendering process
+
+Both `prefetch` and `preload` links bring the loading performance benefit to the pages. Both are 
+fetched asynchronously, but contrary to [deferring the loading](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer)
+of the assets which is used for other JavaScript resources in the product by default, `prefetch` and
+`preload` neither parse nor execute the fetched script unless explicitly imported in any JavaScript 
+module. This allows to cache the fetched resources without blocking the execution of the 
+remaining page resources.
+
+To prefetch a JavaScript chunk in a HAML view, `:prefetch_asset_tags` with the combination of 
+the `webpack_preload_asset_tag` helper is provided:
+
+```javascript
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco')
+```
+
+This snippet will add a new `<link rel="preload">` element into the resulting HTML page:
+
+```HTML
+<link rel="preload" href="/assets/webpack/monaco.chunk.js" as="script" type="text/javascript">
+```
+
+By default, `webpack_preload_asset_tag` will `preload` the chunk. You don't need to worry about 
+`as` and `type` attributes for preloading the JavaScript chunks. However, when a chunk is not 
+critical, for the current navigation, one has to explicitly request `prefetch`:
+
+```javascript
+- content_for :prefetch_asset_tags do
+  - webpack_preload_asset_tag('monaco', prefetch: true)
+```
+
+This snippet will add a new `<link rel="prefetch">` element into the resulting HTML page:
+
+```HTML
+<link rel="prefetch" href="/assets/webpack/monaco.chunk.js">
+```
+
 ## Reducing Asset Footprint
 
 ### Universal code