Capacitor Performance

by cap-go2cfb277a1488No license72 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated today

Performance optimization guide for Capacitor apps covering bundle size, rendering, memory, native bridge, and profiling. Use this skill when users need to optimize their app performance.

Instructions onlySoftware Development

AI-generated overview

Guide for optimizing Capacitor app performance across bundle size, rendering, memory, and profiling.

What it does: This skill provides a performance optimization guide for Capacitor apps, covering lazy loading plugins, reducing bundle size, image optimization, and minimizing native bridge calls. It also gives guidance on rendering performance, memory management, and profiling with Chrome DevTools, Xcode Instruments, and Android Profiler. It includes target metrics for first paint, time to interactive, frame rate, memory, and bundle size.
When to use it: Use it when a Capacitor app is slow, has memory issues, janky animations, or needs profiling and general performance tuning.
Requirements: No scripts or special tooling are required beyond an agent; the guide references optional tools such as Chrome DevTools, Xcode Instruments, and Android Profiler for profiling.

Performance Optimization for Capacitor

Make your Capacitor apps fast and responsive.

When to Use This Skill

User has slow app
User wants to optimize
User has memory issues
User needs profiling
User has janky animations

Quick Wins

1. Lazy Load Plugins

typescript

// BAD - All plugins loaded at startupimport { Camera } from '@capacitor/camera';import { Filesystem } from '@capacitor/filesystem';import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when neededasync function takePhoto() {  const { Camera } = await import('@capacitor/camera');  return Camera.getPhoto({ quality: 90 });}

// BAD - All plugins loaded at startupimport { Camera } from '@capacitor/camera';import { Filesystem } from '@capacitor/filesystem';import { Geolocation } from '@capacitor/geolocation';
// GOOD - Load when neededasync function takePhoto() {  const { Camera } = await import('@capacitor/camera');  return Camera.getPhoto({ quality: 90 });}

2. Reduce Bundle Size

bash

# Analyze bundlenpx vite-bundle-visualizer
# Tree-shake importsimport { specific } from 'large-library';  // Goodimport * as everything from 'large-library'; // Bad

# Analyze bundlenpx vite-bundle-visualizer
# Tree-shake importsimport { specific } from 'large-library';  // Goodimport * as everything from 'large-library'; // Bad

3. Optimize Images

typescript

// Use appropriate qualityconst photo = await Camera.getPhoto({  quality: 80,        // Not 100  width: 1024,        // Limit size  resultType: CameraResultType.Uri,  // Not Base64});
// Lazy load images<img loading="lazy" src={url} />

// Use appropriate qualityconst photo = await Camera.getPhoto({  quality: 80,        // Not 100  width: 1024,        // Limit size  resultType: CameraResultType.Uri,  // Not Base64});
// Lazy load images<img loading="lazy" src={url} />

4. Minimize Bridge Calls

typescript

// BAD - Multiple bridge callsfor (const item of items) {  await Storage.set({ key: item.id, value: item.data });}
// GOOD - Single call with batchawait Storage.set({  key: 'items',  value: JSON.stringify(items),});

// BAD - Multiple bridge callsfor (const item of items) {  await Storage.set({ key: item.id, value: item.data });}
// GOOD - Single call with batchawait Storage.set({  key: 'items',  value: JSON.stringify(items),});

Rendering Performance

Use CSS Transforms

css

/* GPU accelerated */.animated {  transform: translateX(100px);  will-change: transform;}
/* Avoid - triggers layout */.animated {  left: 100px;}

/* GPU accelerated */.animated {  transform: translateX(100px);  will-change: transform;}
/* Avoid - triggers layout */.animated {  left: 100px;}

Virtual Scrolling

typescript

// Use virtual list for long listsimport { VirtualScroller } from 'your-framework';
<VirtualScroller  items={items}  itemHeight={60}  renderItem={(item) => <ListItem item={item} />}/>

// Use virtual list for long listsimport { VirtualScroller } from 'your-framework';
<VirtualScroller  items={items}  itemHeight={60}  renderItem={(item) => <ListItem item={item} />}/>

Debounce Events

typescript

import { debounce } from 'lodash-es';
const handleScroll = debounce((e) => {  // Handle scroll}, 16); // ~60fps

import { debounce } from 'lodash-es';
const handleScroll = debounce((e) => {  // Handle scroll}, 16); // ~60fps

Memory Management

Cleanup Listeners

typescript

import { App } from '@capacitor/app';
// Store listener handleconst handle = await App.addListener('appStateChange', callback);
// Cleanup on unmountonUnmount(() => {  handle.remove();});

import { App } from '@capacitor/app';
// Store listener handleconst handle = await App.addListener('appStateChange', callback);
// Cleanup on unmountonUnmount(() => {  handle.remove();});

Avoid Memory Leaks

typescript

// Clear large data when donelet largeData = await fetchLargeData();processData(largeData);largeData = null; // Allow GC

// Clear large data when donelet largeData = await fetchLargeData();processData(largeData);largeData = null; // Allow GC

Profiling

Chrome DevTools

Connect via chrome://inspect
Performance tab > Record
Analyze flame chart

Xcode Instruments

Product > Profile
Choose Time Profiler
Analyze hot paths

Android Profiler

View > Tool Windows > Profiler
Select CPU/Memory/Network
Record and analyze

Metrics to Track

Resources

Chrome DevTools: https://developer.chrome.com/docs/devtools
Xcode Instruments: https://developer.apple.com/instruments

Source and attribution

Source:cap-go/capgo-skillsinskills/capacitor-performanceat commit2cfb277

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Metric	Target
First Paint	< 1s
Time to Interactive	< 3s
Frame Rate	60fps
Memory	Stable, no growth
Bundle Size	< 500KB gzipped

Capacitor Performance

Performance Optimization for Capacitor

When to Use This Skill

Quick Wins

1. Lazy Load Plugins

2. Reduce Bundle Size

3. Optimize Images

4. Minimize Bridge Calls

Rendering Performance

Use CSS Transforms

Virtual Scrolling

Debounce Events

Memory Management

Cleanup Listeners

Avoid Memory Leaks

Profiling

Chrome DevTools

Xcode Instruments

Android Profiler

Metrics to Track

Resources

Source and attribution

More from cap-go/capgo-skills

Webapp To Capacitor

Tailwind Capacitor

Safe Area Handling

Konsta Ui

Ios Android Logs

Ionic Design

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices