Lighthouse 报告中 FCP 时间过长,怎么优化?
我用 Lighthouse 测了一个页面,FCP(First Contentful Paint)居然要 4 秒多,明明首页就加载了一张 logo 图和一点文字,按理说不应该这么慢啊。
我试过把关键 CSS 内联了,也把图片转成 base64 嵌进 HTML 里,但 FCP 还是没改善。是不是我哪里搞错了?
这是我的关键渲染代码:
window.addEventListener('DOMContentLoaded', () => {
const img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...';
document.getElementById('logo').appendChild(img);
});
懒人方案:直接把图片写死在 HTML 里,别折腾 JS 动态加载。
或者更省事,把 logo 搞成内联 SVG,连请求都省了,FCP 直接起飞。