在30分钟内加速您的WordPress网站：无插件性能指南

发布于2026年5月3日
阅读时长6分钟

🤖 AI 摘要：这份实用指南将 WordPress 和 WooCommerce 网站所有者引导完成一系列可在 30 分钟内完成的手动性能优化，无需安装任何缓存或优化插件。它涵盖了将图片转换为 WebP 和 AVIF 等现代格式、实施原生懒加载、优化网络字体交付、内联关键 CSS、清理数据库以及移除阻塞渲染的资源。每个步骤都包含可直接复制到子主题中的真实代码片段。functions.php 文件，为希望获得更快加载时间的店主提供了一种复制粘贴即可使用的资源.

我要说的可能会让一些人感到不快：你的 WordPress 网站不需要十五个插件才能快速运行。

我已经审计过无数个安装了缓存插件、图片优化插件、懒加载插件、代码压缩插件、数据库优化插件和CDN插件的WooCommerce商店，但网站仍然很慢。在某些情况下，这些插件实际上在相互冲突，使情况变得更糟。

事实是，WordPress开箱即用并不像人们想象的那么慢。让它变慢的是我们堆砌在上面东西。而安装更多插件来修复由过多插件引起的问题的讽刺之处，是应该让我们所有人夜不能寐的事情。

所以这是我的挑战：设置一个30分钟定时器并按照这个指南操作。不要插件。只有代码、配置和常识。当你完成时，你的网站将明显更快。

让我们开始吧。

分钟 0-5：将您的图像转换为 WebP 或 AVIF

这是大多数 WordPress 网站最大的性能提升，而且差距非常大。

如果你的产品图片和博客缩略图仍然是JPEG或PNG格式，你提供的是比实际需要大两到五倍的文件。WebP在视觉质量相同的情况下，文件大小比JPEG小约30%。AVIF更进一步，通常小50%。

事情是这样的：WordPress 自 5.8 版本（2021年）起原生支持 WebP 上传。而到了 WordPress 6.5 版本，AVIF 也直接支持了。你不需要为此安装插件.

要做什么：

使用像 Squoosh（由 Google 开发）这样的免费工具，批量将你现有的图片转换为 WebP.
对于新上传的图片，只需保存为.webp 在上传它们到媒体库之前。
如果你想让 WordPress 向支持 AVIF 的浏览器提供 AVIF，并将 WebP 作为后备选项，你可以将以下内容添加到你的 .htaccess 文件中：

# 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>

在一个拥有500个产品的WooCommerce商店中，我见过单次更改将总页面权重削减了60%。这直接转化为更快的加载时间，尤其对于使用移动网络的客户。

分钟5-10：启用原生懒加载

懒加载意味着折叠区域下的图片（那些不滚动看不到的）不会在用户滚动到它们之前加载。这显著减少了初始页面加载时间。

好消息：自5.5版本以来，WordPress已经内置了原生懒加载功能。它会自动添加loading="lazy"到图片。但默认行为有两个问题。

首先，WordPress 也会延迟加载图片上方折叠部分，包括您的英雄横幅和第一个可见的产品图片。这实际上会损害您的 Largest Contentful Paint (LCP) 分数，因为浏览器会等待加载页面上的最重要图像。

其次，iframe（如嵌入的 YouTube 视频）默认情况下不会懒加载。

将此内容添加到您的子主题的 functions.php 中以修复这两个问题：

