Performance Optimization

This guide covers performance optimization strategies for LamaPress projects, from asset optimization to code splitting and caching.

Table of Contents

• Overview
• Asset Optimization
• Code Splitting
• Image Optimization
• Caching Strategies
• Database Optimization
• Monitoring

Overview

Performance optimization in LamaPress focuses on:

1. Asset Optimization - Minification, compression, tree shaking
2. Code Splitting - Automatic component-based splitting
3. Image Optimization - Proper sizing and formats
4. Caching - Browser and server-side caching
5. Database - Efficient queries and indexing

Asset Optimization

Production Build

Always use production build for deployment:

npm run build

Benefits:

• Minified JavaScript and CSS
• Tree shaking removes unused code
• Code splitting for optimal loading
• Asset hashing for cache busting

Bundle Analysis

Regularly analyze bundle size:

npm run analyze

Check for:

• Large dependencies
• Duplicate code
• Unused imports
• Optimization opportunities

Tree Shaking

Vite automatically tree-shakes unused code. Ensure:

• Use ES6 modules (import/export)
• Avoid default exports of entire objects
• Use named exports when possible

// ✅ Good - Tree shakeable
import { specificFunction } from 'library'

// ❌ Avoid - Imports entire library
import * as library from 'library'

Code Splitting

Automatic Splitting

LamaPress automatically splits code by component:

• Each component is a separate chunk
• Components load on demand
• Shared code is extracted to common chunks

Dynamic Imports

Use dynamic imports for large dependencies:

// ✅ Good - Lazy loaded
const heavyLibrary = await import('heavy-library')

// ❌ Avoid - Eager loaded
import heavyLibrary from 'heavy-library'

Component Loading

Components are automatically code-split:

// Automatically split when component is used
<div data-component="blocks/accordion">

Image Optimization

Image Formats

Use appropriate formats:

• AVIF - Modern browsers (best compression, preferred)
• WebP - Modern browsers (good compression, fallback)
• JPEG - Photos (legacy support)
• PNG - Graphics with transparency
• SVG - Icons and simple graphics

Image Conversion:

We use the TinyPNG plugin for automatic image conversion to WebP and AVIF formats. The plugin automatically:

• Converts uploaded images to WebP and AVIF formats
• Maintains original formats as fallbacks
• Optimizes file sizes while preserving quality

Image Sizes

Use WordPress image sizes:

<?php
$image = llField('image', $key);
if ($image) {
    // Use appropriate size
    $imageUrl = wp_get_attachment_image_url($image['ID'], 'large');
}
?>

WordPress sizes:

• thumbnail - 150x150
• medium - 300x300
• large - 1024x1024
• Custom sizes defined in config/media.php

Lazy Loading

WordPress automatically lazy loads images:

<img src="<?= esc_url($imageUrl) ?>"
     alt="<?= esc_attr($alt) ?>"
     loading="lazy">

Responsive Images

Use srcset for responsive images:

<?php
echo wp_get_attachment_image(
    $image['ID'],
    'large',
    false,
    ['loading' => 'lazy']
);
?>

Caching Strategies

Browser Caching

Set appropriate cache headers:

// In functions/cache.php or similar
header('Cache-Control: public, max-age=31536000');

Asset Caching

Assets are automatically versioned:

• Hashed filenames (main-abc123.js)
• Long cache times
• Automatic cache busting on update

WordPress Caching

Use caching plugins:

• WP Rocket - Full-featured caching
• W3 Total Cache - Free alternative
• LiteSpeed Cache - Server-level caching

Object Caching

Use object caching for database queries:

• Redis - In-memory caching
• Memcached - Distributed caching
• APCu - PHP opcode caching

Database Optimization

Efficient Queries

Use efficient ACF queries:

// ✅ Good - Single query
$fields = llFields('title', 'content', 'image', $key);

// ❌ Avoid - Multiple queries
$title = llField('title', $key);
$content = llField('content', $key);
$image = llField('image', $key);

Query Caching

Cache expensive queries:

<?php
$cacheKey = 'expensive_query_' . $postId;
$result = wp_cache_get($cacheKey);

if (false === $result) {
    $result = expensiveQuery();
    wp_cache_set($cacheKey, $result, '', 3600);
}
?>

Database Indexing

Ensure proper indexing:

• ACF fields are automatically indexed
• Custom post types should have indexes
• Taxonomies should be indexed

Monitoring

Performance Metrics

Monitor key metrics:

• First Contentful Paint (FCP) - < 1.8s
• Largest Contentful Paint (LCP) - < 2.5s
• Time to Interactive (TTI) - < 3.8s
• Total Blocking Time (TBT) - < 200ms

Tools

Use performance monitoring tools:

• Google Lighthouse - Performance auditing
• WebPageTest - Detailed analysis
• Chrome DevTools - Performance profiling
• New Relic - Real-time monitoring

Bundle Monitoring

Regularly check bundle sizes:

npm run analyze

Targets:

• Initial bundle: < 200KB (gzipped)
• Total bundle: < 500KB (gzipped)
• Individual chunks: < 100KB (gzipped)

Best Practices

1. Minimize HTTP Requests

• Combine CSS files (automatic with Vite)
• Combine JavaScript files (automatic with Vite)
• Use SVG sprites for icons
• Inline critical CSS

2. Optimize Assets

• Compress images before upload
• Use AVIF/WebP formats (via TinyPNG plugin)
• Lazy load images
• Use appropriate image sizes

3. Code Optimization

• Remove unused code
• Use code splitting
• Minimize dependencies
• Use tree shaking

4. Caching

• Enable browser caching
• Use CDN for static assets
• Implement object caching
• Cache database queries

5. Database

• Optimize queries
• Use indexes
• Limit query results
• Cache expensive queries

Related Documentation

• Build Process - Build optimization
• Advanced Topics - Advanced optimization patterns
• Troubleshooting - Performance issues

---

Next Steps:

• Review Build Process for build optimization
• Check Troubleshooting for performance issues
• Learn about Monitoring Tools