Performance Tips

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

#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 <model-viewer> 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:

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)

Last updated 6 Sep 2026