This document aims to help domestic users learning Framer who face difficulties due to the lack of Korean materials by translating official blog content into Korean and adding practical information. We hope this will be of some help to those using Framer.

Framer's Loading Optimization Features

Framer offers loading optimization features for videos to maintain website speed. However, it currently does not convert video files or optimize their size.

1. Principles of Loading Optimization

Rendering videos can strain performance, especially on mobile devices. Framer delays video playback to reduce battery and data usage on your website.

To activate optimization, follow these two steps:

1. Add a poster to all videos.
   Note: This can also have a positive SEO impact.

2. Keep the Video component up-to-date in the Assets tab of Framer.

Framer's video optimization includes the following features:

• Lazy Loading of Videos with Posters
  With posters, videos only load when they approach the viewport, speeding up initial load time. For example, videos at the bottom of a page load just as the user scrolls near them, dramatically increasing initial page speed.

• Pause Playback for GIF-like Videos Outside Viewport
  Videos that play muted, looped, and automatically (acting like GIFs) pause when leaving the viewport. This prevents unnecessary resource consumption.

2. How to Optimize the Video Files Themselves

1. Optimize Video Content Before Uploading
   Framer does not convert uploaded videos, so a 4K video plays as 4K on small screens.

   • Apply Adaptive Quality
     To apply adaptive quality based on user screen or network speed, use Framer's Insert panel to select YouTube or Vimeo components.

   • Compress Videos
     To compress videos, try using ffmpeg (web version) or Handbrake with the "Web Optimized" setting.
     
     

2. Choose Recommended File Formats and Codecs
   The AV1 codec is not supported by some older iOS and macOS versions. For reliable playback across most browsers, use the H.264 codec with a .mp4 extension.

movflags +faststart

Note: Advanced users can add this command when running ffmpeg to improve browser playback speed.

Why Framer Doesn’t Optimize Video Files Directly

Video optimization is complex and costly. To effectively optimize video files, large-scale media processing infrastructure like YouTube or Vimeo is needed. Nevertheless, Framer focuses on creating a simple and fast website building experience instead of building such video streaming services.

If issues persist after following all document steps, contact the support team through Framer’s Contact page.

This article is a translated and adapted version of Framer's official blog content ‘How videos are optimized in Framer’.