/**
 * 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;
});

这是那些不花你一分钱但能立即提升核心网页指标（Core Web Vitals）的变化，特别是LCP和整体页面加载瀑布流

第10-15分钟：优化你的网页字体

字体是默默影响性能的杀手。大多数WordPress主题通过向fonts.googleapis.com发起往返请求来加载Google Fonts，然后又发起另一个请求fonts.gstatic.com，然后下载实际的字体文件。这在你的文本渲染之前需要经过三次网络跳转。

以下是分三步解决这个问题的方法：

步骤 1：添加预连接提示。这告诉浏览器提前开始与字体服务器的连接。将以下内容添加到你的主题的<head>中：

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

第二步：使用font-display: swap.这会告诉浏览器立即使用系统字体显示文本，一旦自定义字体加载完毕就切换过来。不再有字体下载时看不见文本的情况。当加载Google Fonts时，在URL后追加&display=swap：

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

第三步：自托管你的字体。 这是最大的胜利。与其从 Google 的服务器加载字体，不如下载它们并从你自己的域中提供服务。这完全消除了 DNS 查找和连接开销。

从 Google Webfonts Helper 下载你的字体，将它们放置在你的主题的 /fonts/ 目录中，并在你的 CSS 中添加一个 @font-face 声明：

@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');
}

然后从你的主题中移除 Google Fonts 样式表。如果你的父主题加载了它，在子主题中取消加载：

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

在一个我优化的WooCommerce商店中，仅优化自托管字体就减少了400毫秒的初始渲染时间。这几乎是从消除外部字体请求中节省下来的半秒时间。

第15-20分钟：内联关键CSS并延迟其余部分

默认情况下，WordPress 会将整个样式表作为阻塞渲染的资源加载。这意味着浏览器必须先下载并解析完整的 CSS 文件，才能在屏幕上渲染任何内容，即使其中 90% 的 CSS 是用于用户尚未访问过的页面。

解决方法是直接将关键 CSS（用于首屏内容的样式）内联到 <head> 中，并异步加载其余部分。

这里有一种无需插件的实用方法：

步骤 1： 使用像 CSS Minifier 这样的工具来压缩你的样式表。

步骤 2： 提取你的关键 CSS。你可以使用免费的 Critical CSS Generator 来识别初始视口所需的样式。这通常包括你的页眉、导航栏、英雄区域以及第一行产品。

第3步： 内联关键CSS并延迟加载完整样式表。将以下内容添加到你的 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);

这种技术能让你的页面在极短的时间内视觉上就完整呈现，因为浏览器无需等待完整的样式表。用户能立即看到内容，而其他样式则安静地在后台加载。

分钟20-25：清理你的数据库

这对WooCommerce商店尤其重要。随着时间的推移，你的WordPress数据库会积累令人震惊的垃圾：

修订记录： WordPress 会保存每个帖子和大纲的每一个草稿。一个拥有 500 个产品的商店可能有 5,000+ 个没有任何作用的修订记录条目。
过期数据： 临时缓存数据，通常比其有用性持续时间更长。过期的过期数据只是呆在数据库中占用空间。
垃圾评论和已删除评论： 自解释。
被遗弃的帖子元数据：几个月前你卸载插件时留下的元数据。
WooCommerce会话：过期的客户会话数据，可能增长到成千上万行。

你可以用几个SQL查询清理所有这些内容。通过phpMyAdmin或MySQL客户端连接到你的数据库，并运行这些命令：

-- 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)

重要： 在运行任何 SQL 查询之前，始终备份你的数据库。始终。我不在乎你有多自信。备份它。

为了防止修订膨胀再次出现，将这一行添加到你的 wp-config.php 文件中：

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

这保留了修订版本的安全网，同时防止数据库无限增长。在我去年工作的一个WooCommerce商店中，仅清理修订版本和过期的临时文件就使数据库大小从800MB减少到120MB。查询速度的提升立即可见.

分钟25-30：移除阻塞渲染的资源

最后一步是检查WordPress向你的<head> 那些你实际上并不需要的东西。默认情况下，WordPress 会添加不少额外负担：

表情符号脚本（是的，WordPress 会加载一个 JavaScript 文件专门用于表情符号）
oEmbed 的嵌入脚本
jQuery Migrate（一个用于旧插件的兼容层，而大多数现代主题都不需要它）
RSS 订阅链接
Windows Live Writer 的清单
WordPress 版本号（这也是一个安全风险）

将其添加到你的 functions.php 中以清理所有内容：

/**
 * 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');

对于 jQuery Migrate，要小心。移除后测试你的网站，因为一些旧插件仍然依赖它。如果没有它一切正常，添加这个：

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'));
        }
    }
});

结果

如果你完成了所有六个步骤，以下是你在30分钟内完成的工作：

将图像大小减少了30-50%（WebP/AVIF转换）
消除了初始页面加载时的不必要图像加载（智能懒加载）
移除了外部字体请求并消除了不可见文本闪烁（字体优化）
使上方可见内容无需等待完整样式表（关键CSS）即可渲染
压缩了您的数据库并加快了查询（数据库清理）
从您的<head>中移除了6个以上的不必要脚本和元标签（资源清理）

在我将所有这些更改应用到最后的WooCommerce商店中，结果是：

LCP（最大内容绘制时间）:从4.2秒减少到1.8秒
总页面重量:从3.8MB减少到1.1MB
HTTP请求次数:从47次减少到22次
PageSpeed Insights评分:从38分提高到91分

没有缓存插件。没有优化插件。没有CDN（尽管你也应该使用一个）。只是基础。

最后一点

我想说明白：我不是说插件是坏的。有非常出色的缓存插件和CDN集成，它们绝对有其用武之地。我说的是，在修复基础问题之前安装插件是在之前

给轮胎瘪的车装涡轮增压器。先修好轮胎。然后加涡轮。

本指南中的步骤就是基础。它们是每个 WordPress 和 WooCommerce 网站都应该拥有的基础性能提升，无论你添加了哪些插件。而且最好的部分是这些更改是永久性的。它们不依赖于某个插件的维护、更新或与你下一个主题的兼容性。

你的代码，你的性能，你的控制权。

编程愉快 :D

推荐订阅源

DEV Community