Performance optimization process in team collaboration

Performance Optimization Process in Team Collaboration

Performance optimization is a critical aspect of team collaboration, especially in large-scale projects where multi-person collaboration can lead to scattered and hard-to-track performance issues. A clear process helps teams efficiently identify, resolve, and prevent performance bottlenecks.

Performance Benchmarking and Monitoring

Establishing performance benchmarks is the starting point for optimization. Teams should uniformly use tools to collect key metrics:

// Monitoring core Web Vitals metrics
const reportHandler = (metric) => {
  console.log(metric.name, metric.value);
  // Report to the team's unified monitoring platform
};

webVitals.getCLS(reportHandler);
webVitals.getFID(reportHandler);
webVitals.getLCP(reportHandler);

Typical monitoring dimensions should include:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Interaction response delay

Teams should establish a shared monitoring dashboard and agree on performance thresholds (e.g., LCP should not exceed 2.5 seconds), triggering alerts automatically when thresholds are breached.

Issue Identification and Collaborative Analysis

Adopt a layered troubleshooting strategy:

1. Network Layer: Check Waterfall charts to identify slow requests

# Team-shared cURL test command template
curl -o /dev/null -s -w "DNS: %{time_namelookup} Connect: %{time_connect} Transfer: %{time_starttransfer} Total: %{time_total}\n" https://example.com

2. Rendering Layer: Use Chrome DevTools' Performance panel to record, focusing on:

   • Long Tasks (tasks exceeding 50ms)
   • Forced synchronous layouts (Layout Thrashing)
   • Unnecessary style recalculations

3. Memory Layer: Capture memory leaks via the Memory panel

// Team-agreed memory checkpoints
function recordMemorySnapshot() {
  if (window.performance.memory) {
    const { usedJSHeapSize, totalJSHeapSize } = performance.memory;
    console.log(`Memory usage: ${(usedJSHeapSize / totalJSHeapSize * 100).toFixed(1)}%`);
  }
}

Code Collaboration Standards

Establish team performance coding guidelines:

1. Resource Loading:

<!-- Unified lazy loading + progressive loading for images -->
<img 
  src="placeholder.jpg" 
  data-src="real-image.jpg" 
  loading="lazy"
  class="lazyload"
  alt="Example"
/>

2. State Management Optimization:

// Redux performance optimization example
const expensiveSelector = createSelector(
  [state => state.items],
  items => {
    // Complex computation
    return heavyComputation(items);
  },
  {
    memoizeOptions: {
      maxSize: 50 // Team-agreed cache size
    }
  }
);

3. React Component Optimization:

// Team-agreed memo usage standard
const MemoizedComponent = memo(
  ({ data }) => <ExpensiveChild data={data} />,
  (prevProps, nextProps) => {
    return shallowCompare(prevProps.data, nextProps.data);
  }
);

Performance Protection in Continuous Integration

Add automated performance checks to the CI pipeline:

# .github/workflows/perf-check.yml
steps:
  - name: Lighthouse Audit
    uses: foo-software/lighthouse-check-action@v2
    with:
      urls: 'https://staging.example.com'
      minimumScore: 85 # Team-agreed minimum score
      githubAccessToken: ${{ secrets.GITHUB_TOKEN }}

Key checks:

• Core Web Vitals compliance rate
• Critical resource preloading checks
• Unused CSS/JS exceeding thresholds (e.g., >50KB)
• Image format validation (non-WebP formats prohibited)

Performance Optimization Knowledge Base

Build a team-shared optimization case library:

### Case: List Page Scroll Lag
**Symptom**: FPS drops below 30 during scrolling  
**Root Cause**:  
- List items not memoized  
- Scroll event listeners not throttled  

**Solution**:  
```jsx
// Optimized code
const ListItem = memo(({ item }) => {
  return <div>{item.name}</div>;
});

const handleScroll = throttle(() => {
  // Scroll logic
}, 16);

Result: FPS stabilized at 55+
Owner: @fe-team-zhang
Related PR: #1234

## Cross-Functional Collaboration Mechanism

Establish regular performance review meetings:
1. **Frontend and Backend**: Negotiate API field optimization
```json
// Before vs. after optimization
// Old version: Returns all user data
{
  "users": [
    {
      "id": 1,
      "name": "Zhang San",
      "avatar": "...",
      "historyOrders": [...] 
    }
  ]
}

// New version: Split into basic data + detail API
{
  "users": [
    {
      "id": 1,
      "name": "Zhang San",
      "avatar": "..."
    }
  ]
}

2. Design and Frontend: Agree on design standards
   • Page animations should not exceed 300ms
   • Prioritize CSS animations over JavaScript
   • Avoid full-screen semi-transparent overlays

Performance Regression Testing Plan

Build an automated regression test suite:

// Puppeteer performance test script example
describe('Homepage Performance Test', () => {
  it('LCP should be less than 2 seconds', async () => {
    const lcp = await getLCPMetric(page);
    assert(lcp < 2000, `LCP exceeded: ${lcp}ms`);
  });

  it('JS resources should not exceed 500KB', async () => {
    const jsSize = await getTotalJSSize(page);
    assert(jsSize < 512000, `JS size exceeded: ${(jsSize/1024).toFixed(1)}KB`);
  });
});

Testing strategy should include:

• Key path performance benchmarks
• Load testing (simulating multi-user concurrency)
• Weak network testing (performance under 3G conditions)

Unified Performance Optimization Toolchain

Standardize the team's toolset:

// Recommended package.json configuration
{
  "devDependencies": {
    "webpack-bundle-analyzer": "^4.7.0",
    "lighthouse-ci": "^3.0.0",
    "size-limit": "^7.0.0",
    "why-did-you-render": "^7.0.1"
  },
  "scripts": {
    "analyze": "webpack-bundle-analyzer dist/stats.json",
    "perf:test": "lighthouse-ci http://localhost:3000",
    "size-check": "size-limit"
  }
}