## Performance Tips
Product: Monogram - Personal Portfolio WordPress Theme
URL: https://hub.jkdevstudio.com/docs/monogram/tips-best-practices/performance-tips
Updated: 2026-09-06
Summary: Monogram is built with performance in mind — GPU-accelerated animations, lazy loading, and optimized bundles come out of the box. Here's how to get the best performance from your site.
Image Optimizat
Monogram is built with performance in mind - GPU-accelerated animations, lazy loading, and optimized bundles come out of the box. Here how to get the best performance from your site.
## Image Optimization
Images are typically the biggest performance bottleneck on portfolio sites. Monogram generates responsive image sizes automatically, but you can help by uploading optimized source files.
- **Upload at the right size** - for full-width portfolio images, 1440px to 1920px wide is ideal. Anything larger adds file size without visible quality improvement.
- **Use WebP format** when possible - WebP files are 25-35% smaller than JPEG at the same quality
- **Compress before uploading** - use tools like TinyPNG, ShortPixel, or Imagify
- **Set alt text** on every image for accessibility and SEO
Monogram built-in lazy loading (powered by vanilla-lazyload) ensures images only load as they enter the viewport, so your initial page load stays fast regardless of how many images are on the page.
## Caching
Install a caching plugin to serve static HTML to repeat visitors. Recommended options:
- **WP Super Cache** - simple and reliable
- **W3 Total Cache** - more configuration options
- **LiteSpeed Cache** - best if your host runs LiteSpeed server
- **WP Rocket** - premium, easy to configure
Exclude `/wp-admin/admin-ajax.php` from caching. Monogram load-more pagination, post likes, and FAQ loading all use AJAX and must not be cached.
## CDN Configuration
Monogram is compatible with popular CDN services:
- **Cloudflare** - works out of the box. Enable "Auto Minify" for HTML only (not JS or CSS, since Monogram already ships minified bundles)
- **BunnyCDN**, **KeyCDN** - configure to serve static assets (images, CSS, JS) from CDN edge servers
Make sure your CDN doesn't cache AJAX endpoints or you'll break dynamic features like portfolio filtering and load-more.
## 3D Models
The `` web component for 3D portfolio items is powerful but can be heavy.
- Keep GLB files **under 10MB** - compress meshes and textures using tools like gltf-pipeline or glTF-Transform
- **GLB format is smaller than GLTF** - use GLB for production
- The model-viewer script is **lazy-loaded on demand** - it only downloads when a 3D item enters the viewport, so it has zero impact on pages without 3D content
## Animations
Monogram uses GSAP with GPU-accelerated CSS transforms (`translate3d`, `scale`, `opacity`) for smooth 60fps animations.
- Desktop animations are automatically **disabled on mobile** to save battery and improve scroll performance
- The grain texture overlay runs on desktop only
- Custom cursor is desktop only
- If you notice animation jank on a specific page, check if you have too many simultaneous ScrollTrigger instances - simplify the page layout or reduce the number of animated sections
## Font Loading
The theme uses `font-display: swap` for web fonts, which means text is visible immediately with a system font, then swaps to the custom font (GeneralSans) once it loads. This prevents invisible text during page load.
## Database Maintenance
Over time, your WordPress database accumulates overhead - post revisions, transients, spam comments, and orphaned metadata.
- Install **WP-Optimize** or **Advanced Database Cleaner** for periodic cleanup
- Limit post revisions by adding to `wp-config.php`:
```php
define('WP_POST_REVISIONS', 5);
```
## Quick Performance Checklist
- Images compressed and properly sized
- Caching plugin installed and configured
- AJAX endpoints excluded from cache
- 3D models under 10MB in GLB format
- Database cleaned of overhead
- CDN configured (optional but recommended)
- PHP 8.0+ (faster than PHP 7.x)