本文约 5,453 字，预计阅读 14 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：一个只有一屏内容的落地页，加载了 2.4MB
投放广告的人最清楚这个痛：落地页内容很简单——一张图、一段文案、一个表单，但用页面构建器做出来后，页面体积 2.4MB，请求数 78 个，首屏加载 5 秒。广告点击率不错，落地页跳出率却高达 85%。钱花在点击上，全被加载时间吃掉。
原因不是 WordPress 慢，而是主题和构建器把一整套通用能力加在了每一页上：滑块的 JS、图标字体、动画库、Google Fonts、主题的 CSS 全家桶，还有 wp_head() 里输出的 RSD、wlwmanifest、短链接、REST 链接、emoji 脚本。这些对内容站有用，对一个只干一件事的落地页全是纯负担。
原理分析：落地页的资源构成与剥离思路
| 类别 | 典型体积 | 落地页是否需要 | 剥离手段 |
|---|---|---|---|
| 主题 CSS | 80–300KB | 不需要 | wp_dequeue_style |
| 构建器 CSS/JS | 100–500KB | 不需要 | 不用构建器 |
| jQuery + 插件脚本 | 90–150KB | 通常不需要 | wp_dequeue_script |
| 图标字体 | 30–120KB | 不需要 | 用内联 SVG |
| wp_head 冗余标签 | 数 KB + 请求 | 不需要 | remove_action |
| 关键 CSS | 3–8KB | 必须 | 内联进 <head> |
| 首屏图 | 50–150KB | 必须 | WebP + 预加载 |
核心思路是：不要让落地页走主题的模板体系，而是给它一个完全独立的极简模板。WordPress 提供了 template_include 过滤器，可以按页面 ID 或别名返回一个自定义 PHP 文件，这个文件里你只输出需要的 HTML，完全不调用 get_header() / get_footer()。
保姆级实操
步骤 1：用 template_include 指定极简模板
在子主题里新建 landing-minimal.php，然后通过过滤器把它绑定到指定页面：
add_filter( 'template_include', function ( $template ) {
if ( is_page( 'lp-spring-sale' ) ) {
$custom = get_stylesheet_directory() . '/landing-minimal.php';
if ( file_exists( $custom ) ) {
return $custom;
}
}
return $template;
}, 99 );
步骤 2：模板里只保留必要输出
注意 wp_head() 是必须的（表单插件的 nonce、SEO 插件的标签都要靠它），但在它之前先卸载掉所有不需要的资产：
<?php
// landing-minimal.php
// 落地页专用：卸载主题与插件的样式脚本
add_action( 'wp_enqueue_scripts', function () {
global $wp_styles, $wp_scripts;
foreach ( $wp_styles->queue as $handle ) {
wp_dequeue_style( $handle );
}
foreach ( $wp_scripts->queue as $handle ) {
if ( ! in_array( $handle, array( 'jquery-core' ), true ) ) {
wp_dequeue_script( $handle );
}
}
}, 999 );
// 清理 wp_head 里的冗余输出
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
remove_action( 'wp_head', 'wp_shortlink_wp_head' );
remove_action( 'wp_head', 'rest_output_link_wp_head' );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<style><?php echo file_get_contents( get_stylesheet_directory() . '/landing-critical.css' ); ?></style>
<link rel="preload" as="image" href="/img/hero.webp">
<?php wp_head(); ?>
</head>
<body class="landing-minimal">
<main>
<h1>春季特惠：库存同步助手 5 折</h1>
<p>15 分钟接入，把超卖率降到 0.3% 以下。</p>
<a class="cta" href="#signup">立即领取</a>
<img src="/img/hero.webp" alt="产品界面" width="1200" height="750" fetchpriority="high">
<div id="signup"><?php echo do_shortcode( '[contact-form-7 id="88"]' ); ?></div>
</main>
<?php wp_footer(); ?>
</body>
</html>
步骤 3：关键 CSS 内联
把落地页需要的样式写成独立文件并在 <head> 内联，避免额外的 CSS 请求。内容控制在 8KB 以内：
:root{--fg:#111;--bg:#fff;--accent:#0a66c2}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--fg);background:var(--bg)}
main{max-width:720px;margin:0 auto;padding:32px 20px}
h1{font-size:32px;line-height:1.25;margin:0 0 12px}
p{margin:0 0 20px}
.cta{display:block;text-align:center;background:var(--accent);color:#fff;
padding:16px;border-radius:8px;text-decoration:none;font-size:18px;font-weight:600}
img{max-width:100%;height:auto;display:block;margin:24px auto}
input,textarea{width:100%;padding:12px;margin:0 0 12px;border:1px solid #ccc;border-radius:6px;font-size:16px}
input[type=submit]{background:var(--accent);color:#fff;border:0;font-weight:600;cursor:pointer}
步骤 4：字体用系统栈，图标用内联 SVG
上面 CSS 里的 system-ui 字体栈零请求。图标直接内联 SVG，不要用 Font Awesome 之类的图标字体——为三个图标加载 100KB 字体是最典型的浪费。
步骤 5：表单插件的资产也要限定
Contact Form 7 默认在每个页面加载自己的 CSS/JS，可以用它提供的常量关闭全局加载，只在需要的页面手动加载：
// 关闭 CF7 全局资源加载
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
// 仅在落地页模板里手动引入
if ( is_page( 'lp-spring-sale' ) && function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
wpcf7_enqueue_styles();
}
步骤 6：图片与预加载
首屏图转 WebP，长边不超过 1600px，用 fetchpriority="high" 且不要加 loading="lazy"（会推迟 LCP）。非首屏图才用 loading="lazy"。
常见踩坑
- 完全不调用
wp_head()：表单 nonce、SEO 标签、统计代码全部失效，表单提交会报验证失败。 - 把
wp_styles->queue全清掉却忘了表单样式：表单变成了无样式的原生输入框，看起来像坏了。要在卸载后手动 enqueue 需要的样式。 - 保留了 jQuery 但页面根本没用到：如果表单是原生提交或非依赖 jQuery 的插件，jQuery 也可以一起去掉，能省 30KB 左右。
- 内联 CSS 太长：内联超过 15KB 会让 HTML 文档本身变大，反而拖慢首字节渲染，应控制在 8KB 内。
template_include优先级太低：被主题自己的过滤器覆盖，模板不生效，优先级用 99 或更高。- 案例：某教育机构的投放页：用页面构建器做的落地页 2.4MB、78 个请求，移动端首屏 5.1 秒，广告转化成本 180 元。改成极简模板后降到 61KB、9 个请求、首屏 0.9 秒，相同预算下转化成本降到 74 元。
- 忘了在落地页上也做移动端测试：极简模板没有响应式框架兜底，必须自己确认 375px 宽度下的排版。
总结
落地页的性能目标应该具体到数字：HTML 文档小于 30KB、总请求数少于 15 个、首屏 LCP 低于 1.5 秒、CLS 为 0。达不到就说明还有资源没剥离干净。行动清单：先用 template_include 给落地页指定独立模板，再清空 $wp_styles / $wp_scripts 队列并清理 wp_head 冗余动作，然后把关键 CSS 内联、首屏图转 WebP 预加载，最后关闭表单插件的全局资源加载。这套做完后，WordPress 做落地页的性能完全不输静态页生成器。如果你要做的是多段式的 SaaS 官网，结构安排见 SaaS 官网落地页结构；面向海外用户时还要叠加 外贸站海外访问加速。
