为什么我的首屏加载FCP这么慢，明明没加载大资源？
我在用Lighthouse测移动端性能时发现FCP（首次内容绘制）高达3.5秒，但首页其实就一个logo和几行文字，也没引入大图片或复杂组件，完全搞不懂卡在哪了。
我试过把关键CSS内联、移除所有非必要JS，甚至把字体文件都删了，还是没改善。控制台也没报错，网络面板看HTML和CSS都很快加载完了，就是白屏时间特别长。
页面里就加了一个简单的动态标题脚本，代码如下：
document.addEventListener('DOMContentLoaded', () => {
const title = document.querySelector('.hero-title');
if (title) {
title.textContent = '欢迎来到我们的新站点';
}
});2 条解答
1. 检查是否有其他隐藏的第三方脚本或者API调用。有时候这些外部资源虽然不明显，但加载时间长的话也会拖慢首屏加载。
2. 查看是否有阻塞渲染的CSS文件。虽然你已经内联了关键CSS，但如果还有其他未优化的外部CSS文件，也可能影响渲染速度。
3. 分析一下浏览器主线程是否被其他操作阻塞。有时候JavaScript执行耗时的操作也会导致页面看起来卡顿。
针对你提到的那个简单的动态标题脚本，可以尝试优化下它的执行时机，确保不会阻塞渲染。比如：
将事件监听器从
DOMContentLoaded改为load，这样脚本会在页面完全加载后再执行，避免阻塞初始渲染。另外，记得清理浏览器缓存再测试，有时候缓存的问题也会影响性能数据。希望这些能帮到你。
你页面里就一个动态标题脚本，按理说不该拖慢 FCP，但你有没有在主题的 header.php 里留着 wp_head()？又或者没关掉那些默认挂载在 wp_head 里的东西？
比如 WordPress 默认会输出 generator tag、emoji 脚本、自动添加的 jQuery migrate、甚至有些主题或插件偷偷塞进来的 CSS/JS。这些玩意儿虽然单个不大，但堆在一起就容易阻塞渲染。
最简单的排查法是：先临时关掉所有插件，切到默认主题（比如 Twenty Twenty-Four），再跑一次 Lighthouse。如果 FCP 突然正常了，那问题就在你原来的插件或主题里。
如果还是慢，直接在 functions.php 里加上这段，把默认拖慢的东西都剪掉试试：
还有个坑：你那个 DOMContentLoaded 事件，虽然看起来很轻，但如果页面里有阻塞 JS（比如 jQuery 或某些主题脚本）在它前面加载，浏览器就得等那些脚本下载解析完才触发你的代码，而 FCP 可能就被这个“等”卡住了。
建议你在 header.php 里把
wp_head()放在关键 CSS 后面，或者干脆把核心样式内联，再用 async 或 defer 加载非关键 JS。最后提醒一句：Lighthouse 移动端测试默认会限速，有时候你以为网络没问题，其实是它模拟的 3G 网络太慢。建议你开 Chrome 开发者工具，Network 面板把 throttling 改成 “No throttling” 再测一次，看看真实环境是不是真慢。