• Posted on May 3, 2026
• 6 min read

🤖 AI summary: This practical guide walks WordPress and WooCommerce site owners through a series of hands-on performance optimizations that can be completed in 30 minutes, without installing a single caching or optimization plugin. It covers converting images to modern formats like WebP and AVIF, implementing native lazy loading, optimizing web font delivery, inlining critical CSS, cleaning up the database, and removing render-blocking resources. Each step includes real code snippets that can be dropped into a child theme's functions.php file, making this a copy-paste-and-go resource for store owners who want faster load times today.

I am going to say something that might upset a few people: your WordPress site does not need fifteen plugins to be fast.

I have lost count of the number of WooCommerce stores I have audited where the client installed a caching plugin, an image optimization plugin, a lazy loading plugin, a minification plugin, a database optimization plugin, and a CDN plugin, and the site was still slow. In some cases, the plugins were actually fighting each other and making things worse.

The truth is that WordPress, out of the box, is not as slow as people think. What makes it slow is what we pile on top of it. And the irony of installing more plugins to fix a problem caused by too many plugins is something that should keep us all up at night.

So here is my challenge: set a 30-minute timer and follow this guide. No plugins. Just code, configuration, and common sense. By the time you are done, your site will be measurably faster.

Let's go.

Minute 0-5: Convert Your Images to WebP or AVIF

This is the single biggest performance win for most WordPress sites, and it is not even close.

If your product images and blog thumbnails are still in JPEG or PNG format, you are serving files that are two to five times larger than they need to be. WebP delivers the same visual quality at roughly 30% smaller file sizes than JPEG. AVIF goes even further, often 50% smaller.

Here is the thing: WordPress has supported WebP uploads natively since version 5.8 (2021). And as of WordPress 6.5, AVIF is also supported out of the box. You do not need a plugin for this.

What to do:

1. Use a free tool like Squoosh (by Google) to batch convert your existing images to WebP.
2. For new uploads, simply save your images as .webp before uploading them to the Media Library.
3. If you want WordPress to serve AVIF to browsers that support it and WebP as a fallback, you can add this to your .htaccess file:

# Serve AVIF/WebP images if browser supports them
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/avif
  RewriteCond %{REQUEST_FILENAME}.avif -f
  RewriteRule ^(.+)\.(jpe?g|png|gif)$ $1.$2.avif [T=image/avif,L]

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png|gif)$ $1.$2.webp [T=image/webp,L]
</IfModule>

On a WooCommerce store with 500 products, I have seen this single change cut total page weight by 60%. That translates directly into faster load times, especially for customers on mobile networks.

Minute 5-10: Enable Native Lazy Loading

Lazy loading means images below the fold (the ones you cannot see without scrolling) are not loaded until the user scrolls down to them. This dramatically reduces initial page load time.

The good news: WordPress has included native lazy loading since version 5.5. It automatically adds loading="lazy" to images. But there are two problems with the default behavior.

First, WordPress also lazy-loads images above the fold, including your hero banner and first visible product images. This actually hurts your Largest Contentful Paint (LCP) score because the browser waits to load the most important image on the page.

Second, iframes (like embedded YouTube videos) are not lazy-loaded by default.

Add this to your child theme's functions.php to fix both issues:

/**
 * Skip lazy loading for the first image (above the fold)
 * and add lazy loading to iframes
 */
// Skip lazy loading on hero/banner images
add_filter('wp_img_tag_add_loading_attr', function($value, $image, $context) {
    static $count = 0;
    $count++;
    // Don't lazy load the first 2 images (likely above the fold)
    if ($count <= 2) {
        return false;
    }
    return 'lazy';
}, 10, 3);

// Add lazy loading to iframes (YouTube embeds, maps, etc.)
add_filter('the_content', function($content) {
    $content = str_replace('<iframe ', '<iframe loading="lazy" ', $content);
    return $content;
});

This is one of those changes that costs you nothing but gives you an immediate improvement in Core Web Vitals, specifically LCP and the overall page load waterfall.

Minute 10-15: Optimize Your Web Fonts

Fonts are a silent performance killer. Most WordPress themes load Google Fonts by making a round-trip request to fonts.googleapis.com, then another to fonts.gstatic.com, then downloading the actual font files. That is three network hops before your text even renders.

Here is how to fix it in three steps:

Step 1: Add preconnect hints. This tells the browser to start the connection to the font server early. Add this to your theme's <head>:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

Step 2: Use font-display: swap. This tells the browser to show the text immediately using a system font, then swap in the custom font once it has loaded. No more invisible text while fonts download. When loading Google Fonts, append &display=swap to the URL:

https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap

Step 3: Self-host your fonts. This is the biggest win. Instead of loading fonts from Google's servers, download them and serve them from your own domain. This eliminates the DNS lookup and connection overhead entirely.

Download your fonts from Google Webfonts Helper, place them in your theme's /fonts/ directory, and add a @font-face declaration to your CSS:

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/wp-content/themes/your-child-theme/fonts/inter-v18-latin-regular.woff2')
         format('woff2');
}

Then remove the Google Fonts stylesheet from your theme. If your parent theme enqueues it, dequeue it in your child theme:

add_action('wp_enqueue_scripts', function() {
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');
}, 20);

On one WooCommerce store I optimized, self-hosting fonts alone shaved 400ms off the initial render time. That is almost half a second just from eliminating external font requests.

Minute 15-20: Inline Critical CSS and Defer the Rest

By default, WordPress loads your entire stylesheet as a render-blocking resource. This means the browser has to download and parse your complete CSS file before it can paint anything on screen, even if 90% of that CSS is for pages the user has not visited yet.

The fix is to inline the critical CSS (the styles needed for the above-the-fold content) directly in the <head>, and load the rest asynchronously.

Here is a practical approach without a plugin:

Step 1: Use a tool like CSS Minifier to minify your stylesheet.

Step 2: Extract your critical CSS. You can use the free Critical CSS Generator to identify which styles are needed for the initial viewport. This typically includes your header, navigation, hero section, and first row of products.

Step 3: Inline that critical CSS and defer the full stylesheet. Add this to your functions.php:

add_action('wp_head', function() {
    // Inline critical CSS
    echo '<style id="critical-css">';
    // Paste your minified critical CSS here
    include get_stylesheet_directory() . '/critical.css';
    echo '</style>';
}, 1);

add_action('wp_enqueue_scripts', function() {
    // Change main stylesheet to load asynchronously
    wp_dequeue_style('theme-style');
    wp_enqueue_style('theme-style',
        get_stylesheet_uri(),
        array(),
        null,
        'print' // Load as print, then swap to all
    );
    // Add onload handler to swap media to "all"
    add_filter('style_loader_tag', function($html, $handle) {
        if ($handle === 'theme-style') {
            $html = str_replace(
                "media='print'",
                "media='print' onload=\"this.media='all'\"",
                $html
            );
        }
        return $html;
    }, 10, 2);
}, 20);

This technique makes your page visually complete in a fraction of the time because the browser does not have to wait for the full stylesheet. Users see content immediately, and the rest of the styles load quietly in the background.

Minute 20-25: Clean Up Your Database

This one is especially important for WooCommerce stores. Over time, your WordPress database accumulates a shocking amount of junk:

• Post revisions: WordPress saves every single draft of every post and page. A store with 500 products might have 5,000+ revision entries doing absolutely nothing.
• Transients: Temporary cached data that often outlives its usefulness. Expired transients just sit in the database taking up space.
• Spam and trashed comments: Self-explanatory.
• Orphaned post meta: Metadata left behind by plugins you uninstalled months ago.
• WooCommerce sessions: Expired customer session data that can grow to thousands of rows.

You can clean all of this up with a few SQL queries. Connect to your database via phpMyAdmin or a MySQL client and run these:

-- Delete all post revisions
DELETE FROM wp_posts WHERE post_type = 'revision';

-- Delete expired transients
DELETE FROM wp_options WHERE option_name
    LIKE '%\_transient\_%'
    AND option_name NOT LIKE '%\_transient\_timeout\_%';

-- Delete spam and trashed comments
DELETE FROM wp_comments WHERE comment_approved = 'spam'
    OR comment_approved = 'trash';

-- Optimize all tables
-- (run this after the cleanup queries above)

Important: Always back up your database before running any SQL queries. Always. I do not care how confident you are. Back it up.

To prevent revision bloat from coming back, add this line to your wp-config.php file:

// Limit post revisions to 3
define('WP_POST_REVISIONS', 3);

This keeps the safety net of revisions while preventing the database from growing endlessly. On a WooCommerce store I worked on last year, cleaning up revisions and expired transients alone reduced the database size from 800MB to 120MB. The difference in query speed was immediately noticeable.

Minute 25-30: Remove Render-Blocking Resources

The final step is to audit what WordPress is injecting into your <head> that you do not actually need. By default, WordPress adds quite a bit of extra weight:

• The emoji script (yes, WordPress loads a JavaScript file just for emojis)
• The embed script for oEmbed
• jQuery Migrate (a compatibility layer for old plugins that most modern themes do not need)
• The RSS feed links
• The Windows Live Writer manifest
• The WordPress version number (which is also a security risk)

Add this to your functions.php to clean it all up:

/**
 * Remove unnecessary head resources
 */
// Remove emoji scripts and styles
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('admin_print_scripts', 'print_emoji_detection_script');
remove_action('admin_print_styles', 'print_emoji_styles');

// Remove embed script
wp_deregister_script('wp-embed');

// Remove WordPress version number
remove_action('wp_head', 'wp_generator');

// Remove Windows Live Writer manifest
remove_action('wp_head', 'wlwmanifest_link');

// Remove RSS feed links (if you don't use RSS)
remove_action('wp_head', 'feed_links', 2);
remove_action('wp_head', 'feed_links_extra', 3);

// Remove REST API link
remove_action('wp_head', 'rest_output_link_wp_head');

// Remove oEmbed discovery links
remove_action('wp_head', 'wp_oembed_add_discovery_links');

// Remove shortlink
remove_action('wp_head', 'wp_shortlink_wp_head');

For jQuery Migrate, be careful. Test your site after removing it, because some older plugins still depend on it. If everything works fine without it, add this:

add_action('wp_default_scripts', function($scripts) {
    if (!is_admin() && isset($scripts->registered['jquery'])) {
        $script = $scripts->registered['jquery'];
        if ($script->deps) {
            $script->deps = array_diff($script->deps, array('jquery-migrate'));
        }
    }
});

The Results

If you followed all six steps, here is what you have done in 30 minutes:

• Reduced image sizes by 30-50% (WebP/AVIF conversion)
• Eliminated unnecessary image loading on initial page load (smart lazy loading)
• Removed external font requests and eliminated invisible text flash (font optimization)
• Made the above-the-fold content render without waiting for the full stylesheet (critical CSS)
• Shrunk your database and sped up queries (database cleanup)
• Removed 6+ unnecessary scripts and meta tags from your <head> (resource cleanup)

On the last WooCommerce store where I applied all of these changes together, the results were:

• LCP (Largest Contentful Paint): from 4.2s to 1.8s
• Total page weight: from 3.8MB to 1.1MB
• Number of HTTP requests: from 47 to 22
• PageSpeed Insights score: from 38 to 91

No caching plugin. No optimization plugin. No CDN (though you should use one too). Just fundamentals.

One Last Thing

I want to be clear: I am not saying plugins are bad. There are excellent caching plugins and CDN integrations that absolutely have their place. What I am saying is that installing plugins before fixing the basics is like putting a turbocharger on a car with flat tires.

Fix the tires first. Then add the turbo.

The steps in this guide are the tires. They are the foundational performance wins that every WordPress and WooCommerce site should have, regardless of what plugins you add on top. And the best part is that these changes are permanent. They do not depend on a plugin being maintained, updated, or compatible with your next theme.

Your code, your performance, your control.

Happy coding :D