Skip to main content الرئيسية المنشئون jeremylongshore tons-of-skills-marketplace webflow-performance-tuning
webflow-performance-tuning Optimize Webflow API performance with response caching, bulk endpoint batching,
CDN-cached live item reads, pagination optimization, and connection pooling.
Use when experiencing slow API responses or optimizing request throughput.
Trigger with phrases like "webflow performance", "optimize webflow",
"webflow latency", "webflow caching", "webflow slow", "webflow batch".
الانتقال إلى التثبيت سوق المهارات اكتشف واستكشف مهارات الذكاء الاصطناعي التي بناها المجتمع.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
عرض تفاصيل Prompt يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill webflow-performance-tuningيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
تحميل Zip جاري التحميل... المزيد من هذا المستودع langchain-deploy-integration Deploy a LangChain 1.0 / LangGraph 1.0 app to Cloud Run, Vercel, or LangServe correctly — with timeouts sized for chain length, cold-start mitigation, SSE anti-buffering headers, and Secret Manager over .env. Use when prepping a first production deploy, debugging a stream that hangs behind a proxy, or diagnosing p99 latency spikes. Trigger with "langchain deploy", "langchain cloud run", "langchain vercel python", "langchain langserve", or "langchain docker".
langchain-langgraph-agents Build a correct LangGraph 1.0 ReAct agent with create_react_agent — typed tools, error propagation, recursion caps, and stop conditions that actually stop. Use when writing a first tool-calling agent, migrating from AgentExecutor or initialize_agent, or diagnosing an agent that loops on vague prompts. Trigger with "langgraph agent", "create_react_agent", "langgraph tool calling", "AgentExecutor migration", or "agent loop cost".
langchain-langgraph-human-in-loop Build LangGraph 1.0 human-in-the-loop approval flows with interrupt_before /
interrupt_after and Command(resume=...) — JSON-serializable state, clean
resume semantics, and UI wiring for approval decisions. Use when adding an
approval gate before an expensive tool call, wiring a Slack/web UI for agent
approvals, or debugging a graph that crashes on interrupt.
Trigger with "langgraph human in loop", "langgraph interrupt_before",
"langgraph approval flow", "Command resume", "langgraph HITL".
name webflow-performance-tuning description Optimize Webflow API performance with response caching, bulk endpoint batching,
CDN-cached live item reads, pagination optimization, and connection pooling.
Use when experiencing slow API responses or optimizing request throughput.
Trigger with phrases like "webflow performance", "optimize webflow",
"webflow latency", "webflow caching", "webflow slow", "webflow batch".
allowed-tools Read, Write, Edit version 1.5.0 license MIT author Jeremy Longshore <jeremy@intentsolutions.io> tags ["saas","design","no-code","webflow"] compatibility Designed for Claude Code
Webflow Performance Tuning
Overview
Optimize Webflow Data API v2 performance. Key insight: CDN-cached requests
to live items have no rate limits — use the Content Delivery API for read-heavy
workloads and reserve write API calls for mutations.
Prerequisites
webflow-api SDK installedUnderstanding of your read/write ratio
Redis or in-memory cache (optional)
Webflow Performance Characteristics
Operation Typical Latency Rate Limited Cacheable Live items (CDN) 5-50ms No Yes (CDN) Staged items 50-200ms Yes Application cache Create/update item 100-300ms Yes No Bulk create (100) 200-500ms Yes (1 count) No Site publish 500-2000ms 1/min No List collections 50-150ms Yes Application cache
Key optimization: CDN-cached live item reads do not count against rate limits.
Instructions
Strategy 1: Use Content Delivery API for Reads
async function getPublishedContent (collectionId : string const { items } = await webflow.collections .items .listItemsLive (collectionId, {
limit : 100 ,
});
return items;
}
async
function
getPublishedItem
collectionId : string , itemId : string
return
collections
items
getItemLive
Strategy 2: Application-Level Response Caching import { LRUCache } from "lru-cache" ;
const cache = new LRUCache <string , any >({
max : 500 ,
ttl : 5 * 60 * 1000 ,
updateAgeOnGet : true ,
});
async function cachedFetch<T>(
key : string ,
fetcher : () => Promise <T>,
ttlMs ?: number
): Promise <T> {
const cached = cache.get (key);
if (cached !== undefined ) return cached as T;
const result = await fetcher ();
cache.set (key, result, { ttl : ttlMs });
return result;
}
const collections = await cachedFetch (
`collections:${siteId} ` ,
() => webflow.collections .list (siteId).then (r =>collections ),
30 * 60 * 1000
);
const items = await cachedFetch (
`items:live:${collectionId} ` ,
() => webflow.collections .items .listItemsLive (collectionId).then (r =>items ),
60 * 1000
);
Strategy 3: Redis Distributed Cache import Redis from "ioredis" ;
const redis = new Redis (process.env .REDIS_URL !);
async function cachedWithRedis<T>(
key : string ,
fetcher : () => Promise <T>,
ttlSeconds = 300
): Promise <T> {
const cached = await redis.get (key);
if (cached) return JSON .parse (cached) as T;
const result = await fetcher ();
await redis.setex (key, ttlSeconds, JSON .stringify (result));
return result;
}
async function invalidateOnWebhook (triggerType : string , payload : any if (triggerType === "collection_item_changed" || triggerType === "collection_item_created" ) {
const collectionId = payload.collectionId ;
await redis.del (`items:live:${collectionId} ` );
await redis.del (`items:staged:${collectionId} ` );
console .log (`Cache invalidated for collection ${collectionId} ` );
}
if (triggerType === "site_publish" ) {
const keys = await redis.keys ("items:*" );
if (keys.length > 0 ) await redis.del (...keys);
console .log (`Flushed ${keys.length} cache entries on site publish` );
}
}
Strategy 4: Bulk Endpoints for Writes One bulk request = 1 rate limit count for up to 100 items:
for (const item of items) {
await webflow.collections .items .createItem (collectionId, {
fieldData : item,
});
}
await webflow.collections .items .createItemsBulk (collectionId, {
items : items.slice (0 , 100 ).map (item =>fieldData : item })),
});
async function batchCreate (
collectionId : string ,
allItems : Array <Record <string , any >>
) {
for (let i = 0 ; i < allItems.length ; i += 100 ) {
const batch = allItems.slice (i, i + 100 );
await webflow.collections .items .createItemsBulk (collectionId, {
items : batch.map (item =>fieldData : item, isDraft : false })),
});
if (i + 100 < allItems.length ) {
await new Promise (r =>setTimeout (r, 500 ));
}
}
}
Strategy 5: Parallel Requests with Concurrency Control import PQueue from "p-queue" ;
const queue = new PQueue ({
concurrency : 5 ,
interval : 1000 ,
intervalCap : 10 ,
});
async function fetchFromMultipleCollections (collectionIds : string []const results = await Promise .all (
collectionIds.map (id =>add (() =>
webflow.collections .items .listItemsLive (id, { limit : 100 })
)
)
);
return results;
}
Strategy 6: Efficient Pagination
async function fetchAll (collectionId : string const allItems = [];
let offset = 0 ;
const limit = 100 ;
while (true ) {
const { items, pagination } = await webflow.collections .items .listItems (
collectionId,
{ offset, limit }
);
allItems.push (...(items || []));
if (allItems.length >= (pagination?.total || 0 )) break ;
offset += limit;
}
return allItems;
}
Strategy 7: Performance Monitoring async function timedCall<T>(label : string , fn : () => Promise <T>): Promise <T> {
const start = performance.now ();
try {
const result = await fn ();
const ms = (performance.now () - start).toFixed (1 );
console .log (`[perf] ${label} : ${ms} ms` );
return result;
} catch (error) {
const ms = (performance.now () - start).toFixed (1 );
console .error (`[perf] ${label} : FAILED after ${ms} ms` );
throw error;
}
}
const items = await timedCall ("listItemsLive" , () =>
webflow.collections .items .listItemsLive (collectionId)
);
Performance Optimization Summary Strategy Impact Effort Live item API (CDN) 10x faster reads, no rate limits Low Bulk endpoints 100x fewer API calls Low LRU cache Eliminates repeat reads Medium Redis distributed cache Multi-instance caching Medium Webhook cache invalidation Fresh data without polling Medium Concurrency control Max throughput without 429s Low
Output
CDN-cached reads for published content
Application-level caching with TTL
Bulk writes reducing API call count 100x
Webhook-triggered cache invalidation
Performance monitoring for all API calls
Error Handling Issue Cause Solution Stale cache TTL too long Reduce TTL or use webhook invalidation Cache miss storm All entries expire simultaneously Add jitter to TTL Bulk request 400 >100 items Cap batches at 100 Memory pressure LRU cache too large Set max limit on cache
Resources
Next Steps For cost optimization, see webflow-cost-tuning.
