Resolve "Lazy load images on the Frontend"

1 files changed, 12 insertions, 0 deletions

diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md
index 2ddcbe13afa..f25313d6cff 100644
--- a/doc/development/fe_guide/performance.md
+++ b/doc/development/fe_guide/performance.md
@@ -23,6 +23,18 @@ controlled by the server.
 1. The backend code will most likely be using etags. You do not and should not check for status
 `304 Not Modified`. The browser will transform it for you.
 
+### Lazy Loading
+
+To improve the time to first render we are using lazy loading for images. This works by setting 
+the actual image source on the `data-src` attribute. After the HTML is rendered and JavaScript is loaded, 
+the value of `data-src` will be moved to `src` automatically if the image is in the current viewport.
+
+*  Prepare images in HTML for lazy loading by renaming the `src` attribute to `data-src`
+*  If you are using the Rails `image_tag` helper, all images will be lazy-loaded by default unless `lazy: false` is provided.
+
+If you are asynchronously adding content which contains lazy images then you need to call the function
+`gl.lazyLoader.searchLazyImages()` which will search for lazy images and load them if needed.
+
 ## Reducing Asset Footprint
 
 ### Page-specific JavaScript