Performance: Caching & Images

By the end of this lesson you will measure your site's speed, add caching, fix heavy images and remove waste that slows pages down. Most small WordPress sites can become noticeably faster in an afternoon with these steps.

Speed matters because many visitors in India browse on phones and mobile data. If a page takes too long, they press Back and open a competitor. Search engines also use page experience signals, explained in Core Web Vitals.

Step 1: Measure before you change

Never guess. Test first, change one thing, and test again.

• PageSpeed Insights (from Google) tests a public URL on mobile and desktop and shows Core Web Vitals.
• Tools > Site Health inside WordPress flags things like a missing page cache or an old PHP version.
• Your browser's DevTools (press F12, then the Network tab) shows each file the page loads and its size.

Write down your starting numbers, such as "mobile LCP 4.8 s, page weight 5.2 MB, 96 requests". LCP (Largest Contentful Paint) is the time until the biggest thing on screen, often the banner image, has loaded.

How a WordPress page is built, and why caching helps

Without caching, every visit makes WordPress run PHP, ask the database dozens of questions and build the HTML from scratch. That is like a halwai making a fresh batch of jalebis for every single customer, even when the last batch is still warm.

Caching means keeping a ready copy and serving it again. There are several layers:

Step 2: Add a page cache

The page cache gives the biggest win for most sites.

Step 1: Check whether your host already caches pages. Many managed WordPress and LiteSpeed-based hosts do. Their dashboard or docs will say so. If they do, use their tool or plugin.

Step 2: If not, install one caching plugin, such as WP Super Cache, W3 Total Cache or the cache plugin your host recommends. Never run two.

Step 3: Turn on page caching with the default settings.

Step 4: Open the site in a private window (logged-out visitors get cached pages; logged-in admins usually do not).

Step 5: Re-test with PageSpeed Insights. The server response time should drop.

You can see whether a page came from cache by checking its response headers:

curl -sI https://brightfuture.in/fees/

HTTP/2 200
content-type: text/html; charset=UTF-8
cache-control: max-age=0
x-cache-status: HIT

Header names differ by host and plugin (x-cache, x-litespeed-cache, cf-cache-status and others). The word HIT usually means "served from cache"; MISS means the page was built fresh.

Step 3: Fix your images

Images are usually the heaviest part of a page. WordPress already helps:

• it creates smaller image sizes and offers them with srcset
• it adds loading="lazy" to images further down the page, so they load only when the visitor scrolls near them
• it supports WebP and AVIF if your server's image library does

You still need to:

1. Resize before upload: a hero banner rarely needs more than about 2000 pixels wide.
2. Compress: use an image optimisation plugin or an app before upload. Aim for well under 200 KB for most photos.
3. Choose formats: WebP for photos, SVG for simple logos and icons, PNG only when you need sharp transparency.
4. Never lazy-load the main banner: it is usually the LCP element and should load first. WordPress tries to skip lazy loading for the first large image, but page builders and sliders can undo this.

Step 4: Trim plugins, scripts and fonts

Every active plugin may add CSS and JavaScript to every page. Open DevTools > Network and sort by size. Look for files from plugins you hardly use.

• Remove plugins you do not need.
• Avoid heavy sliders and animation libraries on the homepage.
• Use system fonts or one or two font families, and load only the weights you use.

Developers can stop a plugin's stylesheet from loading where it is not needed. This keeps a form plugin's CSS only on the Contact page (the handle contact-form-7 is that plugin's registered style name; check the real handle in the page source):

<?php
add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_page( 'contact' ) ) {
        wp_dequeue_style( 'contact-form-7' );
        wp_dequeue_script( 'contact-form-7' );
    }
}, 100 ); // priority 100 runs after the plugin has added its files

Test the contact form afterwards. Removing files a page really needs will break it.

Step 5: Keep the engine healthy

• PHP version: newer PHP is faster. Use the version WordPress recommends (8.3 or newer) if your plugins support it.
• Database tidiness: WordPress keeps every saved revision of a post. Limit them in wp-config.php:

<?php
define( 'WP_POST_REVISIONS', 10 ); // keep the latest 10 revisions per post

• Expired transients: plugins store temporary data called transients. Clean the expired ones with WP-CLI:

wp transient delete --expired

Success: 12 expired transients deleted from the database.

The number depends on your site.

Built-in speed features you get free

Recent versions of WordPress do several things automatically: lazy loading for images and iframes, fetchpriority="high" on the likely main image, sizes="auto" for lazy images, and speculative loading (since WordPress 6.8), which lets the browser prepare the next page when a visitor is likely to click a link. Keep WordPress updated to get these improvements.

Common mistakes

• Running two caching plugins, or a caching plugin on a host that already caches. Pages break or show old content.
• Testing while logged in. Admins usually bypass the page cache, so results look slow.
• Forgetting to clear the cache after a design change, then wondering why nothing changed.
• Caching cart, checkout and account pages on a WooCommerce store. Good caching plugins exclude them; check.
• Chasing a perfect 100 score instead of real improvements visitors feel.

Key points

• Measure with PageSpeed Insights and DevTools before and after each change.
• A page cache gives the biggest speed win; use one caching tool only.
• Resize and compress images, use WebP, and do not lazy-load the main banner.
• Remove unused plugins and stop plugin files loading where they are not needed.
• Keep PHP up to date, limit revisions and clean expired transients.
• Never cache cart, checkout or account pages.

<?php
// wp-config.php
define( 'WP_POST_REVISIONS', 5 );

// in a small plugin
add_action( 'wp_enqueue_scripts', function () {
    if ( ! is_front_page() ) {
        wp_dequeue_style( 'fancy-slider' );
    }
}, 100 );