modern-web-performance
Skill1 starsChanged 6 days agoUnlicenseView on GitHub
Access and implement performance optimization guides for web applications. **You MUST use this skill whenever the user asks about improving speed, responsiveness, reducing latency, optimizing resource loading, handling analytics beacons, or using modern metrics like Core Web Vitals.** Do not assume a performance task is too simple; consult this guide for best practices on optimization strategies before implementing.
In this repository76 other files it gives its agents.
- AGENTS.mdAGENTS.md
- ad-copy-writerSkill
- ae-inspect-describeSkill
- algorithmic-artSkill
- animation-directorSkill
- assembly-guideSkill
- brainstorming-and-ideatingSkill
- brainstorming-research-ideasSkill
- brainstormingSkill
- brief-to-tasksSkill
- canvas-designSkill
- cli-designSkill
- cli-output-hierarchySkill
- commit-messageSkill
- craft-uiSkill
- creative-directorSkill
- design-briefSkill
- design-flowSkill
- design-mock-auditSkill
- design-reviewSkill
- design-system-patternsSkill
- design-tokensSkill
- deslopifySkill
- diagnoseSkill
- diagramming-app-routesSkill
- doc-restructureSkill
- eval-criticSkill
- formatting-open-markdownsSkill
- frontend-designSkill
- frontend-slidesSkill
- gdocs-tab-writerSkill
- gemini-apiSkill
- gif-creationSkill
- github_repo_researchSkill
- grill-meSkill
- grill-with-docsSkill
- hallmarkSkill
- handoffSkill
- html-presentationSkill
- humanizerSkill
- i-have-adhdSkill
- improve-codebase-architectureSkill
- information-architectureSkill
- install-skill-from-githubSkill
- markdown-output-hierarchySkill
- marketing-psychologySkill
- merge-latestSkill
- motion-designSkill
- pdf-readerSkill
- pm-brainstormingSkill
- pm-discovery-brainstormSkill
- product-marketingSkill
- prototypeSkill
- pull-requestSkill
- ralph_loopSkill
- react-best-practicesSkill
- review-loopSkill
- sandbox-explainerSkill
- skill-creatorSkill
- skill-optSkill
- The first 60 shown.
The file
Files
Performance Guides
This directory contains guides for optimizing web application performance, focusing on resource loading priority and efficient data fetching.
Available Guides
| Guide Name | Description | Web Feature IDs |
batch-analytics-events | Debounce and batch multiple analytics events together in a single beacon to minimize network contention and reduce server load, while still delivering real-time updates. | fetchlater, aborting |
deprioritize-background-fetches | Deprioritize background data fetches made with the Fetch API to prevent network contention with user-initiated requests. | fetch-priority, fetch |
full-session-analytics | Reliably track analytics, errors, and telemetry data across the user's entire page visit, and defer sending of the data until the user leaves the page. | fetchlater, aborting |
improve-next-page-load-performance | Improve page load performance by prefetching or prerendering pages that the user is likely to visit next. | speculation-rules |
optimize-image-priority | Optimize the loading priority of Largest Contentful Paint (LCP) candidate images and deprioritize non-critical images to reduce critical resource load delays. | fetch-priority |
optimize-preload-priority | Optimize the relative priority of preloaded content to reduce critical resource load delays. | fetch-priority, link-rel-preload |
optimize-script-priority | Optimize the loading priority of scripts by boosting critical asynchronous scripts and deprioritizing non-essential or late-body scripts to improve sequencing and reduce delays. | fetch-priority |
How to use
- Identify the problem: Determine which performance optimization is needed based on the descriptions above.
- Navigate to the guide: Click on the guide name link or navigate to the references folder.
- Read the guide: Each guide contains detailed implementation steps, example code, and best practices.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.