[{"data":1,"prerenderedAt":1087},["ShallowReactive",2],{"blog-category-performance":3},[4],{"id":5,"title":6,"author":7,"body":11,"category":609,"description":1039,"extension":1040,"featured":1041,"image":1042,"meta":1043,"navigation":1041,"path":1074,"published":1041,"publishedAt":1075,"readingTime":1076,"robots":1077,"seo":1078,"slug":1079,"stem":1080,"tags":1081,"updatedAt":1085,"__hash__":1086},"blog/blog/optimize-framer-site-performance.md","Framer Site Performance Optimization (10x Faster Load Times)",{"name":8,"avatar":9,"bio":10},"Shahul","/shahul-profile-pic.jpg","Founder of FramerHub",{"type":12,"value":13,"toc":995},"minimark",[14,23,26,33,38,45,68,71,75,82,87,94,98,101,121,127,131,138,142,149,153,157,171,175,178,182,189,209,214,346,351,445,448,452,455,459,465,482,485,489,492,496,503,507,511,522,526,529,537,541,552,556,562,566,569,573,581,585,592,596,611,616,672,676,686,690,697,701,704,731,735,739,742,746,753,761,767,771,774,828,831,835,838,864,868,871,930,933,937,943,946,951,968,986,991],[15,16,17,18,22],"p",{},"Your ",[19,20,21],"strong",{},"Framer site performance"," directly impacts your bounce rate, your conversions, and your SEO ranking — all three, simultaneously, from the same root cause.",[15,24,25],{},"A site that loads in 1 second converts meaningfully better than one that loads in 5 seconds; Google's own research on this gap has been consistent for years, and it hasn't gotten more forgiving as user expectations have risen.",[15,27,28,29,32],{},"In this guide, you'll learn the exact, practical steps to ",[19,30,31],{},"optimize Framer site performance"," and hit fast load times consistently, even with animations, images, CMS collections, and custom code components in play.",[34,35,37],"h2",{"id":36},"why-framer-performance-matters","Why Framer Performance Matters",[15,39,40,41,44],{},"Google uses ",[19,42,43],{},"Core Web Vitals"," as a ranking factor. If your Framer site is slow, you're losing on three fronts at once:",[46,47,48,56,62],"ul",{},[49,50,51,52,55],"li",{},"🚫 ",[19,53,54],{},"SEO rankings"," — Google measurably deprioritizes slow, unstable pages in competitive results.",[49,57,51,58,61],{},[19,59,60],{},"Conversions"," — users bounce before they ever see your CTA, no matter how good it is.",[49,63,51,64,67],{},[19,65,66],{},"Client trust"," — agencies need demonstrably performant sites for client handoff; a slow demo undercuts a strong design.",[15,69,70],{},"The good news: Framer is fast by default relative to most page builders. But \"by default\" has limits — the ten tactics below are what push a Framer site from \"fine\" to genuinely fast.",[34,72,74],{"id":73},"_1-image-optimization-the-biggest-performance-killer","1. Image Optimization (The Biggest Performance Killer)",[15,76,77,78,81],{},"Images account for ",[19,79,80],{},"50-70%"," of most pages' total weight. Optimize them first, before anything else on this list — it's the highest-leverage fix available.",[83,84,86],"h3",{"id":85},"use-webp-format-automatic-in-framer","Use WebP Format (Automatic in Framer)",[15,88,89,90,93],{},"Framer automatically converts uploaded images to ",[19,91,92],{},"WebP",", a modern format that's typically 25-35% smaller than PNG/JPEG at equivalent visual quality. Don't disable this feature — there's essentially no reason to.",[83,95,97],{"id":96},"compress-before-uploading","Compress Before Uploading",[15,99,100],{},"Don't upload 10MB source images and rely on Framer's conversion to fix it — conversion changes format, it doesn't fix an oversized source file. Compress first using:",[46,102,103,109,115],{},[49,104,105,108],{},[19,106,107],{},"TinyPNG"," (free, browser-based)",[49,110,111,114],{},[19,112,113],{},"ImageOptim"," (Mac app)",[49,116,117,120],{},[19,118,119],{},"Squoosh"," (Google's free web app, works cross-platform)",[15,122,123,126],{},[19,124,125],{},"Target file size:"," Under 500KB for most images, under 200KB for anything appearing below the fold.",[83,128,130],{"id":129},"use-correct-dimensions","Use Correct Dimensions",[15,132,133,134,137],{},"If you're displaying an image at 500px wide, don't upload a 4000px source. ",[19,135,136],{},"Rule of thumb:"," upload at roughly 2x the display size (for retina screens), but no larger — a 4x oversized image adds load weight with zero visible quality benefit.",[83,139,141],{"id":140},"lazy-load-off-screen-images","Lazy Load Off-Screen Images",[15,143,144,145,148],{},"Framer automatically lazy-loads images below the fold. But your hero image is almost always the ",[19,146,147],{},"Largest Contentful Paint (LCP)"," element — it loads immediately, so it needs to be the single most aggressively optimized image on the page.",[34,150,152],{"id":151},"_2-minimize-code-components-overrides","2. Minimize Code Components & Overrides",[83,154,156],{"id":155},"only-use-what-you-actually-need","Only Use What You Actually Need",[15,158,159,160,164,165,170],{},"Every code component adds JavaScript to your page. Before installing one, ask: ",[161,162,163],"em",{},"\"Do I really need this, or can native Framer layers achieve the same result?\""," (New to code components? Read our ",[166,167,169],"a",{"href":168},"/blog/getting-started-framer-components","beginner's guide to adding code components to Framer",".)",[83,172,174],{"id":173},"remove-unused-variants","Remove Unused Variants",[15,176,177],{},"If a component ships with 5 variants but you only use 2 on this project, duplicate the component and delete the unused variants where possible. This trims dead weight from the bundle.",[83,179,181],{"id":180},"optimize-code-overrides","Optimize Code Overrides",[15,183,184,185,188],{},"If you're using ",[19,186,187],{},"Framer code overrides",", follow these rules:",[46,190,191,203,206],{},[49,192,193,194,198,199,202],{},"✅ Use ",[195,196,197],"code",{},"useMemo"," and ",[195,200,201],{},"useCallback"," to prevent unnecessary re-renders.",[49,204,205],{},"✅ Avoid heavy calculations inside the render path.",[49,207,208],{},"✅ Keep overrides simple and single-purpose.",[15,210,211],{},[19,212,213],{},"Bad override (causes lag):",[215,216,221],"pre",{"className":217,"code":218,"language":219,"meta":220,"style":220},"language-javascript shiki shiki-themes github-light github-dark","export function HeavyOverride(Component): ComponentType {\n  return (props) => {\n    // Runs on every single render\n    const data = expensiveCalculation()\n    return \u003CComponent {...props} data={data} />\n  }\n}\n","javascript","",[195,222,223,259,279,286,305,334,340],{"__ignoreMap":220},[224,225,228,232,235,239,243,247,250,253,256],"span",{"class":226,"line":227},"line",1,[224,229,231],{"class":230},"szBVR","export",[224,233,234],{"class":230}," function",[224,236,238],{"class":237},"sScJk"," HeavyOverride",[224,240,242],{"class":241},"sVt8B","(",[224,244,246],{"class":245},"s4XuR","Component",[224,248,249],{"class":241},")",[224,251,252],{"class":230},":",[224,254,255],{"class":237}," ComponentType",[224,257,258],{"class":241}," {\n",[224,260,262,265,268,271,274,277],{"class":226,"line":261},2,[224,263,264],{"class":230},"  return",[224,266,267],{"class":241}," (",[224,269,270],{"class":245},"props",[224,272,273],{"class":241},") ",[224,275,276],{"class":230},"=>",[224,278,258],{"class":241},[224,280,282],{"class":226,"line":281},3,[224,283,285],{"class":284},"sJ8bj","    // Runs on every single render\n",[224,287,289,292,296,299,302],{"class":226,"line":288},4,[224,290,291],{"class":230},"    const",[224,293,295],{"class":294},"sj4cs"," data",[224,297,298],{"class":230}," =",[224,300,301],{"class":237}," expensiveCalculation",[224,303,304],{"class":241},"()\n",[224,306,308,311,314,316,319,322,325,328,331],{"class":226,"line":307},5,[224,309,310],{"class":230},"    return",[224,312,313],{"class":241}," \u003C",[224,315,246],{"class":294},[224,317,318],{"class":241}," {",[224,320,321],{"class":230},"...",[224,323,324],{"class":241},"props} ",[224,326,327],{"class":237},"data",[224,329,330],{"class":230},"=",[224,332,333],{"class":241},"{data} />\n",[224,335,337],{"class":226,"line":336},6,[224,338,339],{"class":241},"  }\n",[224,341,343],{"class":226,"line":342},7,[224,344,345],{"class":241},"}\n",[15,347,348],{},[19,349,350],{},"Good override (optimized):",[215,352,354],{"className":217,"code":353,"language":219,"meta":220,"style":220},"export function OptimizedOverride(Component): ComponentType {\n  return (props) => {\n    // Only recalculates when dependencies actually change\n    const data = useMemo(() => expensiveCalculation(), [])\n    return \u003CComponent {...props} data={data} />\n  }\n}\n",[195,355,356,377,391,396,417,437,441],{"__ignoreMap":220},[224,357,358,360,362,365,367,369,371,373,375],{"class":226,"line":227},[224,359,231],{"class":230},[224,361,234],{"class":230},[224,363,364],{"class":237}," OptimizedOverride",[224,366,242],{"class":241},[224,368,246],{"class":245},[224,370,249],{"class":241},[224,372,252],{"class":230},[224,374,255],{"class":237},[224,376,258],{"class":241},[224,378,379,381,383,385,387,389],{"class":226,"line":261},[224,380,264],{"class":230},[224,382,267],{"class":241},[224,384,270],{"class":245},[224,386,273],{"class":241},[224,388,276],{"class":230},[224,390,258],{"class":241},[224,392,393],{"class":226,"line":281},[224,394,395],{"class":284},"    // Only recalculates when dependencies actually change\n",[224,397,398,400,402,404,407,410,412,414],{"class":226,"line":288},[224,399,291],{"class":230},[224,401,295],{"class":294},[224,403,298],{"class":230},[224,405,406],{"class":237}," useMemo",[224,408,409],{"class":241},"(() ",[224,411,276],{"class":230},[224,413,301],{"class":237},[224,415,416],{"class":241},"(), [])\n",[224,418,419,421,423,425,427,429,431,433,435],{"class":226,"line":307},[224,420,310],{"class":230},[224,422,313],{"class":241},[224,424,246],{"class":294},[224,426,318],{"class":241},[224,428,321],{"class":230},[224,430,324],{"class":241},[224,432,327],{"class":237},[224,434,330],{"class":230},[224,436,333],{"class":241},[224,438,439],{"class":226,"line":336},[224,440,339],{"class":241},[224,442,443],{"class":226,"line":342},[224,444,345],{"class":241},[15,446,447],{},"The difference looks small in code but compounds fast — an override re-running an expensive calculation on every scroll or resize event can measurably tank your INP score.",[34,449,451],{"id":450},"_3-reduce-animation-complexity","3. Reduce Animation Complexity",[15,453,454],{},"Animations are a huge part of what makes Framer sites feel premium, but done wrong, they tank performance fast.",[83,456,458],{"id":457},"use-transforms-not-position-changes","Use Transforms (Not Position Changes)",[15,460,461,464],{},[19,462,463],{},"Bad (janky):"," Animate raw X/Y position values directly.",[15,466,467,470,471,474,475,198,478,481],{},[19,468,469],{},"Good (smooth):"," Animate ",[195,472,473],{},"translateX","/",[195,476,477],{},"translateY",[195,479,480],{},"scale"," instead of raw position or width/height.",[15,483,484],{},"Transforms run on the GPU and skip layout recalculation entirely; animating position or size properties forces the browser to recompute layout on every single frame.",[83,486,488],{"id":487},"limit-simultaneous-animations","Limit Simultaneous Animations",[15,490,491],{},"Don't animate 50 elements at once on page load. Stagger them, or reduce the total count — a burst of simultaneous animations is one of the most common causes of visible jank on first load.",[83,493,495],{"id":494},"reduce-animation-complexity-on-mobile","Reduce Animation Complexity on Mobile",[15,497,498,499,502],{},"Mobile devices generally have less processing headroom than desktop. Use Framer's ",[19,500,501],{},"Breakpoint"," feature to simplify, shorten, or disable heavier animations specifically on mobile, rather than shipping the desktop animation set unchanged.",[34,504,506],{"id":505},"_4-optimize-fonts","4. Optimize Fonts",[83,508,510],{"id":509},"use-system-fonts-when-possible","Use System Fonts When Possible",[15,512,513,514,517,518,521],{},"System fonts (",[195,515,516],{},"-apple-system",", ",[195,519,520],{},"Segoe UI",", and similar) load instantly because they're already installed on the user's device — zero network request required.",[83,523,525],{"id":524},"limit-font-weights","Limit Font Weights",[15,527,528],{},"If you're using Google Fonts or a similar web-font service, don't import all 9 weights when you only use 2-3.",[215,530,535],{"className":531,"code":533,"language":534},[532],"language-text","// Bad — loads 9 separate font files\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900');\n\n// Good — loads 3 font files\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700');\n","text",[195,536,533],{"__ignoreMap":220},[83,538,540],{"id":539},"preload-critical-fonts","Preload Critical Fonts",[15,542,543,544,547,548,551],{},"In Framer, add a ",[195,545,546],{},"\u003Clink rel=\"preload\">"," tag in ",[19,549,550],{},"Site Settings → Custom Code (Head)"," to load your primary font earlier in the page's request waterfall, reducing the \"flash of unstyled text\" some browsers show while fonts load.",[34,553,555],{"id":554},"_5-optimize-framer-cms-queries","5. Optimize Framer CMS Queries",[15,557,184,558,561],{},[19,559,560],{},"Framer CMS",", large collections can slow a page down in ways that aren't obvious from a quick glance.",[83,563,565],{"id":564},"limit-cms-items-per-page","Limit CMS Items Per Page",[15,567,568],{},"Don't render 100 blog posts on a single page load. Use pagination or \"load more\" patterns and render 9-12 items initially.",[83,570,572],{"id":571},"use-filters-wisely","Use Filters Wisely",[15,574,575,576,580],{},"CMS filters are powerful, but filtering hundreds of items entirely client-side (in the browser) is slow, especially on mobile. If you have large datasets — hundreds or thousands of items — a purpose-built solution like a ",[166,577,579],{"href":578},"/plugins/framer-cms-filter","CMS filtering plugin"," handles this far more efficiently than a naive client-side filter built from scratch.",[34,582,584],{"id":583},"_6-test-your-framer-site-performance","6. Test Your Framer Site Performance",[15,586,587,588,591],{},"Use these tools to measure your ",[19,589,590],{},"Framer site speed"," — don't guess, measure:",[83,593,595],{"id":594},"lighthouse-chrome-devtools","Lighthouse (Chrome DevTools)",[15,597,598,599,602,603,606,607,610],{},"Open your site in Chrome, right-click → ",[19,600,601],{},"Inspect"," → ",[19,604,605],{},"Lighthouse tab",", run the audit for ",[19,608,609],{},"Performance",".",[15,612,613],{},[19,614,615],{},"Target scores:",[617,618,619,635],"table",{},[620,621,622],"thead",{},[623,624,625,629,632],"tr",{},[626,627,628],"th",{},"Metric",[626,630,631],{},"Target",[626,633,634],{},"What it measures",[636,637,638,650,661],"tbody",{},[623,639,640,644,647],{},[641,642,643],"td",{},"LCP (Largest Contentful Paint)",[641,645,646],{},"Under 2.5s",[641,648,649],{},"Time until the biggest visible element renders",[623,651,652,655,658],{},[641,653,654],{},"INP (Interaction to Next Paint)",[641,656,657],{},"Under 200ms",[641,659,660],{},"Responsiveness to clicks and taps",[623,662,663,666,669],{},[641,664,665],{},"CLS (Cumulative Layout Shift)",[641,667,668],{},"Under 0.1",[641,670,671],{},"Visual stability as the page loads",[83,673,675],{"id":674},"webpagetest","WebPageTest",[15,677,678,679,685],{},"Go to ",[166,680,684],{"href":681,"rel":682},"https://webpagetest.org",[683],"nofollow","webpagetest.org"," and test from multiple geographic locations — a site fast from a US test location can be noticeably slower from other regions if your CDN setup isn't configured well.",[83,687,689],{"id":688},"framers-built-in-preview","Framer's Built-In Preview",[15,691,692,693,696],{},"Use the ",[19,694,695],{},"Preview"," feature to spot-check across devices before publishing, but don't treat it as a substitute for a real Lighthouse or PageSpeed audit — preview mode doesn't always reflect real-world network conditions.",[34,698,700],{"id":699},"diagnosing-a-slow-page-a-quick-framework","Diagnosing a Slow Page: A Quick Framework",[15,702,703],{},"When a specific page is slow and you're not sure why, work through these in order — they're ranked by how often they're the actual cause:",[705,706,707,713,719,725],"ol",{},[49,708,709,712],{},[19,710,711],{},"Check the hero image size."," Open DevTools' Network tab, reload, and sort by size. If the largest single file is an unoptimized hero image, that's your LCP problem, solved by re-compressing it.",[49,714,715,718],{},[19,716,717],{},"Count code components on the page."," More than 6-8 heavy interactive components on one page is a common source of unexplained lag — audit whether each one is pulling its weight.",[49,720,721,724],{},[19,722,723],{},"Check for layout shift sources."," Images or embeds without a reserved aspect ratio are the most common CLS culprit — set explicit dimensions so the browser reserves space before the asset loads.",[49,726,727,730],{},[19,728,729],{},"Review third-party scripts."," A chat widget, an old analytics snippet, or an embedded video player can each add hundreds of milliseconds independently of anything in your Framer build itself.",[34,732,734],{"id":733},"_7-additional-performance-tips","7. Additional Performance Tips",[83,736,738],{"id":737},"enable-cloudflare-if-using-a-custom-domain","Enable Cloudflare (If Using a Custom Domain)",[15,740,741],{},"Cloudflare's CDN can cache your Framer site and serve it from the server nearest to each visitor, reducing latency meaningfully for a global audience.",[83,743,745],{"id":744},"minimize-third-party-scripts","Minimize Third-Party Scripts",[15,747,748,749,752],{},"Every analytics script, chat widget, and tracking pixel adds load time. Audit what you ",[161,750,751],{},"actually"," use regularly — it's common to find scripts from tools nobody's checked in months.",[83,754,756,757,760],{"id":755},"use-loadinglazy-on-iframes","Use ",[195,758,759],{},"loading=\"lazy\""," on Iframes",[15,762,763,764,766],{},"If you embed YouTube videos or maps, add ",[195,765,759],{}," so they don't load until the user actually scrolls near them.",[34,768,770],{"id":769},"framers-built-in-performance-advantages-vs-what-you-control","Framer's Built-In Performance Advantages vs. What You Control",[15,772,773],{},"It's worth being clear about where Framer's platform-level performance ends and where your build decisions take over — this is where most confusion about \"why is my site slow if Framer is fast\" comes from.",[617,775,776,786],{},[620,777,778],{},[623,779,780,783],{},[626,781,782],{},"Handled by Framer automatically",[626,784,785],{},"Still your responsibility",[636,787,788,796,804,812,820],{},[623,789,790,793],{},[641,791,792],{},"WebP image conversion",[641,794,795],{},"Compressing/resizing images before upload",[623,797,798,801],{},[641,799,800],{},"CDN-backed hosting",[641,802,803],{},"Choosing whether to add Cloudflare on top for a custom domain",[623,805,806,809],{},[641,807,808],{},"Below-the-fold lazy loading",[641,810,811],{},"Optimizing the hero image specifically (it's not lazy-loaded)",[623,813,814,817],{},[641,815,816],{},"Reasonably clean base HTML/CSS output",[641,818,819],{},"How many code components and overrides you stack on one page",[623,821,822,825],{},[641,823,824],{},"SSL and basic security headers",[641,826,827],{},"Third-party script bloat (chat widgets, trackers, embeds)",[15,829,830],{},"Understanding this split matters because it tells you where to actually spend your optimization time. Chasing platform-level settings that are already handled wastes effort; the real gains almost always come from the \"your responsibility\" column.",[34,832,834],{"id":833},"monitoring-performance-over-time-not-just-at-launch","Monitoring Performance Over Time, Not Just at Launch",[15,836,837],{},"A site that scores well in Lighthouse at launch can quietly degrade over months as content, images, and third-party scripts accumulate. A few habits keep performance from silently regressing:",[46,839,840,846,852,858],{},[49,841,842,845],{},[19,843,844],{},"Re-run Lighthouse quarterly",", not just once at launch. CMS collections grow, marketing adds a new tracking pixel, someone uploads an unoptimized hero image during a content refresh — all of these erode performance gradually.",[49,847,848,851],{},[19,849,850],{},"Set a rough performance budget"," before you start adding new sections or components — for example, \"hero section stays under 300KB total\" — and check new additions against it instead of only noticing after the page feels slow.",[49,853,854,857],{},[19,855,856],{},"Audit third-party scripts on a recurring basis."," Marketing and sales teams add tracking snippets and chat widgets over time; few teams ever remove old ones. A yearly script audit routinely finds two or three that are no longer used.",[49,859,860,863],{},[19,861,862],{},"Watch for CMS growth specifically."," A blog that launches with 10 posts and grows to 500 needs pagination and filtering strategies revisited — what worked at 10 items can become the slowest part of the site at 500.",[34,865,867],{"id":866},"real-numbers-what-fast-actually-looks-like","Real Numbers: What \"Fast\" Actually Looks Like",[15,869,870],{},"To make the targets above concrete, here's what a well-optimized Framer marketing site typically achieves versus one that hasn't had any performance pass:",[617,872,873,885],{},[620,874,875],{},[623,876,877,879,882],{},[626,878,628],{},[626,880,881],{},"Unoptimized typical",[626,883,884],{},"Well-optimized target",[636,886,887,898,908,919],{},[623,888,889,892,895],{},[641,890,891],{},"Total page weight",[641,893,894],{},"4-8 MB",[641,896,897],{},"Under 2 MB",[623,899,900,903,906],{},[641,901,902],{},"LCP",[641,904,905],{},"3.5-6s",[641,907,646],{},[623,909,910,913,916],{},[641,911,912],{},"Lighthouse Performance score",[641,914,915],{},"40-65",[641,917,918],{},"90+",[623,920,921,924,927],{},[641,922,923],{},"Time to Interactive",[641,925,926],{},"4-7s",[641,928,929],{},"Under 3s",[15,931,932],{},"The gap between these two columns is almost never one big architectural problem — it's the accumulation of unoptimized images, unused code components, and unmonitored third-party scripts covered throughout this guide, each shaving off a little more speed until the page quietly crosses from \"fast\" to \"fine\" without anyone noticing exactly when it happened.",[34,934,936],{"id":935},"conclusion","Conclusion",[15,938,939,942],{},[19,940,941],{},"Framer site performance optimization"," isn't one big fix — it's stacking a dozen smaller, deliberate improvements that compound.",[15,944,945],{},"By optimizing images first, trimming component and override bloat, using GPU-friendly animations, and testing with real tools instead of guessing, you can consistently hit sub-1-second load times, even on mobile, even with CMS collections and custom components in the mix.",[15,947,948],{},[19,949,950],{},"Quick Wins Checklist:",[46,952,953,956,959,962,965],{},[49,954,955],{},"✅ Compress all images under 500KB (200KB below the fold)",[49,957,958],{},"✅ Remove unused components and variants",[49,960,961],{},"✅ Use transforms, not position changes, for animations",[49,963,964],{},"✅ Limit Google Fonts to 2-3 weights",[49,966,967],{},"✅ Test with Lighthouse and PageSpeed Insights, not just Framer Preview",[15,969,970,971,975,976,980,981,985],{},"Want components that are already built with performance in mind? ",[166,972,974],{"href":973},"/components","FramerHub's components"," are optimized from the start, so speed isn't something you have to retrofit later. Heavier 3D and WebGL effects include quality settings, such as Auto quality on ",[166,977,979],{"href":978},"/components/neural-core","Neural Core"," and a pixel-density cap on ",[166,982,984],{"href":983},"/components/chroma-flux","Chroma Flux",", so you can scale them down on phones.",[15,987,988],{},[166,989,990],{"href":973},"Browse Performance-Optimized Components →",[992,993,994],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":220,"searchDepth":261,"depth":261,"links":996},[997,998,1004,1009,1014,1019,1023,1028,1029,1035,1036,1037,1038],{"id":36,"depth":261,"text":37},{"id":73,"depth":261,"text":74,"children":999},[1000,1001,1002,1003],{"id":85,"depth":281,"text":86},{"id":96,"depth":281,"text":97},{"id":129,"depth":281,"text":130},{"id":140,"depth":281,"text":141},{"id":151,"depth":261,"text":152,"children":1005},[1006,1007,1008],{"id":155,"depth":281,"text":156},{"id":173,"depth":281,"text":174},{"id":180,"depth":281,"text":181},{"id":450,"depth":261,"text":451,"children":1010},[1011,1012,1013],{"id":457,"depth":281,"text":458},{"id":487,"depth":281,"text":488},{"id":494,"depth":281,"text":495},{"id":505,"depth":261,"text":506,"children":1015},[1016,1017,1018],{"id":509,"depth":281,"text":510},{"id":524,"depth":281,"text":525},{"id":539,"depth":281,"text":540},{"id":554,"depth":261,"text":555,"children":1020},[1021,1022],{"id":564,"depth":281,"text":565},{"id":571,"depth":281,"text":572},{"id":583,"depth":261,"text":584,"children":1024},[1025,1026,1027],{"id":594,"depth":281,"text":595},{"id":674,"depth":281,"text":675},{"id":688,"depth":281,"text":689},{"id":699,"depth":261,"text":700},{"id":733,"depth":261,"text":734,"children":1030},[1031,1032,1033],{"id":737,"depth":281,"text":738},{"id":744,"depth":281,"text":745},{"id":755,"depth":281,"text":1034},"Use loading=\"lazy\" on Iframes",{"id":769,"depth":261,"text":770},{"id":833,"depth":261,"text":834},{"id":866,"depth":261,"text":867},{"id":935,"depth":261,"text":936},"Complete guide to optimizing your Framer website for speed. Learn image optimization, Core Web Vitals, and performance best practices.","md",true,"/framerhub/img/blog/performance.webp",{"metaTitle":1044,"metaDescription":1045,"primaryKeyword":1046,"secondaryKeywords":1047,"heroImage":1042,"ogImage":1042,"schema":1051,"createdAt":1054},"Framer Site Performance Optimization Guide | FramerHub","The complete Framer performance guide — image optimization, Core Web Vitals, code overrides, fonts, and CMS query tips for real, lasting faster load times.","framer site performance",[1048,1049,1050],"optimize framer site performance","framer core web vitals","framer site speed",[1052,1056],{"type":1053,"headline":6,"datePublished":1054,"dateModified":1055},"Article","2026-01-14","2026-07-06",{"type":1057,"questions":1058},"FAQPage",[1059,1062,1065,1068,1071],{"question":1060,"answer":1061},"Is Framer fast by default?","Yes, relative to most no-code builders — Framer auto-converts images to WebP, serves sites over a CDN, and lazy-loads off-screen images by default. But 'fast by default' isn't 'fast automatically forever' — heavy code components, unoptimized source images, and excessive animations can still drag a Framer site's Core Web Vitals down significantly.",{"question":1063,"answer":1064},"What's the biggest performance killer in Framer sites?","Unoptimized images, by a wide margin. Images typically account for 50-70% of page weight. Uploading a 10MB source photo and letting Framer's WebP conversion handle it still leaves you with a large file — compress and resize before uploading, don't rely on conversion alone.",{"question":1066,"answer":1067},"What Core Web Vitals targets should I aim for on a Framer site?","LCP (Largest Contentful Paint) under 2.5 seconds, CLS (Cumulative Layout Shift) under 0.1, and INP (Interaction to Next Paint) under 200ms. These are Google's official 'good' thresholds and the ones Lighthouse and PageSpeed Insights grade against.",{"question":1069,"answer":1070},"Do code components slow down a Framer site?","They can, if poorly built — unnecessary re-renders, heavy calculations on every render, and large unoptimized dependencies all add real weight. Well-built components use memoization and minimal bundle size and add negligible overhead. This is why sourcing components from a tested library matters as much as how you use them.",{"question":1072,"answer":1073},"How do I test my Framer site's actual performance?","Use Chrome DevTools' Lighthouse tab for a quick local audit, PageSpeed Insights for a real-world field-data comparison, and WebPageTest for testing from multiple global locations. Test on mobile specifically, not just desktop — most real traffic and most performance problems show up there first.","/blog/optimize-framer-site-performance","2026-01-14T00:00:00.000Z",9,null,{"title":6,"description":1039},"optimize-framer-site-performance","blog/optimize-framer-site-performance",[609,1082,1083,1084,43],"Optimization","Speed","Best Practices","2026-07-06T00:00:00.000Z","PiO5OHdTcsntsCMnugZR39i_oD-nW8m9D58iO0160Ms",1792857357995]