Intermediate
How to optimize site performance on Ghost
Quick Answer
Optimize Ghost site performance by enabling caching, compressing images, minifying CSS/JS, and using a CDN. Focus on theme optimization and database cleanup for maximum speed improvements.
Prerequisites
- Access to Ghost admin panel
- Basic understanding of web performance concepts
- FTP or hosting control panel access
- Knowledge of image optimization tools
1
Enable Ghost's Built-in Caching
Navigate to Settings > Advanced in your Ghost admin panel. Scroll down to the Cache section and toggle on Enable caching. Set cache duration to
86400 seconds (24 hours) for optimal performance. Click Save to apply changes.Tip
Monitor your site's performance after enabling caching using tools like Google PageSpeed Insights to measure improvements.
2
Optimize Images and Media
In Settings > General, scroll to Publication cover and Publication icon. Upload optimized images (WebP format, under 200KB for covers, under 50KB for icons). For post images, use Ghost's built-in image editor: upload images, click the gear icon, and select Optimize image. Set quality to
85% and enable Progressive JPEG.Tip
Use external tools like TinyPNG or ImageOptim before uploading to Ghost for maximum compression.
3
Minify CSS and JavaScript
Go to Settings > Code injection. In the Site header section, add this code:
<style>
/* Inline critical CSS here */
</style>
<script>
// Defer non-critical JS
document.addEventListener('DOMContentLoaded', function() {
// Your optimized JS code
});
</script>Tip
Use online minification tools like CSS Minifier or UglifyJS before adding code to Ghost.
4
Configure CDN Integration
In Settings > Advanced, find the Content Delivery Network section. Enter your CDN URL (Cloudflare, AWS CloudFront, etc.) in the CDN URL field. Format:
https://your-cdn-domain.com. Enable Force CDN for all assets and Preload critical resources. Click Save settings.Tip
Cloudflare offers a free CDN tier that works excellently with Ghost sites.
5
Optimize Database Performance
Navigate to Settings > Labs and scroll to Database section. Click Optimize database to remove unused data and optimize tables. Enable Auto-cleanup old revisions and set it to keep only
5 recent post revisions. For self-hosted Ghost, run ghost doctor in your terminal to check database health.Tip
Schedule monthly database optimizations to maintain peak performance.
6
Enable Lazy Loading and AMP
In Settings > Advanced, enable Lazy load images under the Performance section. Navigate to Settings > Labs and toggle on AMP (Accelerated Mobile Pages). Configure AMP settings by clicking Configure AMP and ensure your theme supports AMP optimization.
Tip
Test AMP pages using Google's AMP validator to ensure proper implementation.
7
Optimize Theme Performance
Go to Settings > Design > Advanced and click Theme files. Edit
package.json to remove unused dependencies. In default.hbs, add loading="lazy" to image tags and defer attribute to script tags:<img src="{{url}}" loading="lazy" alt="{{alt}}">
<script src="script.js" defer></script>Tip
Use Ghost's theme development tools to test performance before activating optimized themes.
8
Monitor and Test Performance
Install performance monitoring by adding Google Analytics or Ghost's native analytics in Settings > Integrations. Use Settings > Labs > Performance Monitor to track load times. Test your site with Google PageSpeed Insights, GTmetrix, and WebPageTest. Set performance budgets: aim for load times under
3 seconds and PageSpeed scores above 90.Tip
Set up automated performance monitoring alerts to catch performance regressions early.
Troubleshooting
Images not loading after CDN setup
Check CDN URL format in Settings > Advanced. Ensure CDN is properly configured to serve Ghost assets. Clear Ghost cache in Settings > Advanced > Clear cache.
Site slower after enabling caching
Disable problematic cache settings in Settings > Advanced. Check for conflicting plugins or theme issues. Reduce cache duration to
3600 seconds and gradually increase.AMP pages showing errors
Validate AMP pages using Google's AMP validator. Check theme compatibility in Settings > Design. Remove custom CSS that conflicts with AMP requirements in Code injection.
Theme optimization breaking site layout
Revert to backup theme files in Settings > Design > Advanced. Test changes in development mode first. Check browser console for JavaScript errors and fix code syntax issues.
Ready to get started with Ghost?
Put this tutorial into practice. Visit Ghost and follow the steps above.
Visit Ghost →