The ultimate guide to WordPress speed optimization
Published on 11 December 2025
Your website loads slowly. Visitors click away. Google penalizes you. Sound familiar?
WordPress speed is crucial for your online success. A one-second delay can reduce your conversion rate by 7%. Google uses load time as a ranking factor. And visitors have zero patience for slow websites.
The good news? You can make a slow WordPress site blazing fast with the right approach. No expensive agency needed, no technical background required. This guide shows you step-by-step how to optimize your WordPress website for maximum speed.
You'll learn concrete tactics that actually work. From hosting choice to caching strategies, from image optimization to Core Web Vitals. Everything you need to build a lightning-fast WordPress site.
And the best part? Most optimizations cost nothing and can be implemented within an hour. Only your hosting upgrade costs money, but you'll earn it back through higher conversions and better SEO rankings.
This guide covers everything. Beginner-friendly explained, but with enough depth for advanced users. With concrete tools, plugin recommendations, and a practical 4-week optimization plan.
Let's begin. Time to make your WordPress site faster than the competition.
## Speed testing: measure your baseline
You can't optimize what you don't measure. That's why you always start with a speed test. Measure your current performance, optimize, and measure again. This way you see exactly what works.
**Google PageSpeed Insights** is the most important tool. Google uses this data for your rankings. Go to pagespeed.web.dev and enter your URL. You'll get scores for mobile and desktop, plus concrete improvement points.
Pay attention to the Core Web Vitals scores. These are the metrics Google cares about most. A green score means you're in the top 25% of the web. Orange is moderate, red is bad.
**GTmetrix** provides more technical details. Go to gtmetrix.com and test your site. You'll see waterfall charts that show exactly which files load slowly. Perfect for finding bottlenecks.
Always test from multiple locations. A site that's fast in the Netherlands can be slow in the US. GTmetrix lets you choose test location. Google PageSpeed automatically tests worldwide.
**Core Web Vitals explained** - these metrics determine your Google ranking:
**LCP (Largest Contentful Paint)** measures how quickly your main content loads. Good is under 2.5 seconds. This is often your hero image or first text block. Slow hosting or large images cause poor LCP.
**INP (Interaction to Next Paint)** has replaced the old FID metric since 2024. It measures how quickly your site responds to clicks and interactions. Good is under 200 milliseconds. Too much JavaScript or blocked threads cause poor INP.
**CLS (Cumulative Layout Shift)** measures how stable your layout is during loading. Good is under 0.1. If content shifts during loading (ads that suddenly load, images without dimensions) you get a poor CLS score.
Test at least these five pages: homepage, main landing page, blog post, product page, and contact page. Each page has different challenges and bottlenecks.
Note your scores before and after each optimization. Use a spreadsheet or simply pen and paper. This way you see which adjustments have the most impact.
A realistic goal: LCP under 2 seconds, INP under 150ms, CLS under 0.05. This places you in the top 10% of all WordPress sites. Achievable within 2-4 weeks with the right approach.
## Hosting: the foundation of speed
You can optimize all you want, but with poor hosting you'll remain slow. Hosting is the foundation. Don't cut corners here if speed is important.
**Shared hosting vs VPS vs managed WordPress** - what do you need?
**Shared hosting** costs €3-7 per month. You share a server with hundreds of other sites. Sometimes slow, but fine for small blogs with little traffic. Providers like Hostinger and TransIP offer decent shared hosting.
The downside? If another site on your server gets hacked or receives lots of traffic, your speed suffers. You have no control over server configuration. PHP version, memory limits, and caching are limited.
**VPS hosting** gives you your own virtual server starting at €10 per month. Much faster and more reliable. You can set PHP versions yourself, configure caching, and allocate server resources. Does require some technical knowledge.
Good VPS providers in the Netherlands: TransIP, Antagonist, and Vimexx. Choose at least 2GB RAM and 2 CPU cores for an average WordPress site.
**Managed WordPress hosting** is the Cadillac option. Starting at €20 per month you get hosting specifically optimized for WordPress. Server-level caching, automatic updates, staging environments, and expert support.
Providers like WP Engine, Kinsta, and Cloudways offer managed WordPress hosting. They do the heavy lifting for you. Install WordPress, build your site, they handle the rest.
**Minimum specs for fast WordPress:**
- PHP 8.2 or 8.3 (newer is faster)
- At least 512MB PHP memory limit (1GB is better)
- SSD storage (no old HDDs)
- HTTP/2 or HTTP/3 support
- LiteSpeed or Nginx web server (faster than Apache)
- At least 2GB total RAM
- Daily backups included
Check these specs before buying hosting. Cheap shared hosting often lacks these features. Then you can optimize all you want, you'll remain slow.
**Compare Dutch providers?** Check our hosting comparison with current prices and specs. We test speed, uptime, and support quality monthly.
**Location matters.** If your audience is in the Netherlands, choose hosting with servers in the Netherlands or at least Europe. Physical distance between server and visitor determines latency. A server in the US adds 100-200ms latency for Dutch visitors.
CloudLinux, LiteSpeed, and NVMe SSD are buzzwords you often see. They're not essential, but they do make a real difference. CloudLinux isolates sites on shared hosting better. LiteSpeed is 3-5x faster than Apache. NVMe SSD is 5x faster than SATA SSD.
**Migrating hosting** is easier than you think. Use a plugin like Duplicator or All-in-One WP Migration. Or ask your new host for free migration - many providers do this at no cost as a service.
Test your new hosting extensively before changing DNS. Build your site, test speed, check if everything works. Only then do you switch DNS and your site goes live on the new hosting.
Hosting is 40-50% of your total speed. Spend time and budget here. It's the foundation everything rests on.
## Caching: the biggest impact on speed
Caching is magic. It can make your site 5-10x faster with one plugin installation. Every WordPress site needs caching. No exceptions.
**What is caching actually?** WordPress generates each page dynamically. It runs PHP code, retrieves data from the database, and builds HTML. This takes time. Caching stores the finished HTML and serves it directly. No database queries, no PHP processing.
**Three types of caching** every WordPress site needs:
**Browser caching** tells browsers to store files locally. Fonts, CSS, JavaScript, and images are downloaded once. On a second visit the page loads instantly - browsers use local copies.
Set browser cache via your .htaccess file or via a caching plugin. Set expiry times to 1 year for static files (fonts, images) and 1 day for CSS/JS (which may change more often).
**Page caching** stores complete HTML pages. The server generates the HTML once and then serves it from cache. This is the biggest performance boost - often 10-20x faster than uncached WordPress.
Every caching plugin does page caching. It's the core function. Cache is cleared with new posts, comments, or changes. So visitors always get current content, but with cache speed.
**Object caching** stores database query results in RAM. WordPress often does the same queries multiple times per page. Object caching prevents these duplicate queries by keeping results in memory.
Redis and Memcached are popular object cache systems. You need server access to install them. The difference is noticeable on complex sites with many plugins and database queries.
**Plugin comparison** - which cache plugin is best?
**WP Rocket** is the king. €59 per year for 1 site, but worth every euro. Simple setup, works out-of-the-box, no technical knowledge needed. Page caching, browser caching, GZIP compression, lazy loading, database cleanup - everything included.
WP Rocket's secret is the onboarding. You install, activate, done. The default settings are already optimized. For 90% of sites you don't need to change anything. Just install and be 5x faster.
Critical CSS generation is well implemented. Preloading works reliably. Lazy load is better than competitors. The €59 investment pays back in one day through better conversions.
**LiteSpeed Cache** is free and incredibly good. But only if your hosting uses LiteSpeed web server. Then it's faster than WP Rocket through server-level integration. Check with your host if they run LiteSpeed.
LiteSpeed Cache does everything: page cache, object cache, image optimization, CDN integration, database cleanup. The interface is more complex than WP Rocket - more options means more confusion for beginners.
Setup takes longer. You have to go through 10+ tabs of settings. But the results are excellent on LiteSpeed servers. And it's free - no license costs.
**W3 Total Cache** is the old veteran. Free, open source, feature-rich. But complex. The settings interface is overwhelming - dozens of options you don't know what they do.
For advanced users who want full control, W3TC is fine. You can fine-tune everything in detail. But for beginners we don't recommend it - too easy to break things.
**WP Super Cache** by Automattic is simple and solid. It does page caching, that's it. No bells and whistles, just reliable caching. Free and easy to configure.
Good for beginners who just want page caching without fuss. But you miss features like lazy loading, minification, and critical CSS that WP Rocket and LiteSpeed do have.
**Redis setup** for object caching - this is advanced but worthwhile on busy sites:
1. Ask your host to install Redis (often freely available on VPS/managed hosting)
2. Install Redis Object Cache plugin
3. Activate - the plugin detects Redis automatically
4. Check status - it should say "Connected"
Redis runs in RAM so is extremely fast. Database queries that took 50ms now take 2ms. On sites with many simultaneous visitors this makes a huge difference.
**CDN setup** - Content Delivery Network for worldwide speed:
**Cloudflare** is free and simple. Sign up, change DNS nameservers, done. Cloudflare serves your static files (images, CSS, JS) from their worldwide network. Visitors get files from the nearest Cloudflare server.
Free plan is more than enough for small to medium sites. You get SSL, DDoS protection, and basic caching. Pro plan (€20/month) adds image optimization and better caching.
**Bunny.net** is faster and cheaper for larger sites. €1 per TB traffic, pay only what you use. Simple setup via WordPress plugin or manual integration. Edge servers in 80+ locations worldwide.
For Dutch visitors, CDN makes limited difference - servers are physically close. But for international visitors it saves 200-500ms load time. And image optimization via CDN saves bandwidth on your hosting.
**Caching exceptions** - which pages not to cache:
- Checkout and cart pages (WooCommerce)
- User dashboards and login pages
- Contact forms with dynamic content
- Pages with personal data
Good caching plugins exclude these automatically. But check it - a cached checkout page breaks your conversions.
**Cache invalidation** works automatically with good plugins. New post? Cache cleared. Comment placed? Cache cleared. Product updated? Cache cleared. You don't need to do anything.
Manual cache clearing is sometimes needed after major changes. All plugins have a "Clear Cache" button in the admin bar. Click it after template changes or major content updates.
Caching is low-hanging fruit. Install WP Rocket or LiteSpeed Cache today. You'll be 5x faster within 15 minutes. No other optimization has this much impact with so little effort.
## Database optimization: cleaning up for speed
Your WordPress database grows continuously. Post revisions, spam comments, transients, orphaned data - it piles up. A bloated database slows down queries and makes your site sluggish.
**The problem with post revisions:** every time you save a post, WordPress saves the complete old version. After 50 edits you have 50 copies of the same post in your database. This is storage waste and slows down queries.
Limit revisions to maximum 5 per post. Add this to wp-config.php:
```php
define('WP_POST_REVISIONS', 5);
```
This limits new posts to 5 revisions. But old posts often have 50+ revisions. Those need to be cleaned up.
**Transients** are temporary data WordPress stores for caching. Some plugins store thousands of transients that never expire. They pollute your database and enlarge the wp_options table.
Expired transients are often not automatically removed. After 2 years your wp_options table can be 50MB, of which 40MB is expired transients. This significantly slows down queries.
**Orphaned data** occurs with plugin removal. The plugin is gone, but the database tables and settings remain. After years of trying plugins, your database is full of junk.
Post meta, user meta, options - everything stays. Some plugins create custom tables that are never cleaned up. Your database grows and grows.
**WP-Optimize plugin** cleans up everything with one click:
1. Install WP-Optimize (free)
2. Go to WP-Optimize > Database in admin
3. Select: revisions, drafts, spam, transients, orphaned data
4. Click "Run optimization"
5. Make a backup first!
The plugin shows how much it removes. Often 500MB+ on old sites. Database queries become 2-3x faster after major cleanup.
Set up automatic weekly cleanup. WP-Optimize can run this scheduled. Every Sunday night it cleans up old revisions and transients. Your database stays lean without manual work.
**Autoloaded data problem** - this is subtle but impactful:
WordPress loads certain options on every page load. This "autoloaded" data comes into memory for fast access. But some plugins store megabytes of data as autoloaded options.
Ideally it's under 1MB autoloaded data. Check your current size:
```sql
SELECT SUM(LENGTH(option_value)) as autoload_size
FROM wp_options
WHERE autoload='yes';
```
Is it above 3MB? You have a problem. Query which options are large:
```sql
SELECT option_name, LENGTH(option_value) as size
FROM wp_options
WHERE autoload='yes'
ORDER BY size DESC
LIMIT 20;
```
Often you see caching plugins, SEO plugins, or page builders storing large arrays. Some can safely be set to autoload='no' if they're not needed on every page load.
**Optimize database tables** via phpMyAdmin:
1. Login phpMyAdmin via cPanel/DirectAdmin
2. Select your WordPress database
3. Select all tables
4. "With selected" dropdown > "Optimize table"
This defragments tables and reclaims unused space. Especially InnoDB tables fragment over time. Optimization can reclaim 10-20% disk space.
Do this monthly on busy sites, quarterly on small blogs. It takes 30 seconds and prevents database bloat.
**Backup first!** Database optimization is relatively safe, but things happen. Always make a backup before deleting things. Use your hosting backup, or install UpdraftPlus for manual backups.
Test your site thoroughly after database cleanup. Especially check:
- Comments appear correctly
- Posts show all content
- Custom fields and meta data intact
- Plugin settings preserved
Usually everything works perfectly. But better safe than sorry - test before continuing with other optimizations.
**Advanced: database indexing** - WordPress has default indexes, but custom queries can benefit from extra indexes. This is only relevant if you have custom plugins or queries that are slow.
Check slow query log via phpMyAdmin or adminer. See repetitive slow queries? An index might help. This is advanced territory - only do this if you understand SQL.
For 95% of sites, cleanup is sufficient. Limit revisions, clean up transients, reduce autoload. Your database stays fast and your queries stay under 50ms.
## Image optimization: 60% of your pageweight
Images are often 60-70% of your total page size. A 3MB page? Probably 2MB images. Optimize your images and you have instantly 2x faster load time.
**The problem:** photographers upload 5MB photos of 4000x3000 pixels. WordPress displays them at 800px wide. Your browser downloads 5MB, displays 200KB worth of pixels. Huge waste.
**WebP conversion** is step one. WebP is 25-35% smaller than JPEG at equal quality. All modern browsers support it. No reason to still use JPEG.
Upload a JPEG, automatically convert to WebP, serve WebP to browsers. Visitors with old browsers (1% of traffic) get fallback JPEG. Everyone happy.
**Lazy loading** loads images only when they're about to come into viewport. Your homepage has 20 images? Visitor sees first 3 images. Lazy load loads those 3, the rest only when scrolling.
This speeds up initial page load enormously. First Contentful Paint is 2-3x faster. Above-the-fold content loads instantly, below-the-fold images load just-in-time.
WordPress has had native lazy loading since version 5.5. Simply `loading="lazy"` attribute on images. But plugin-based lazy loading is more advanced - they load just before image comes into viewport (300px margin). Native lazy loading waits until image is in viewport.
**Responsive images with srcset** - serve correct size per screen:
Desktop user with 1920px screen gets 1920px image. Mobile user with 390px screen gets 390px image. Logical, right? But often doesn't happen.
WordPress automatically generates multiple sizes on upload. You upload 2000px, WordPress makes 1536px, 1024px, 768px, 300px versions. But your theme must use them via srcset attribute.
Check your image tags. See `srcset` with multiple sizes? Good. See only `src` with one size? Your theme doesn't do it right.
```html
```
Browser automatically chooses the right size. Mobile users download 100KB instead of 500KB. Saves 75% bandwidth.
**Compression quality** - set JPEG/WebP quality:
Default quality is often 90-95%. Visually identical to 100%, but 50% smaller. Quality 85% is often invisibly different from 90%, but another 30% smaller.
Test different quality settings. 85% is the sweet spot for most images. Product photos where detail is important: 90%. Hero images and backgrounds: 80% is fine.
**Plugin recommendations** for image optimization:
**Imagify** by WP Media (makers of WP Rocket) is excellent. €9.99/month for unlimited images. Automatic WebP conversion, resize, lazy loading. Bulk optimize existing images with one click.
The plugin optimizes on upload automatically. You upload 3MB photo, Imagify compresses to 400KB WebP. No extra steps, it just happens.
Backup of originals is kept. Not happy with compression? Restore originals and try different settings. You never lose original quality.
**ShortPixel** is similar to Imagify. €10/month for 10,000 images. Slightly more aggressive compression than Imagify - sometimes better results, sometimes a bit more quality loss.
Choose between Lossy (max compression, small quality loss), Glossy (balanced), and Lossless (no quality loss, less compression). Glossy is recommended for 90% of use cases.
ShortPixel also has CDN integration. Your images are served from their CDN with automatic device detection. Mobile users get smaller versions without srcset complexity.
**EWWW Image Optimizer** is free but slower. It uses your own server resources for compression. On shared hosting this can cause timeouts. On VPS it's fine.
EWWW converts to WebP, does lazy loading, and bulk optimization. The compression is slightly less effective than Imagify/ShortPixel. But it's free, so good enough for small sites.
**Smush** by WPMU DEV is popular but has limitations. Free version does max 5MB images and 50 per batch. Pro version is €10/month and removes limits.
Compression quality is good. Interface is simple. But Imagify and ShortPixel are more powerful and better priced if you're paying anyway.
**Manual image optimization** for those who don't want a plugin:
1. Resize images before upload - use Photoshop/GIMP/online tools
2. Export as WebP instead of JPEG (save as > WebP in GIMP)
3. Max 1920px wide for hero images, 1200px for content images
4. Target max 150KB per image for content, 300KB for hero images
Manual works fine for small sites with few images. But once you publish a lot of content, a plugin is essential - it automates everything.
**SVG for icons and logos** - vector graphics scale perfectly and are often 5-10x smaller than PNG:
Logo as PNG: 50KB. Same logo as SVG: 5KB. And SVG scales infinitely without quality loss. Perfect for retina displays.
Use SVG for: logos, icons, simple illustrations, shapes. Not for photos - keep using WebP/JPEG for those.
WordPress blocks SVG uploads by default (security). Install "Safe SVG" plugin to allow uploads with sanitization.
**Before/after check** - test image optimization impact:
Run PageSpeed test before optimization. Check "Total Blocking Time" and "Largest Contentful Paint". Note scores.
Optimize your images with plugin. Regenerate thumbnails via plugin. Clear cache.
Run PageSpeed again. You should see 20-30 points improvement. LCP often 1-2 seconds faster. Page size 50-70% smaller.
Image optimization has massive impact. It's top 3 most effective optimizations after hosting and caching. Do this first before starting code optimization.
## Code optimization: keeping JavaScript and CSS lean
Code bloat is a silent killer. Every plugin adds JavaScript and CSS. After 20 plugins you have 2MB of scripts and stylesheets. Your page becomes a tanker.
**The problem with render-blocking resources:**
Browser downloads HTML, starts rendering, encounters JS/CSS in the ``, stops rendering, downloads scripts, executes scripts, continues rendering. Visitor sees white screen during download and execution.
This is called render-blocking. Your HTML is 50KB and loads in 100ms. But your 500KB of JS/CSS in the head blocks rendering for 2 seconds. Terrible experience.
**JavaScript defer and async** - load scripts without blocking:
`defer` downloads script parallel with HTML parsing, executes after HTML parse complete. Perfect for scripts not immediately needed.
`async` downloads parallel, executes as soon as download is ready (interrupts HTML parsing). Use for independent scripts like analytics.
```html
```
WP Rocket and other optimization plugins can automatically add defer. Enable "Load JavaScript deferred" and test thoroughly - some scripts break with defer.
**CSS Critical Path** - inline critical CSS, defer rest:
Critical CSS is the CSS needed to render above-the-fold content. Often 10-20KB of your total 200KB stylesheet.
Inline that 20KB in ``. Defer the remaining 180KB. Above-the-fold content renders instantly. Below-the-fold loads later.
WP Rocket generates critical CSS automatically. It visits your pages, determines above-the-fold CSS, extracts it, inlines it. Works surprisingly well for 80% of sites.
Other plugins that do this: FlyingPress, WP Fastest Cache Premium. Or manual with tools like criticalcss.com - you get critical CSS to manually inline.
Test thoroughly after critical CSS implementation. Sometimes you see flash of unstyled content (FOUC) during loading. This means not all critical CSS was correctly detected. Tweak settings or add manual CSS.
**Minification** - remove whitespace and comments from code:
Unminified CSS/JS has indenting, comments, long variable names. Minification removes everything superfluous. Your 100KB file becomes 70KB without losing functionality.
```css
/* Before minification */
.header {
background-color: #ffffff;
padding: 20px;
margin: 0 auto;
}
/* After minification */
.header{background-color:#fff;padding:20px;margin:0 auto}
```
All good caching plugins do minification. Enable in WP Rocket or LiteSpeed Cache. It often combines multiple files too - 10 small CSS files become 1 minified file.
**Concatenation** - combine multiple files into one:
You have 15 CSS files from different plugins. Browser makes 15 separate requests. With HTTP/1.1 this is slow - requests happen sequentially.
Concatenation combines those 15 files into 1 file. Browser makes 1 request instead of 15. With HTTP/1.1 this saves seconds.
But HTTP/2 multiplexes requests - multiple files parallel over 1 connection. Concatenation helps less with HTTP/2. Some servers run HTTP/2, some don't. Check your hosting.
Modern best practice: light concatenation (combine tiny files), but not everything in 1 monster file. Sweet spot is 3-5 CSS files and 3-5 JS files.
**Plugin audit** - which plugins can you remove:
Go to Plugins overview. Deactivate 1 plugin, test speed. Dramatic difference? That plugin is bloated. No difference? Activate again.
Note which plugins load many scripts. Install Query Monitor plugin. Go to page, check "Scripts & Styles" tab. You see exactly which plugin loads how much KB.
Plugins that often have lots of bloat:
- Page builders (Elementor, Divi load 500KB+ per page)
- Social sharing buttons (load scripts from 5+ social networks)
- Sliders and carousels (often 200KB for fancy animations)
- Contact forms with visual builders (often overkill)
Find alternatives for bloated plugins. Heavy social sharing plugin? Replace with lightweight HTML sharing links. Slider with 200KB scripts? Native CSS scroll snap does the same in 2KB.
**Unused CSS removal** - advanced but impactful:
Your theme loads complete stylesheet of 300KB. You use 40% of that CSS. 180KB is never used but still downloaded.
Tools like PurifyCSS and UnCSS scan your HTML and remove unused CSS. Tricky because dynamic content (popup modals, hidden menus) uses CSS not initially visible.
WP Rocket Pro (from €249/year) does automatic unused CSS removal. It's conservative - better to keep too much than remove too little. Result is 30-50% smaller stylesheets.
Manual method: use Chrome DevTools Coverage tab. Navigate your site, see which CSS is used/unused. Manual removal is tedious but possible.
Only do if you're comfortable with CSS debugging. Done wrong it breaks your layout. Start with low-risk pages (simple blog posts) before tackling homepage.
**Font optimization** - web fonts are often 200-400KB:
Google Fonts often loads 3-4 weights (regular, bold, italic) of 2 font families. That's 8 font files of 50KB each. 400KB total for text rendering.
Limit to 2 weights maximum. Regular and bold is sufficient for 90% of sites. Italic? Use faux italic via `font-style: italic` - browsers fake it.
Self-host fonts instead of Google Fonts. Loading from external domain costs extra DNS lookup and connection. Self-hosted fonts load faster.
Use `font-display: swap` - text renders in system font during font download, then swaps to web font. Prevents invisible text during font load.
```css
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}
```
WOFF2 format is 30% smaller than WOFF. All modern browsers support it. No reason to include older formats.
**Third-party scripts** are often the biggest bottleneck:
Google Analytics, Facebook Pixel, Google Ads, chat widgets, heatmap tools - they all load external scripts. Often bloated and render-blocking.
Load third-party scripts async. Or better: delay loading until user interaction. WP Rocket has "Delay JavaScript execution" feature - scripts load only on first scroll/click.
Does your site contain 10+ third-party scripts? Consider a Tag Manager (Google Tag Manager). Load 1 script (GTM), which loads the rest async and centrally managed.
Or ask yourself: do I really need this? That fancy live chat? You have 2 chats per week, costs 500KB page load. Possibly not worth it.
Code optimization is trial-and-error. Test after each change. Break things? Revert. Works well? Keep it. Build knowledge of which optimizations work for your site.
## Core Web Vitals optimization: Google's ranking factors
Google has been ranking partly on Core Web Vitals since 2021. Good scores = ranking boost. Poor scores = your competitor ranks above you. This is no longer optional.
**INP (Interaction to Next Paint)** - new since March 2024:
INP replaces FID (First Input Delay). It measures how quickly your site responds to all interactions, not just first click. A more complete picture of interactivity.
**Good:** under 200ms. **Moderate:** 200-500ms. **Poor:** above 500ms.
**What causes poor INP:**
- Too much JavaScript execution during interactions
- Long tasks blocking main thread (tasks above 50ms)
- Event handlers doing heavy computation
- Unoptimized third-party scripts
**How to fix INP:**
Reduce JavaScript execution time. Check PageSpeed "Reduce JavaScript execution time" warning. It shows which scripts run long.
Break up long tasks into smaller chunks. JavaScript task of 300ms? Split into 6 chunks of 50ms with `setTimeout()` between. Main thread stays responsive.
Debounce event handlers. Scroll events firing 100x per second? Debounce to max 10x per second. Window resize events? Debounce to 1x per 100ms.
```javascript
// Before: fires 100x during scroll
window.addEventListener('scroll', function() {
// heavy computation
});
// After: fires max 1x per 100ms
let timeout;
window.addEventListener('scroll', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// heavy computation
}, 100);
});
```
Defer non-essential scripts. Analytics, ads, social media - they don't need to be during initial load. Defer until after page load or till user interaction.
Use web workers for heavy computation. Offload processing to background thread. Main thread stays responsive for user interactions.
**LCP (Largest Contentful Paint)** - how fast does your main content load:
**Good:** under 2.5s. **Moderate:** 2.5-4s. **Poor:** above 4s.
LCP element is often your hero image, first heading, or featured image. Google automatically measures which element is largest above-the-fold.
**What causes poor LCP:**
- Slow server response time (TTFB above 600ms)
- Render-blocking JS/CSS in ``
- Large unoptimized images
- Client-side rendering (JS generating HTML)
**How to fix LCP:**
**Faster hosting** - upgrade to VPS or managed WordPress. TTFB under 200ms is ideal. Check with WebPageTest or GTmetrix.
**Preload LCP element** - tell browser to prioritize your hero image:
```html
```
WP Rocket and LiteSpeed Cache can do this automatically. They detect LCP element and add preload.
**Optimize LCP image** - make sure your hero image is max 200KB. Use WebP, aggressive compression, correct dimensions. Hero image at 4000px while screen is 1920px? Waste.
**Remove render-blocking resources** - defer/async JS, critical CSS inline. Scripts in head blocking for 2 seconds? LCP can never be under 2 seconds.
**Use CDN** for static assets. Hero image loading from your server in Netherlands costs 400ms for US visitor. Loading from Cloudflare CDN costs 100ms.
**CLS (Cumulative Layout Shift)** - how stable is your layout during loading:
**Good:** under 0.1. **Moderate:** 0.1-0.25. **Poor:** above 0.25.
CLS measures how much content shifts during page load. Image without height/width? Everything below shifts down when image loads. Bad experience and poor CLS.
**What causes CLS:**
- Images without width/height attributes
- Ads, embeds, iframes without reserved space
- Fonts loading and switching typeface (FOIT/FOUT)
- Dynamically injected content (JS manipulating DOM)
**How to fix CLS:**
**Specify dimensions** on all images:
```html
```
Browser reserves space for image before it loads. No shift when image enters DOM. WordPress does this automatically if your theme is good.
**Reserve space** for ads and embeds. Wrapper div with fixed height:
```html
```
Ad loads in reserved space. No content shift.
**Font loading strategy** - use `font-display: swap` but optimal is font preload:
```html
```
Font loads during HTML parse. By the time CSS asks for font, it's already loaded. No font swap flash.
**Avoid inserting content** above existing content. Sticky header that's 80px tall? Reserve those 80px in your CSS from the start. Not via JS after load.
**4-week optimization plan** - systematic approach:
**Week 1: Get basics in order**
- Hosting check - is it fast enough? No → upgrade
- Install caching plugin (WP Rocket or LiteSpeed)
- Install image optimization plugin (Imagify or ShortPixel)
- Bulk optimize existing images
- Test Core Web Vitals - note baseline scores
**Week 2: Code cleanup**
- Plugin audit - remove what's not needed
- Implement JavaScript defer/async
- CSS minification and concatenation
- Unused CSS removal (carefully!)
- Font optimization
- Test scores - LCP should be 30-40% better
**Week 3: Fine-tuning**
- Generate and inline critical CSS
- Preload LCP elements
- Database cleanup with WP-Optimize
- CDN setup (Cloudflare or Bunny)
- Third-party script delay
- Test scores - all metrics should be green
**Week 4: Monitoring and tweaks**
- Check Google Search Console Core Web Vitals report
- Analyze Real User Monitoring (RUM) data
- Fix edge cases (mobile vs desktop differences)
- Documentation of settings for colleagues
- Set up monthly monitoring checklist
This plan works. You go from red scores to green in 4 weeks. Spend 2-3 hours per week. After week 4 it's maintenance mode - monthly checks and small tweaks.
**Tools for Core Web Vitals monitoring:**
**Google Search Console** - free, shows real user data from your traffic. Check "Core Web Vitals" report weekly. You see which pages score poorly and why.
**PageSpeed Insights** - lab data per page. Use for troubleshooting specific pages. Mobile vs desktop scores can differ.
**Chrome UX Report (CrUX)** - public dataset with real user data. Visible via PageSpeed Insights. This is the data Google uses for rankings.
**WebPageTest** - advanced testing tool. Waterfall charts, filmstrip views, detailed metrics. Perfect for deep debugging.
Don't optimize blindly. Measure, optimize, measure again. Data driven approach works. Guessing what the problem is doesn't work.
## PHP and server configuration: foundation optimization
PHP version and server settings make a significant difference. Old PHP version? You're missing 20-30% performance gains. Wrong memory limits? Your site crashes during traffic spikes.
**PHP 8.2 and 8.3 advantages** - why upgrading is essential:
PHP 8.0 was already 2x faster than PHP 7.4. PHP 8.2 is another 15-20% faster than 8.0. PHP 8.3 (since late 2023) is another 10% faster.
Check your current version via WordPress admin (Tools > Site Health > Info > Server). Running PHP 7.4? You're missing 50-60% performance compared to 8.3. That's huge.
Upgrade via your hosting control panel. cPanel and DirectAdmin have PHP version selector. Choose PHP 8.2 or 8.3, test your site thoroughly.
**Compatibility check first** - old plugins and themes can break on PHP 8:
Install PHP Compatibility Checker plugin. Scan your site. It detects code that breaks on new PHP versions. Fix issues before you upgrade.
Often it's old non-updated plugins. Find alternatives or update to newer versions. Well-maintained plugins have supported PHP 8 for years.
Test on staging environment before production upgrade. Create staging site (many hosts offer this), upgrade PHP there, test everything. Does it work? Then upgrade production too.
**PHP memory limit** - default is often too low:
WordPress default is 64MB. With modern themes and plugins you need 256MB. With WooCommerce or page builders: 512MB.
Check current limit in Site Health. Is it under 256MB? Increase it.
Via wp-config.php:
```php
define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '512M');
```
Or via .htaccess:
```
php_value memory_limit 256M
```
Or ask your host - often they can increase it server-wide. Shared hosting sometimes limits, VPS gives full control.
Too little memory → white screen of death on admin pages, import/export failures, plugin crashes. Too much memory → no problem, unused memory costs nothing.
**Max execution time** - scripts may run 30 seconds by default:
Import large XML? Plugin installation? Database optimization? Those can take longer than 30s. Then you get timeout errors.
Increase to 300s (5 minutes) for admin area:
```php
define('WP_MAX_EXECUTION_TIME', 300);
```
Regular page loads stay 30s (safe). Admin tasks get 300s. Best of both worlds.
**OPcache** - cache compiled PHP code in memory:
PHP compiles scripts on every request. OPcache stores compiled code in memory. Scripts run directly without compilation step.
Performance boost: 30-50% for PHP execution. This is significant. And it costs nothing - OPcache is built-in since PHP 5.5.
Check if it's enabled via phpinfo (Site Health > Info > Server > OPcache). Not enabled? Ask your host to turn it on.
Optimal OPcache settings for WordPress:
```ini
opcache.enable=1
opcache.memory_consumption=128
opcache.max_accelerated_files=10000
opcache.revalidate_freq=2
```
Shared hosting often enables this server-wide. VPS → you configure it yourself in php.ini.
**Upload limits** increase for large media:
Default max upload size is 2MB. Want to upload HD video or large PDFs? Too small.
Increase in .htaccess:
```
php_value upload_max_filesize 64M
php_value post_max_size 64M
```
Or via wp-config (doesn't always work):
```php
@ini_set('upload_max_filesize', '64M');
@ini_set('post_max_size', '64M');
```
Check Site Health after adjustment. Does it say 64MB? Success. Still 2MB? Contact host - they need to increase it server-side.
**Gzip/Brotli compression** - compress HTML/CSS/JS during transfer:
Gzip compresses text-based files 70-80%. Your 100KB HTML becomes 20KB sent over network. Browser decompresses instantly.
Brotli is newer and 15-20% better than Gzip. Modern servers support both - Brotli for modern browsers, Gzip fallback for old.
Enable via .htaccess (Apache):
```
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
```
Or ask host to enable it server-wide. Often it's already on at good hosting. Check via GTmetrix - does "Enable compression" show green? Then it works.
**HTTP/2 or HTTP/3** - modern protocol for parallel requests:
HTTP/1.1 does 6-8 parallel requests per domain. HTTP/2 does 100+. Everything loads faster.
HTTP/3 (newest) uses QUIC instead of TCP. Even faster with packet loss and high latency.
Check via tools.keycdn.com/http2-test. Does your site support HTTP/2? No → ask host for upgrade. Modern servers (LiteSpeed, Nginx) support it by default.
**Database server optimization** - MySQL/MariaDB tuning:
This is advanced. For 95% of sites default settings are fine. But high-traffic sites benefit from tuning.
InnoDB buffer pool size should be 70% of available RAM. Query cache (deprecated in MySQL 8) should be disabled. Max connections should be high enough.
Hire a sysadmin or use managed WordPress hosting - they optimize this. Self-managed VPS → this is your responsibility.
**Redis/Memcached** for object caching - discussed earlier but worth repeating:
Server-level object caching is 10x faster than database queries. On sites with 1000+ daily visitors this is massive improvement.
Hosting with managed Redis → enable via plugin. Self-managed VPS → install Redis, configure, install plugin. Work is worth it.
Server configuration is foundation layer. Good settings + modern PHP + object caching = site that keeps performing under load. Ignore this and you quickly reach your optimization plateau.
## Monitoring and maintenance: keeping speed up
Your site is fast. Great! But in 6 months? New plugins, more content, outdated cache - speed degrades over time. Monitoring prevents that.
**Google Search Console** is your primary monitoring tool:
Enable Search Console for your site. Verify ownership via HTML tag or DNS. Go to "Core Web Vitals" report.
You see real user data - not lab tests, but actual visitors. Mobile vs desktop scores. Which pages score poorly. Trends over time.
Check weekly. See red status while it was green last week? Investigate what changed. New plugin? Update that caused issues?
"Page Experience" report also shows HTTPS, mobile-friendly, and intrusive interstitial issues. Everything affecting your ranking, visible in one dashboard.
**Chrome UX Report (CrUX) data** is what Google uses for rankings. PageSpeed Insights shows this as "Field data". That's leading indicator for your SEO performance.
Lab data (Lighthouse) is for troubleshooting. Field data (CrUX) is for monitoring. Focus on field data - that's what counts.
**Uptime monitoring** prevents downtime:
UptimeRobot.com - free plan checks every 5 minutes if your site is reachable. Email/SMS alert on downtime. Setup in 2 minutes.
Checks from 5 locations worldwide. Site down in Europe but up in US? You see it. Often DNS issues or regional outages.
Use Cloudflare? Their analytics also show uptime, traffic patterns, and security threats. Built-in, no extra tool needed.
**Performance monitoring** - track load time over time:
Setup Google Analytics 4 → you can create custom events for page load time. Or use Real User Monitoring (RUM) tools.
SpeedCurve, Calibre, DebugBear - paid tools that continuously monitor your site and send alerts on performance degradation.
Free alternative: weekly manual check with PageSpeed Insights. Note scores in spreadsheet. See downward trend? Time to investigate.
**Monthly checklist** - maintenance tasks for speed:
**Week 1:**
- Run WP-Optimize database cleanup
- Check for plugin updates - update and test
- Review PageSpeed scores - compare with last month
**Week 2:**
- Check Search Console Core Web Vitals report
- Review top 10 slowest pages - optimize outliers
- Test mobile performance (often worse than desktop)
**Week 3:**
- Audit new plugins - are they performant?
- Check image sizes of recently uploaded media
- Clear all caches (page cache, object cache, CDN cache)
**Week 4:**
- Backup site before doing major updates
- PHP version check - is there newer stable version?
- Review hosting specs - traffic growing? Upgrade needed?
Consistency beats intensity. Better 30 minutes per week than 10 hours once a year. Small issues solved before they become big.
**Alerting setup** - know when things break:
Uptime monitoring sends alerts on downtime. But what about performance degradation?
Google Search Console sends email when Core Web Vitals worsen. Enable notifications in settings.
Hosting monitoring - many hosts have built-in monitoring. Server load, disk space, memory usage. Setup alerts for unusually high resource usage.
PageSpeed Insights API - advanced users can run weekly automated tests and trigger alerts on score drops. Requires coding knowledge.
**Quarterly review** - bigger optimization checks:
Every 3 months do deeper audit:
- Full plugin audit - which are redundant?
- Theme performance review - is there faster alternative?
- Database size check - growing out of control?
- CDN performance - are there better/cheaper alternatives?
- Hosting review - do specs still match your traffic?
Quarterly review is moment for bigger changes. Daily/weekly checks are maintenance. Quarterly is strategic.
**Team training** - everyone needs to know best practices:
Colleague uploading content? Train them to resize images before upload. Use WebP. Check filesize before upload.
Developer installing plugins? Teach them to check performance impact before and after. Use Query Monitor plugin for debugging.
Document your optimization stack - which plugins, why chosen, which settings enabled. If you're gone, someone else can maintain.
Monitoring is insurance. You invest time now to prevent issues later. Sites without monitoring degrade unnoticed until problem is urgent. Sites with monitoring stay fast because you act proactively.
## Frequently asked questions about WordPress speed
**How fast should my WordPress site be?**
Target under 3 seconds total load time and Core Web Vitals in green (LCP < 2.5s, INP < 200ms, CLS < 0.1). This places you in top 25% of all websites. For e-commerce aim under 2 seconds - every second delay costs 7% conversion.
**Which hosting is fastest for WordPress?**
Managed WordPress hosting like WP Engine or Kinsta is fastest due to server-level optimizations specific to WordPress. For budget-conscious users, VPS hosting with LiteSpeed web server is excellent. Compare different hosting providers on speed and specs.
**Does WordPress optimization cost a lot of money?**
Basic optimizations are free - caching plugin, image compression, database cleanup cost nothing. You only pay for premium plugins (WP Rocket €59/yr, Imagify €10/month) and better hosting if you upgrade. Total budget €150-300 per year for good setup.
**Can I make WordPress fast without technical knowledge?**
Absolutely. Install WP Rocket for caching, Imagify for images, enable basic optimizations - you're 80% there. You don't need to write code or know server commands. Advanced optimizations (Redis, server tuning) do require technical skills or help.
**How many plugins can I use without getting slow?**
Number doesn't matter, quality does. 10 well-coded plugins are faster than 3 bloated plugins. Check plugin performance with Query Monitor - it shows exactly which plugin uses how much resources. Remove bloated plugins, keep lightweight alternatives.
**What's the difference between caching and CDN?**
Caching stores generated pages on your server for fast serving. CDN (Content Delivery Network) distributes your static files (images, CSS, JS) to servers worldwide, so visitors load files from nearest server. You need both for optimal speed.
**Why is my site faster after cache clear?**
Often worse, not better. If it's faster after cache clear, your cache is misconfigured. Possibly serving cached version with old bloated code, or cache becomes corrupt. Check cache plugin settings and regenerate cache properly.
**Must I also optimize mobile speed?**
Yes, critically. Google uses mobile-first indexing - your mobile speed determines rankings for desktop too. Mobile sites are often slower due to weak CPUs and poor network. Always test mobile performance separately and optimize specifically for it.
## Top 20 practical tips for WordPress speed
These quick wins you can implement today. Start with first 5 for massive impact, work your way down for refinement.
**Quick wins - do this now:**
1. **Install WP Rocket or LiteSpeed Cache** - 5x faster within 15 minutes with one plugin installation
2. **Bulk optimize all images** with Imagify or ShortPixel - often 50-70% smaller files without visible quality loss
3. **Enable lazy loading** for images - above-the-fold loads instantly, rest just-in-time during scrolling
4. **Upgrade to PHP 8.2 minimum** - test compatibility first, then upgrade for 30-50% faster PHP execution
5. **Database cleanup** with WP-Optimize - remove revisions, transients, spam for 2-3x faster queries
**Intermediate optimizations:**
6. **Setup Cloudflare free CDN** - serving static files from worldwide network saves 200-500ms for international visitors
7. **Defer JavaScript loading** - scripts load parallel with content instead of blocking during HTML parse
8. **Preload LCP element** - priority loading for hero image or main above-fold content
9. **Limit post revisions to 5** via wp-config.php - prevents database bloat with many content edits
10. **Delete unused plugins and themes** - less code = faster, even deactivated plugins can have autoloaded data
11. **Use system fonts** instead of web fonts - instant rendering, 200-400KB less page weight
12. **Disable embeds and emoji scripts** - WordPress loads unnecessary scripts by default that 95% of sites don't use
13. **Optimize CSS delivery** with critical CSS inline - above-fold content styled instantly
14. **Reduce external HTTP requests** - every third-party script (analytics, ads) adds latency
15. **Setup object caching with Redis** - database queries 10x faster by caching results in memory
**Advanced optimizations:**
16. **Implement DNS prefetch** for external domains - browser resolves DNS before resource is needed
17. **Use WebP images with AVIF fallback** - next-gen formats are 30-50% smaller than JPEG at equal quality
18. **Optimize database with indexes** - custom queries faster through right indexes on frequently-queried columns
19. **Enable Brotli compression** - 15-20% better compression than Gzip for text-based files
20. **Setup Real User Monitoring** - track actual user experience instead of lab tests for accurate performance data
Start top-down. First 5 tips give 80% of potential improvement. Tips 6-15 fine-tune to excellent. Tips 16-20 are polishing for perfectionists.
Test after each change. Not all tips work equally well on all sites. Data-driven approach - measure, optimize, measure again. Keep what works, revert what breaks or doesn't help.
WordPress speed is a journey, not a destination. You're never 100% done - new content, plugins, and WordPress updates require continuous monitoring. But with this guide you have everything needed to start and achieve excellent results.
Start today. Install WP Rocket, optimize your images, upgrade hosting if needed. Within a week you'll see dramatic improvement. Within a month your site ranks higher and converts better. Speed is an investment that pays itself back.
```
Browser automatically chooses the right size. Mobile users download 100KB instead of 500KB. Saves 75% bandwidth.
**Compression quality** - set JPEG/WebP quality:
Default quality is often 90-95%. Visually identical to 100%, but 50% smaller. Quality 85% is often invisibly different from 90%, but another 30% smaller.
Test different quality settings. 85% is the sweet spot for most images. Product photos where detail is important: 90%. Hero images and backgrounds: 80% is fine.
**Plugin recommendations** for image optimization:
**Imagify** by WP Media (makers of WP Rocket) is excellent. €9.99/month for unlimited images. Automatic WebP conversion, resize, lazy loading. Bulk optimize existing images with one click.
The plugin optimizes on upload automatically. You upload 3MB photo, Imagify compresses to 400KB WebP. No extra steps, it just happens.
Backup of originals is kept. Not happy with compression? Restore originals and try different settings. You never lose original quality.
**ShortPixel** is similar to Imagify. €10/month for 10,000 images. Slightly more aggressive compression than Imagify - sometimes better results, sometimes a bit more quality loss.
Choose between Lossy (max compression, small quality loss), Glossy (balanced), and Lossless (no quality loss, less compression). Glossy is recommended for 90% of use cases.
ShortPixel also has CDN integration. Your images are served from their CDN with automatic device detection. Mobile users get smaller versions without srcset complexity.
**EWWW Image Optimizer** is free but slower. It uses your own server resources for compression. On shared hosting this can cause timeouts. On VPS it's fine.
EWWW converts to WebP, does lazy loading, and bulk optimization. The compression is slightly less effective than Imagify/ShortPixel. But it's free, so good enough for small sites.
**Smush** by WPMU DEV is popular but has limitations. Free version does max 5MB images and 50 per batch. Pro version is €10/month and removes limits.
Compression quality is good. Interface is simple. But Imagify and ShortPixel are more powerful and better priced if you're paying anyway.
**Manual image optimization** for those who don't want a plugin:
1. Resize images before upload - use Photoshop/GIMP/online tools
2. Export as WebP instead of JPEG (save as > WebP in GIMP)
3. Max 1920px wide for hero images, 1200px for content images
4. Target max 150KB per image for content, 300KB for hero images
Manual works fine for small sites with few images. But once you publish a lot of content, a plugin is essential - it automates everything.
**SVG for icons and logos** - vector graphics scale perfectly and are often 5-10x smaller than PNG:
Logo as PNG: 50KB. Same logo as SVG: 5KB. And SVG scales infinitely without quality loss. Perfect for retina displays.
Use SVG for: logos, icons, simple illustrations, shapes. Not for photos - keep using WebP/JPEG for those.
WordPress blocks SVG uploads by default (security). Install "Safe SVG" plugin to allow uploads with sanitization.
**Before/after check** - test image optimization impact:
Run PageSpeed test before optimization. Check "Total Blocking Time" and "Largest Contentful Paint". Note scores.
Optimize your images with plugin. Regenerate thumbnails via plugin. Clear cache.
Run PageSpeed again. You should see 20-30 points improvement. LCP often 1-2 seconds faster. Page size 50-70% smaller.
Image optimization has massive impact. It's top 3 most effective optimizations after hosting and caching. Do this first before starting code optimization.
## Code optimization: keeping JavaScript and CSS lean
Code bloat is a silent killer. Every plugin adds JavaScript and CSS. After 20 plugins you have 2MB of scripts and stylesheets. Your page becomes a tanker.
**The problem with render-blocking resources:**
Browser downloads HTML, starts rendering, encounters JS/CSS in the ``, stops rendering, downloads scripts, executes scripts, continues rendering. Visitor sees white screen during download and execution.
This is called render-blocking. Your HTML is 50KB and loads in 100ms. But your 500KB of JS/CSS in the head blocks rendering for 2 seconds. Terrible experience.
**JavaScript defer and async** - load scripts without blocking:
`defer` downloads script parallel with HTML parsing, executes after HTML parse complete. Perfect for scripts not immediately needed.
`async` downloads parallel, executes as soon as download is ready (interrupts HTML parsing). Use for independent scripts like analytics.
```html
```
WP Rocket and other optimization plugins can automatically add defer. Enable "Load JavaScript deferred" and test thoroughly - some scripts break with defer.
**CSS Critical Path** - inline critical CSS, defer rest:
Critical CSS is the CSS needed to render above-the-fold content. Often 10-20KB of your total 200KB stylesheet.
Inline that 20KB in ``. Defer the remaining 180KB. Above-the-fold content renders instantly. Below-the-fold loads later.
WP Rocket generates critical CSS automatically. It visits your pages, determines above-the-fold CSS, extracts it, inlines it. Works surprisingly well for 80% of sites.
Other plugins that do this: FlyingPress, WP Fastest Cache Premium. Or manual with tools like criticalcss.com - you get critical CSS to manually inline.
Test thoroughly after critical CSS implementation. Sometimes you see flash of unstyled content (FOUC) during loading. This means not all critical CSS was correctly detected. Tweak settings or add manual CSS.
**Minification** - remove whitespace and comments from code:
Unminified CSS/JS has indenting, comments, long variable names. Minification removes everything superfluous. Your 100KB file becomes 70KB without losing functionality.
```css
/* Before minification */
.header {
background-color: #ffffff;
padding: 20px;
margin: 0 auto;
}
/* After minification */
.header{background-color:#fff;padding:20px;margin:0 auto}
```
All good caching plugins do minification. Enable in WP Rocket or LiteSpeed Cache. It often combines multiple files too - 10 small CSS files become 1 minified file.
**Concatenation** - combine multiple files into one:
You have 15 CSS files from different plugins. Browser makes 15 separate requests. With HTTP/1.1 this is slow - requests happen sequentially.
Concatenation combines those 15 files into 1 file. Browser makes 1 request instead of 15. With HTTP/1.1 this saves seconds.
But HTTP/2 multiplexes requests - multiple files parallel over 1 connection. Concatenation helps less with HTTP/2. Some servers run HTTP/2, some don't. Check your hosting.
Modern best practice: light concatenation (combine tiny files), but not everything in 1 monster file. Sweet spot is 3-5 CSS files and 3-5 JS files.
**Plugin audit** - which plugins can you remove:
Go to Plugins overview. Deactivate 1 plugin, test speed. Dramatic difference? That plugin is bloated. No difference? Activate again.
Note which plugins load many scripts. Install Query Monitor plugin. Go to page, check "Scripts & Styles" tab. You see exactly which plugin loads how much KB.
Plugins that often have lots of bloat:
- Page builders (Elementor, Divi load 500KB+ per page)
- Social sharing buttons (load scripts from 5+ social networks)
- Sliders and carousels (often 200KB for fancy animations)
- Contact forms with visual builders (often overkill)
Find alternatives for bloated plugins. Heavy social sharing plugin? Replace with lightweight HTML sharing links. Slider with 200KB scripts? Native CSS scroll snap does the same in 2KB.
**Unused CSS removal** - advanced but impactful:
Your theme loads complete stylesheet of 300KB. You use 40% of that CSS. 180KB is never used but still downloaded.
Tools like PurifyCSS and UnCSS scan your HTML and remove unused CSS. Tricky because dynamic content (popup modals, hidden menus) uses CSS not initially visible.
WP Rocket Pro (from €249/year) does automatic unused CSS removal. It's conservative - better to keep too much than remove too little. Result is 30-50% smaller stylesheets.
Manual method: use Chrome DevTools Coverage tab. Navigate your site, see which CSS is used/unused. Manual removal is tedious but possible.
Only do if you're comfortable with CSS debugging. Done wrong it breaks your layout. Start with low-risk pages (simple blog posts) before tackling homepage.
**Font optimization** - web fonts are often 200-400KB:
Google Fonts often loads 3-4 weights (regular, bold, italic) of 2 font families. That's 8 font files of 50KB each. 400KB total for text rendering.
Limit to 2 weights maximum. Regular and bold is sufficient for 90% of sites. Italic? Use faux italic via `font-style: italic` - browsers fake it.
Self-host fonts instead of Google Fonts. Loading from external domain costs extra DNS lookup and connection. Self-hosted fonts load faster.
Use `font-display: swap` - text renders in system font during font download, then swaps to web font. Prevents invisible text during font load.
```css
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
font-display: swap;
}
```
WOFF2 format is 30% smaller than WOFF. All modern browsers support it. No reason to include older formats.
**Third-party scripts** are often the biggest bottleneck:
Google Analytics, Facebook Pixel, Google Ads, chat widgets, heatmap tools - they all load external scripts. Often bloated and render-blocking.
Load third-party scripts async. Or better: delay loading until user interaction. WP Rocket has "Delay JavaScript execution" feature - scripts load only on first scroll/click.
Does your site contain 10+ third-party scripts? Consider a Tag Manager (Google Tag Manager). Load 1 script (GTM), which loads the rest async and centrally managed.
Or ask yourself: do I really need this? That fancy live chat? You have 2 chats per week, costs 500KB page load. Possibly not worth it.
Code optimization is trial-and-error. Test after each change. Break things? Revert. Works well? Keep it. Build knowledge of which optimizations work for your site.
## Core Web Vitals optimization: Google's ranking factors
Google has been ranking partly on Core Web Vitals since 2021. Good scores = ranking boost. Poor scores = your competitor ranks above you. This is no longer optional.
**INP (Interaction to Next Paint)** - new since March 2024:
INP replaces FID (First Input Delay). It measures how quickly your site responds to all interactions, not just first click. A more complete picture of interactivity.
**Good:** under 200ms. **Moderate:** 200-500ms. **Poor:** above 500ms.
**What causes poor INP:**
- Too much JavaScript execution during interactions
- Long tasks blocking main thread (tasks above 50ms)
- Event handlers doing heavy computation
- Unoptimized third-party scripts
**How to fix INP:**
Reduce JavaScript execution time. Check PageSpeed "Reduce JavaScript execution time" warning. It shows which scripts run long.
Break up long tasks into smaller chunks. JavaScript task of 300ms? Split into 6 chunks of 50ms with `setTimeout()` between. Main thread stays responsive.
Debounce event handlers. Scroll events firing 100x per second? Debounce to max 10x per second. Window resize events? Debounce to 1x per 100ms.
```javascript
// Before: fires 100x during scroll
window.addEventListener('scroll', function() {
// heavy computation
});
// After: fires max 1x per 100ms
let timeout;
window.addEventListener('scroll', function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
// heavy computation
}, 100);
});
```
Defer non-essential scripts. Analytics, ads, social media - they don't need to be during initial load. Defer until after page load or till user interaction.
Use web workers for heavy computation. Offload processing to background thread. Main thread stays responsive for user interactions.
**LCP (Largest Contentful Paint)** - how fast does your main content load:
**Good:** under 2.5s. **Moderate:** 2.5-4s. **Poor:** above 4s.
LCP element is often your hero image, first heading, or featured image. Google automatically measures which element is largest above-the-fold.
**What causes poor LCP:**
- Slow server response time (TTFB above 600ms)
- Render-blocking JS/CSS in ``
- Large unoptimized images
- Client-side rendering (JS generating HTML)
**How to fix LCP:**
**Faster hosting** - upgrade to VPS or managed WordPress. TTFB under 200ms is ideal. Check with WebPageTest or GTmetrix.
**Preload LCP element** - tell browser to prioritize your hero image:
```html
```
WP Rocket and LiteSpeed Cache can do this automatically. They detect LCP element and add preload.
**Optimize LCP image** - make sure your hero image is max 200KB. Use WebP, aggressive compression, correct dimensions. Hero image at 4000px while screen is 1920px? Waste.
**Remove render-blocking resources** - defer/async JS, critical CSS inline. Scripts in head blocking for 2 seconds? LCP can never be under 2 seconds.
**Use CDN** for static assets. Hero image loading from your server in Netherlands costs 400ms for US visitor. Loading from Cloudflare CDN costs 100ms.
**CLS (Cumulative Layout Shift)** - how stable is your layout during loading:
**Good:** under 0.1. **Moderate:** 0.1-0.25. **Poor:** above 0.25.
CLS measures how much content shifts during page load. Image without height/width? Everything below shifts down when image loads. Bad experience and poor CLS.
**What causes CLS:**
- Images without width/height attributes
- Ads, embeds, iframes without reserved space
- Fonts loading and switching typeface (FOIT/FOUT)
- Dynamically injected content (JS manipulating DOM)
**How to fix CLS:**
**Specify dimensions** on all images:
```html
```
Browser reserves space for image before it loads. No shift when image enters DOM. WordPress does this automatically if your theme is good.
**Reserve space** for ads and embeds. Wrapper div with fixed height:
```html
Related articles
What is Plesk? Powerful Hosting Control Panel
Learn what Plesk is, how it differs from cPanel and why many hosters use it for server management.
What is DirectAdmin? Lightweight Control Panel
Discover what DirectAdmin is, its benefits and why it is a cheaper alternative to cPanel.
What is TTFB? Time To First Byte Explained
Learn what TTFB is, why it is important for SEO and how to improve Time To First Byte.