### What is Facade? **Facade \= Fake display.** Instead of waiting for a full HD video to download and start playing \- we can show an image placeholder while it loads, then switch them when the video is ready. If we use the first frame of the video \- it is a smooth transition once the video begins to play. This is much better visually than loading a blank square, and satisfied LCP. ## How to implement {{disclaimer}} ### Setup - **Find where your video is in the codebase**. For this [CLICK HERE](/training/site-speed-guide/finding-assets-in-the-code) for the fastest way to identify them ### Method Requires code access. Use **Online Store > Edit Theme Code**, or download the theme and edit locally. ***Likely you are already using video, and it is part of your theme**. This tutorial will take that assumption, and show you how to change a video section. If you need to build your OWN video section: [USE THIS TUTORIAL](https://baseline-commerce.com/blog/improve-site-speed-lazy-loading-videos)* 1. **Find the video you want to apply lazy loading to**, and u**pdate your video to use the \ element**. This lets you change different sizes depending on the screen (for desktop and mobile) \- skip if you do not have desktop / mobile video sizes This assumes: - your section uses **mobile\_video** for the **mobile video** (confirm in the %schema at the bottom of the page) - your section uses **desktop\_video** for the **desktop video** (confirm in the %schema at the bottom of the page) ```html

``` 2. **Add your preview images just above your video**. This should be the first frame of your video: For this to work: The **mobile\_video** and **desktop\_video** settings must be present. This uses Shopify to grab the first frame ```html {%- liquid assign desktop_poster = section.settings.desktop_video.preview_image assign mobile_poster = section.settings.mobile_video.preview_image -%} ``` 3. Wrap them both in a **\** with the attribute **class=”video-wrapper”** ```html

... image code here ... video code here

``` 4. **In your theme.liquid,** add this CSS at the top of **\** ```html ``` 5. You should now be ready to test\! The image should display immediately and once your video has loaded \- it will start to play. —-- **Caveats:** - **Only use this on the LCP / Above the fold videos**. For videos below the fold \- checkout [LAZY LOAD NON-CRITICAL VIDEO](/training/site-speed-guide/lazy-load-non-critical-video) ### Testing {{compare-reports}} LCP should be faster. {{ttfb-caveat}}