A slow website bleeds visitors. Studies consistently show that 53% of mobile users abandon a site that takes longer than three seconds to load. Every extra second of load time costs you conversions, SEO rankings, and revenue. The good news: most websites can be made three times faster without switching hosts or rebuilding anything from scratch. The tools exist, most have free tiers, and the setup is more straightforward than most people expect.
This guide covers the complete picture – from CDN selection and configuration to page caching, object caching, image optimization, CSS/JS handling, font loading, and database cleanup. You will also get a walkthrough of how to read your Core Web Vitals scores and what each metric actually means for your visitors. Whether you are running a simple blog or a full WooCommerce marketplace, these techniques apply.
How a CDN Actually Works
A Content Delivery Network is a geographically distributed group of servers. When you host a website on a single server in, say, New York, a visitor in Mumbai waits for data to travel roughly 14,000 kilometers round-trip. That round-trip adds 200-300ms of latency before a single byte of your page loads. A CDN solves this by keeping cached copies of your static assets – images, CSS, JavaScript, fonts, and sometimes entire HTML pages – on servers close to your visitors.
When a visitor requests your page, the CDN routes them to the nearest edge node. If that node has your content cached, it serves it immediately from there. If not (a cache miss), it fetches from your origin server, caches it, and serves it. Subsequent requests from that region hit the cache. Most CDNs have 100-300 edge locations worldwide.
Your origin server is still doing the heavy lifting for dynamic content. A CDN’s job is to reduce how often your origin server needs to respond at all – and to make static content delivery as fast as physically possible.
What Gets Cached on a CDN
- Images (JPEG, PNG, WebP, AVIF, GIF, SVG)
- CSS and JavaScript files
- Web fonts (.woff2, .woff)
- Video thumbnails and static video files
- HTML pages (with full-page caching CDNs like Cloudflare)
- PDF and document downloads
Dynamic content – shopping cart contents, logged-in user data, form submissions, search results – cannot be cached at the CDN level without special configuration. Most e-commerce sites configure CDNs to bypass cache for cart/checkout pages and for logged-in users.
CDN Comparison: Which One Should You Use
The CDN market has matured significantly. There are excellent free and low-cost options that serve most websites well. Here is a detailed comparison of the major options:Pricing (paid)
| CDN Provider | Free Tier | Edge Locations | Best For | Standout Feature | |
|---|---|---|---|---|---|
| Cloudflare Free | Yes – unlimited bandwidth | $20/mo (Pro), $200/mo (Business) | 300+ | Small to medium sites | DDoS protection + WAF included free |
| Cloudflare Pro | N/A | $20/mo | 300+ | Sites needing image optimization | Polish (WebP auto), Mirage (lazy load) |
| BunnyCDN | No (pay per use) | $0.01/GB in NA/EU, cheaper in other regions | 114 | Media-heavy sites, video | Cheapest bandwidth, BunnyCDN Stream |
| AWS CloudFront | 1TB/mo free first year | $0.0085-$0.17/GB by region | 450+ | AWS-native apps | Lambda@Edge for custom logic |
| Fastly | No | $0.12/GB (min $50/mo) | 90+ | High-traffic enterprise sites | Real-time purging, Varnish-based |
| KeyCDN | No ($10 free credit) | $0.04/GB in NA/EU | 64 | Developers, simple setup | HTTP/2 push, origin shield |
For most WordPress sites, Cloudflare Free is the right starting point. You get unlimited bandwidth, DDoS protection, a basic WAF, and meaningful performance gains at no cost. Upgrade to Cloudflare Pro when you want automatic WebP conversion and the Argo routing optimization.
BunnyCDN is worth switching to when your site serves a lot of media or video. Their per-GB pricing is dramatically lower than Cloudflare paid plans for bandwidth-heavy workloads, and BunnyCDN Stream is excellent for video delivery.
Page Caching: The Biggest Single Win
WordPress generates pages dynamically – every visit triggers PHP execution, database queries, and template rendering. For a page that rarely changes, this is pure waste. Page caching saves the rendered HTML of each page and serves it directly to future visitors, completely bypassing PHP and the database. This can reduce Time to First Byte (TTFB) from 500ms+ to under 50ms.
WP Rocket
WP Rocket is the easiest premium caching plugin. Install it and you get page caching, browser caching, GZIP compression, CSS/JS minification, lazy loading, and database cleanup all configured sensibly by default. Cost: $59/year for one site. No free version.
WP Rocket is the best choice if you want everything working without technical configuration. It integrates cleanly with Cloudflare, BunnyCDN, and most managed hosts. The main limitation is cost if you run multiple sites.
LiteSpeed Cache
LiteSpeed Cache (LSCWP) is free and incredibly powerful – but only delivers its full potential on LiteSpeed Web Server (used by Hostinger, DreamHost, and others) or OpenLiteSpeed. On Apache or Nginx, it functions as a standard object cache and minification plugin without the server-level page caching that makes it remarkable. On a LiteSpeed server, it rivals or beats WP Rocket on every metric.
W3 Total Cache
W3 Total Cache (W3TC) is the most configurable free caching plugin. It supports disk caching, memory caching (APC, Memcached, Redis), opcode caching, and CDN integration. The tradeoff is complexity – incorrect settings can break your site. It is best suited for developers who understand what each setting does.
WP Super Cache
WP Super Cache is Automattic’s free option. It does one thing – page caching – without the bells and whistles of the alternatives. Setup is simple and it rarely causes conflicts. For a straightforward blog or informational site where you do not need CDN integration, asset optimization, or database cleanup from a single plugin, it is a solid choice.
| Plugin | Price | Page Cache | Object Cache | CDN Integration | JS/CSS Optimization | Best For |
|---|---|---|---|---|---|---|
| WP Rocket | $59/yr per site | Yes | Via add-on | Yes (CloudFront, BunnyCDN, etc.) | Yes (minify, defer, delay) | Non-technical users, any host |
| LiteSpeed Cache | Free | Yes (LiteSpeed only) | Yes | Yes (CloudFlare, BunnyCDN) | Yes | Sites on LiteSpeed servers |
| W3 Total Cache | Free (Pro $99/yr) | Yes | Yes | Yes (20+ CDNs) | Yes | Technical users |
| WP Super Cache | Free | Yes | No | Limited | No | Simple blogs |
Object Caching: Redis vs Memcached
Object caching stores the results of expensive database queries and PHP operations in memory, so WordPress can reuse them without hitting the database again. This is separate from page caching – it helps dynamic pages (WooCommerce, logged-in views, search pages) that cannot be fully page-cached.
Redis
Redis is the recommended choice for WordPress. It supports persistent storage (data survives restarts), more complex data structures, and replication. Most managed WordPress hosts (Kinsta, WP Engine, Cloudways, GridPane) offer Redis as a one-click add-on. Use the Redis Object Cache plugin by Till Klampaeckel to connect WordPress to Redis.
Setup on a VPS: install Redis via your package manager, then configure WordPress to use it by adding the Redis host/port in wp-config.php or via the plugin’s settings. Cloudways and Kinsta do this automatically when you enable the Redis add-on.
Memcached
Memcached is simpler and has been around longer. It does not persist data across restarts and does not support the same data structures as Redis. For pure object caching in WordPress, it works fine, but Redis has become the standard recommendation because it is more versatile and better supported by hosting platforms.
On a WooCommerce store with 500+ products, enabling Redis object caching typically cuts database queries per page from 40-80 down to 5-15, reducing server load dramatically during traffic spikes.
Image Optimization: The Biggest File Size Wins
Images typically account for 50-70% of a page’s total byte weight. A single unoptimized full-resolution photo can be 3-5MB. Properly compressed and sized, the same image might be 50-200KB. Image optimization alone often cuts page weight by 40-60%.
Compression Tool Comparison
| Plugin | Free Tier | Paid Plans | WebP | AVIF | Compression Quality | Bulk Optimization |
|---|---|---|---|---|---|---|
| ShortPixel | 100 images/mo | From $3.99/mo or $0.009/image | Yes | Yes (paid) | Lossy/lossless/glossy | Yes |
| Imagify | 25MB/mo (~200 images) | From $4.99/mo | Yes | No | Normal/aggressive/ultra | Yes |
| EWWW Image Optimizer | Unlimited (local compression) | From $7/mo (ExactDN CDN) | Yes | No | Lossless/lossy (paid) | Yes |
| Smush | Unlimited (smaller files) | $7.50/mo (Pro) | Yes (Pro) | No | Lossless only on free | Yes (50 at a time free) |
ShortPixel offers the best compression quality across all three modes. The lossy mode is imperceptible to most viewers and achieves the highest file size reductions. The pay-per-image pricing works well for sites that do not upload images constantly.
EWWW’s free tier is unique – it compresses images locally using server-side tools without sending files to an external API. This is useful for sites with strict data handling requirements. The paid ExactDN add-on turns it into a full image CDN.
WebP and AVIF Auto-Conversion
WebP is a modern image format developed by Google. The same image in WebP is typically 25-35% smaller than JPEG at equivalent visual quality, and 25-35% smaller than PNG for images with transparency. All major browsers support WebP now.
AVIF is even newer – typically 50% smaller than JPEG and 20% smaller than WebP. Browser support is growing (Chrome, Firefox, Edge support it; Safari added it in v16). It takes longer to encode than WebP, which means initial conversion is slower.
All major image optimization plugins can auto-convert uploaded images to WebP and serve them to supported browsers via the picture element or .htaccess redirect rules. Enable this in your optimization plugin’s settings – it is one of the highest-impact changes you can make for free.
Image CDN Services
Image CDNs go beyond static file delivery – they transform images on the fly based on URL parameters or device detection. Request an image at 800px width and the CDN serves it at exactly 800px, not the full 2400px original.
- BunnyCDN Optimizer – $9.50/mo base. Resize, crop, WebP conversion, quality adjustment via URL parameters. Integrates directly with BunnyCDN’s storage and delivery.
- imgix – From $10/mo. Best-in-class image API. Apply filters, crop faces, generate thumbnails, serve AVIF – all via URL parameters. Used by major media companies.
- Cloudinary – Free tier (25GB storage + 25GB bandwidth). Full image and video management API. Complex transformations, AI-based cropping, format negotiation. Best for sites where images are core to the product.
Lazy Loading: Load What Users Actually See
Lazy loading defers loading of images and videos that are below the fold – outside the visitor’s current viewport. Instead of loading 20 product images when the page loads, the browser loads the first 3-4 that are visible, then loads more as the user scrolls.
WordPress has had native lazy loading built in since version 5.5. Every image with the loading=”lazy” attribute gets deferred automatically. You do not need a plugin for this – it is on by default. What you do need to check is that your theme is not breaking this with custom JavaScript image loaders.
For video iframes (YouTube, Vimeo), native lazy loading does not apply. Use a plugin like WP YouTube Lyte or Perfmatters to replace video iframes with click-to-load thumbnails. A YouTube iframe loads ~500KB of YouTube scripts on page load. A thumbnail with a play button loads nothing until the visitor clicks.
CSS and JavaScript Optimization
Minification
Minification removes whitespace, comments, and redundant characters from CSS and JS files without changing functionality. A 100KB CSS file typically minifies to 70-80KB. Most caching plugins handle this automatically. Enable it in WP Rocket’s “File Optimization” tab or W3TC’s “Minify” settings.
Combining Files
Combining (or concatenating) multiple CSS/JS files into one reduces the number of HTTP requests. With HTTP/1.1, browsers were limited to 6 parallel connections per domain, making many small files slow. With HTTP/2 (which most modern hosts support), multiplexing means multiple files load in parallel over a single connection, reducing the benefit of combining. Still, combining very small files (under 10KB each) can help reduce overhead.
Be careful with JS combining – it can break scripts that rely on loading order or that use inline JS expecting a specific global variable to exist. Test thoroughly after enabling.
Critical CSS Generation
Critical CSS (or “above the fold” CSS) is the minimal set of styles needed to render what a visitor sees without scrolling. The technique works like this: extract the CSS needed for the visible portion of the page, inline it in the HTML head, then load the full CSS file asynchronously. This eliminates render-blocking CSS and makes the page appear to load faster.
WP Rocket can generate critical CSS automatically. It takes a screenshot of your pages and identifies which CSS rules apply to the visible portion. The feature runs in the background and is worth enabling for sites where Largest Contentful Paint (LCP) is a concern.
Defer and Delay JavaScript
Render-blocking JavaScript stops the browser from rendering the page while it downloads and executes scripts. Two solutions: defer (download the script while parsing HTML, execute after parsing completes) and async (download and execute the script without blocking parsing). Most third-party scripts – Google Analytics, chat widgets, social sharing buttons – should be deferred or loaded with async.
WP Rocket’s “Delay JS execution” feature goes further – it delays ALL JavaScript until user interaction (a scroll, a click, a keypress). This dramatically improves Time to Interactive scores but can cause issues with scripts that need to run immediately. Test carefully, especially on WooCommerce stores.
Font Optimization
Web fonts are often an overlooked performance cost. Loading Google Fonts the standard way (via a link tag in the head) means a redirect to Google’s servers, a DNS lookup, a connection, and then the font file download. For a site loading 3 font weights, this adds 3+ seconds of potential blocking time on slow connections.
System Font Stacks
The fastest option is to use system fonts – fonts that are already installed on the visitor’s device. The modern system font stack uses the operating system’s default interface font: San Francisco on macOS/iOS, Segoe UI on Windows, and Roboto on Android. This gives you a clean, professional look with zero font loading overhead. Many popular sites including GitHub use system fonts.
Self-Hosting Fonts with font-display: swap
If you need a specific typeface, self-host the font files and use the font-display: swap CSS property. This tells the browser to show text in a fallback font immediately, then swap to the custom font once it loads. The visitor sees text right away (no invisible text while the font loads) and the visual shift when the font swaps in is usually acceptable.
Use Google Fonts Helper to download font files in WOFF2 format (the most compressed format, supported by all modern browsers), host them in your theme, and add the @font-face declarations with font-display: swap to your stylesheet.
Database Optimization
WordPress stores everything in its database – posts, options, transients, revisions, and more. Over time, this accumulates a lot of cruft that slows database queries. A WordPress site running for 2-3 years might have 50,000+ post revisions, 10,000+ spam comments, and thousands of expired transients taking up space.
WP-Optimize
WP-Optimize is the leading free database cleanup plugin. It removes post revisions, trashed posts, spam comments, expired transients, and orphaned metadata. It can also run OPTIMIZE TABLE commands on database tables to reclaim fragmented space. The free version is sufficient for most sites. Schedule weekly cleanups to keep things tidy.
Revision Control
WordPress saves a revision every time you save a post. On an active site, a single post can accumulate hundreds of revisions. Limit revisions by adding this to wp-config.php: define(‘WP_POST_REVISIONS’, 5); – this caps revisions at 5 per post. Clean up existing revisions with WP-Optimize.
Transient Cleanup
Transients are temporary cached data stored in the wp_options table. Plugins create them constantly and some do not clean up after themselves. Thousands of expired transients slow down every page load that queries the options table. WP-Optimize cleans these automatically. If you are using Redis or Memcached as your object cache backend, transients are stored in memory instead of the database, which is significantly faster.
Core Web Vitals: What Google Actually Measures
Core Web Vitals are Google’s three primary measurements of page experience. They affect search rankings directly. Understanding what each metric measures helps you prioritize which optimizations to pursue first.
| Metric | What It Measures | Good Score | Needs Work | Primary Fix |
|---|---|---|---|---|
| LCP (Largest Contentful Paint) | Time until the largest visible element loads | Under 2.5s | Over 4s | Image optimization, CDN, server response time |
| INP (Interaction to Next Paint) | Responsiveness to user input | Under 200ms | Over 500ms | Reduce JS execution, defer non-critical scripts |
| CLS (Cumulative Layout Shift) | Visual stability – how much elements shift | Under 0.1 | Over 0.25 | Set dimensions on images/embeds, avoid inserting content above existing |
LCP is usually the easiest to improve with the techniques in this guide. The LCP element is most commonly the hero image or banner at the top of the page. Making that image load faster – via CDN, WebP conversion, and preloading – directly improves your LCP score.
CLS often comes from images without specified dimensions. When the browser does not know how tall an image will be before it loads, it cannot reserve space for it. When the image loads, it pushes other content down, causing layout shift. Always specify width and height attributes on images.
Using GTmetrix and PageSpeed Insights
GTmetrix and Google PageSpeed Insights are the two tools you will use to measure and track performance. They are free and provide actionable recommendations.
PageSpeed Insights Walkthrough
Go to pagespeed.web.dev and enter your URL. PageSpeed Insights runs your page through Google’s Lighthouse tool and shows you scores for Performance, Accessibility, Best Practices, and SEO. The Performance score is what matters for speed. Scores above 90 are green, 50-89 are orange, below 50 are red.
Scroll down to “Opportunities” – these are specific, quantified improvements. “Serve images in next-gen formats” might show “Estimated savings: 2.5s”. “Remove unused CSS” might show “Potential savings: 650ms”. Work through these in order of highest estimated savings first.
GTmetrix Walkthrough
GTmetrix runs from actual server locations and gives you a waterfall chart of every request your page makes. The waterfall shows you exactly what is loading, how large each resource is, and how long each takes. Look for large resources (over 100KB), slow first requests (high TTFB), and render-blocking resources at the top of the waterfall.
GTmetrix’s “Structure” tab shows recommendations similar to PageSpeed Insights. The “History” feature lets you track improvements over time. A free account gets 3 test locations and daily monitoring for one URL.
Before/After Speed Test Examples
A typical WordPress blog with no optimization: 4.2s load time, 3.8MB page size, 85 requests. After enabling Cloudflare free + WP Rocket + ShortPixel WebP: 1.4s load time, 890KB page size, 42 requests. That is a 67% reduction in load time and a 77% reduction in page weight from three plugin installs and a CDN signup.
A WooCommerce store: 6.8s load time, 5.2MB, 120 requests. After full optimization (CDN, page caching, Redis object caching, image optimization, JS defer): 2.1s load time, 1.1MB, 55 requests. Not every site achieves these results – stores with many products and active plugins have more complexity – but significant gains are available on almost every site.
Setting a Performance Budget
A performance budget is a set of limits you commit to: total page weight under 1MB, load time under 2 seconds, LCP under 2.5 seconds. Having explicit numbers makes it easy to evaluate new plugins and design decisions. “Does adding this slider plugin keep us under our performance budget?” is a concrete question.
Tools like bundlesize (for JS) and Lighthouse CI (for overall performance) can be integrated into your deployment pipeline to block deploys that exceed your budget. For most site owners without CI pipelines, simply running a monthly PageSpeed Insights check against your key pages and comparing to your target scores serves the same purpose.
Performance for Community Sites and Marketplaces
Community platforms built on BuddyPress or BuddyBoss have specific performance challenges. Activity streams, member directories, and notification systems generate many database queries per page. Group pages with dozens of members and recent activity can be particularly slow.
Redis object caching is especially valuable for community sites – BuddyPress makes heavy use of the WordPress object cache for friends lists, group memberships, and activity streams. Enabling Redis can cut BuddyPress page load times by 40-60%.
Page caching for community sites requires careful configuration. Activity streams, notification counts, and user-specific widgets cannot be cached. Most caching plugins have a “logged-in users bypass cache” setting – enable it. Cache only the public-facing pages (homepage, member profiles, group pages for logged-out visitors).
The Reign theme is built with performance in mind – it loads minimal CSS and JavaScript by default and is compatible with all major caching plugins. If you are running a marketplace or community site on Reign, the optimizations in this guide apply fully. Check the Reign documentation for theme-specific caching recommendations.
Step-by-Step Implementation Order
If you are starting from scratch, here is the order that delivers the biggest gains fastest:
- Baseline test – Run PageSpeed Insights and GTmetrix before touching anything. Save the results.
- Add Cloudflare – Free, 10-minute setup. Provides CDN, SSL, and DDoS protection immediately.
- Install a caching plugin – WP Rocket for simplicity, LiteSpeed Cache if on a LiteSpeed server, W3TC if you want free with full control.
- Enable image optimization – Install ShortPixel or Imagify, bulk-optimize existing images, enable WebP conversion.
- Set image dimensions – Fix CLS by ensuring all images have width/height attributes. Most themes handle this; check in PageSpeed Insights.
- Defer non-critical JavaScript – Enable JS deferring in your caching plugin. Test WooCommerce checkout and contact forms.
- Enable Redis object caching – Particularly valuable for WooCommerce or BuddyPress sites. Check if your host supports it.
- Database cleanup – Install WP-Optimize, run a full cleanup, schedule weekly maintenance.
- Optimize fonts – Either switch to system fonts or self-host with font-display: swap.
- Re-test – Run PageSpeed Insights and GTmetrix again. Compare against your baseline.
Series Navigation
This post is part of the Website Owner’s Toolkit – a 21-part series covering everything you need to run a successful website.
