Hello, During the optimization of a high-performance landing page in Framer, I identified several technical issues that significantly affect the mobile experience. I would like to report them for the product team's consideration. FIRST: Rendering Multiple Breakpoints When a component is on Desktop, Tablet, and Mobile, Framer renders all three variants in the server-side HTML, even those hidden with display: none . On a mobile device, the browser downloads all images in parallel: desktop (1366px, 64KB), tablet (1024px, 48KB), and mobile (480px, 23KB), totaling 135KB when only 23KB would be necessary. This increases the LCP from 2.5s to 5s on a 4G connection. I monitored this in the DevTools Network and confirmed the behavior. SUGGESTION: Render only the active breakpoint on the server; do not render hidden elements from inactive breakpoints. SECOND: Unoptimized Image Formats Framer does not natively support AVIF, which is 30-40% smaller than WebP and 60% smaller than JPEG in visual equivalence. Currently, images are served in WebP as a fallback, but AVIF significantly reduces download time, especially on 3G/4G mobile. Furthermore, there is no option to serve different formats via <picture> with media queries to optimize per device. SUGGESTION: Implement support for AVIF as the primary format with WebP as a fallback (AVIF → WebP → JPEG). Allow format configuration per breakpoint or automatic. THIRD: Videos Not Working on iOS HTML5 videos with autoplay, muted, and playsInline work perfectly on Android/Chrome, but do not load on Safari iOS without an error. I tested with MP4 H.264 Profile Main Level 3.1 (recommended codec). The element is not displayed, hindering the visual experience on iPhones. SUGGESTION: Ensure compatibility with Safari iOS or offer automatic fallback (static image or CSS animation). FOURTH: Ineffective Lazy Loading Below-the-fold components with loading="lazy" and fetchPriority="low" load simultaneously with the hero. SSR renders the entire page at once, and React hydrates everything together, not respecting true lazy loading. SUGGESTION: Implement incremental hydration or lazy-rendering on the server for below-the-fold elements. FIFTH: Double Rendering (SSR + Hydration) The images appear twice in the Network: once from SSR (server) and once from React hydrating (client). This is expected Framer behavior, but it causes unnecessary duplicate requests in SSR. SUGGESTION: Implement request dedupolicy or intelligent cache-busting between SSR and client hydration. SIXTH: Lack of Strategic Preloading There is no native interface for preloading critical assets (hero images, fonts, videos). Users need to manually add custom code to the <head>. SUGGESTION: Add an "Asset Preload" panel where the user can mark which components should have automatic preloading. SEVENTH: Width and Height Do Not Reserve Space Although components have defined width/height, Framer does not always render the width/height attributes in the <img>, causing CLS (Cumulative Layout Shift) due to reflow when the image loads. SUGGESTION: Always include native width/height attributes in <img> tags to reserve space and avoid CLS. EIGHTH: Lack of Format Negotiation for Images Framer's CDN does not negotiate format based on the browser's Accept header. Modern browsers send Accept: image/avif, but receive WebP. SUGGESTION: Implement content negotiation via the Accept header to serve AVIF when supported. METRICS OBSERVED DOMContentLoaded: 147ms Load: 698ms Images loaded: 5 when it should be 1-2 on mobile Video: doesn't work on iOS CLS: affected by lack of width/height CURRENTLY I am working around these problems with custom code, components separated by breakpoints, and manual preloading. Native support for these scenarios would be very valuable. Thank you for your attention and consideration of these improvements.
