perf-audit

Audit WebGL performance issues and provide optimization fixes.

Updated Feb 13, 2026

Search Tags:#performance #debugging #optimization #webgl #three.js #60fps

Ready to run

npx skills add https://github.com/BamoJ/playfight-2k26 --skill perf-audit-bamoj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: perf-audit
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/perf-audit
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill perf-audit-bamoj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill diagnoses and resolves performance bottlenecks in WebGL applications, ensuring a smooth 60 frames per second experience across all devices and browsers.

Core Features & Use Cases

Performance Auditing: Identifies common causes of frame drops, including pixel ratio issues, excessive geometry, large textures, and inefficient shaders.
Optimization Guidance: Provides specific file locations and code snippets for fixing performance problems.
Cross-Browser Targets: Details performance considerations for Chrome, Safari, Firefox, and mobile devices.
Use Case: If your WebGL site is stuttering on mobile, use this Skill to audit the pixel ratio, texture sizes, and shader complexity to pinpoint and fix the lag.

Quick Start

Run a performance audit on the current WebGL application to identify frame drops.

Frequently Asked Questions about perf-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why does my WebGL site stutter on mobile devices and drop below 60fps?▼

WebGL performance drops on mobile are typically caused by uncapped pixel ratios, oversized textures, and complex shaders. Auditing these elements alongside geometry segments and RAF delta capping isolates the exact bottleneck causing the frame drops.

How do I fix frame drops in Three.js by reducing draw calls and shader complexity?▼

Fix Three.js frame drops by profiling draw calls in Chrome DevTools and simplifying shader logic. Reducing geometry segment counts and properly disposing of unused materials and geometries prevents memory leaks and stabilizes the render loop.

What is the best way to profile 60fps performance issues in a WebGL application?▼

The best way to profile 60fps WebGL issues is using Chrome DevTools to count draw calls and track frame timings. Analyzing getBoundingClientRect costs, resize handler throttling, and GSAP lag smoothing identifies hidden bottlenecks.

Does this performance audit work with GSAP animations and cross-browser targets?▼

Yes, the performance audit works with GSAP animations by analyzing lag smoothing configurations. It evaluates cross-browser targets including Chrome, Safari, and Firefox, while applying mobile WebGL guards and page update guards to maintain stability.

How do I stop memory leaks when disposing of Three.js geometry and materials?▼

Stop Three.js memory leaks by explicitly disposing of geometries and materials when they are no longer needed. Auditing event listener cleanup alongside resize handler throttling ensures unmounted components do not retain GPU memory or block execution.

When should I use mobile WebGL guards and page update guards to prevent stuttering?▼

Use mobile WebGL guards and page update guards when rendering heavy 3D scenes on low-power devices. These guards prevent execution overhead by pausing unnecessary calculations, while capping RAF delta and throttling resize handlers maintains a steady 60fps.