Imported from jeremylongshore/tons-of-skills-marketplace (plugins/saas-packs/framer-pack/skills/framer-performance-tuning/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill framer-performance-tuning. Copyright stays with the author (MIT).

Framer Performance Tuning

Prerequisites

A staging site, aggregate performance baseline, approved content/assets, a change owner, and rollback path.

Error Handling

Revert changes that harm accessibility, publishing, privacy, or agreed performance thresholds; retain only redacted telemetry for review.

Examples

Optimize a fictional staging page, compare aggregate performance metrics, and roll back if a synthetic form or route check regresses.

Overview

Optimize Framer plugin, component, and Server API performance. Key areas: CMS sync speed, component render performance, and plugin responsiveness.

Instructions

Step 1: Batch CMS Operations

// Process large collections in batches to avoid timeouts
async function batchSync(collection: any, items: any[], batchSize = 50) {
  const total = items.length;
  for (let i = 0; i < total; i += batchSize) {
    await collection.setItems(items.slice(i, i + batchSize));
    const progress = Math.min(i + batchSize, total);
    framer.notify(`Synced ${progress}/${total}`);
  }
}

Step 2: Optimize Code Component Rendering

import { memo, useMemo } from 'react';

// Memoize expensive components
export default memo(function DataGrid({ data, columns }) {
  const processedData = useMemo(() =>
    data.map(row => columns.reduce((acc, col) => ({ ...acc, [col.key]: row[col.key] }), {})),
    [data, columns]
  );

  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}>
      {processedData.map((row, i) => columns.map(col => (
        <div key={`${i}-${col.key}`} style={{ padding: 8 }}>{row[col.key]}</div>
      )))}
    </div>
  );
});

Step 3: Persistent WebSocket Connection

// Reuse Server API connection instead of reconnecting each time
let clientInstance: any = null;

async function getClient() {
  if (!clientInstance) {
    const { framer } = await import('framer-api');
    clientInstance = await framer.connect({
      apiKey: process.env.FRAMER_API_KEY!,
      siteId: process.env.FRAMER_SITE_ID!,
    });
  }
  return clientInstance;
}

Step 4: Image Optimization

// Pre-optimize image URLs before syncing to CMS
function optimizeImageUrl(url: string, width = 800): string {
  // Use image CDN if available
  if (url.includes('cloudinary.com')) {
    return url.replace('/upload/', `/upload/w_${width},q_auto,f_auto/`);
  }
  if (url.includes('imgix.net')) {
    return `${url}?w=${width}&auto=format,compress`;
  }
  return url;
}

Output

• Batched CMS operations avoiding timeouts
• Memoized components for render performance
• Persistent WebSocket connections
• Image optimization before CMS sync

Resources

• Framer Performance
• React Performance

Next Steps

For cost optimization, see framer-cost-tuning.