duuliy

你不知道的SEO

2026-3-7

背景

普通的方式请自行查阅，这里主要讲一下黑科技…

LCP策略
flowchart TD

Start[页面开始加载] --> RenderCheck[浏览器持续观察视口中的可见元素]

RenderCheck --> CandidateCheck[找到当前视口中面积最大的可见元素]
CandidateCheck --> CandidateRender[检测这个元素的渲染完成时间]

CandidateRender --> UpdateLCP{它比当前已记录的LCP元素大吗?}
UpdateLCP -- 是 --> SetNewLCP[更新 LCP 候选为这个元素]
UpdateLCP -- 否 --> KeepCurrent[保持当前 LCP 元素]

SetNewLCP --> ContinueCheck[继续监听]
KeepCurrent --> ContinueCheck

ContinueCheck --> StableCheck{页面是否变为稳定状态? (无布局抖动/无新元素进入视口)}
StableCheck -- 否 --> RenderCheck
StableCheck -- 是 --> EndRecord[停止记录，得到最终的 LCP 元素]

EndRecord --> End[页面 LCP 时间 = 最终候选元素渲染完成时间]
LCP 规避策略

flowchart TD

Start[是否有元素不想被计为 LCP?] --> CheckViewport{该元素在首屏可见吗?}

CheckViewport -- 是 --> HideOrReplace{是否可以首屏先隐藏或替换占位?}
HideOrReplace -- 可以 --> StepHide[CSS隐藏(visibility/opactiy/display) 或显示占位图]
StepHide --> DelayShow[JS 在 load 后再显示大元素]
HideOrReplace -- 不可以 --> Preload{是否必须首屏显示?}
Preload -- 是 --> FastLoad[用 <link rel="preload"> / 压缩资源 / 现代格式加载快]
Preload -- 否 --> MoveOutOfView[用 CSS 移出 viewport(top/transform) 等]
MoveOutOfView --> DelayShow

CheckViewport -- 否 --> CheckEnterViewport&#123;它会在页面加载过程中进入视口吗?&#125;
CheckEnterViewport -- 会 --> LazyLoad[懒加载+延迟触发，让它进入视口在 LCP 记录结束后]
CheckEnterViewport -- 不会 --> Safe[不会命中 LCP，无需处理]

FastLoad --> End[减少 LCP 延迟]
DelayShow --> End
LazyLoad --> End
Safe --> End
tips

target-seo.tsx