为什么我的首屏加载FCP这么慢，明明没加载大资源？

心霞 Dev 提问于 2026-02-25 17:57:21 阅读 12

移动

我在用Lighthouse测移动端性能时发现FCP（首次内容绘制）高达3.5秒，但首页其实就一个logo和几行文字，也没引入大图片或复杂组件，完全搞不懂卡在哪了。

我试过把关键CSS内联、移除所有非必要JS，甚至把字体文件都删了，还是没改善。控制台也没报错，网络面板看HTML和CSS都很快加载完了，就是白屏时间特别长。

页面里就加了一个简单的动态标题脚本，代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const title = document.querySelector('.hero-title');
  if (title) {
    title.textContent = '欢迎来到我们的新站点';
  }
});

移动性能

我来解答赞 4 收藏

反馈

1 条解答

胜捷酱~ Lv1

你这个情况我太熟了，别急着优化JS，问题大概率出在 WordPress 的渲染机制上，特别是 wp_head 和 wp_footer 这俩钩子。

你页面里就一个动态标题脚本，按理说不该拖慢 FCP，但你有没有在主题的 header.php 里留着 wp_head()？又或者没关掉那些默认挂载在 wp_head 里的东西？

比如 WordPress 默认会输出 generator tag、emoji 脚本、自动添加的 jQuery migrate、甚至有些主题或插件偷偷塞进来的 CSS/JS。这些玩意儿虽然单个不大，但堆在一起就容易阻塞渲染。

最简单的排查法是：先临时关掉所有插件，切到默认主题（比如 Twenty Twenty-Four），再跑一次 Lighthouse。如果 FCP 突然正常了，那问题就在你原来的插件或主题里。

如果还是慢，直接在 functions.php 里加上这段，把默认拖慢的东西都剪掉试试：

function remove_wp_head_junk() {

  remove_action('wp_head', 'wp_generator');

  remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

  remove_action('wp_head', 'rest_output_link_wp_head', 10);

  remove_action('wp_head', 'wp_oembed_add_discovery_links', 10);

  remove_action('wp_head', 'wp_oembed_add_host_js');

  remove_action('wp_head', 'print_emoji_detection_script', 7);

  remove_action('wp_print_styles', 'print_emoji_styles');

  remove_action('wp_head', 'rel_canonical');

  wp_dequeue_style('wp-block-library');

  wp_dequeue_style('wp-block-library-theme');

}

add_action('init', 'remove_wp_head_junk');

还有个坑：你那个 DOMContentLoaded 事件，虽然看起来很轻，但如果页面里有阻塞 JS（比如 jQuery 或某些主题脚本）在它前面加载，浏览器就得等那些脚本下载解析完才触发你的代码，而 FCP 可能就被这个“等”卡住了。

建议你在 header.php 里把 wp_head() 放在关键 CSS 后面，或者干脆把核心样式内联，再用 async 或 defer 加载非关键 JS。

最后提醒一句：Lighthouse 移动端测试默认会限速，有时候你以为网络没问题，其实是它模拟的 3G 网络太慢。建议你开 Chrome 开发者工具，Network 面板把 throttling 改成 “No throttling” 再测一次，看看真实环境是不是真慢。

2026-02-25 18:00