? ????? ???? ???????? ???????? ????? ????? ????? ??? ?????.?? ???? ??????? ?????? ?????? ????? ??? FID ??
???? ???? ???? TTFB ?
????? ??????? ????????
LCP ???? ?
????????
1. ?? ?? ??? ???????? ?
?? ???? ? ??? ?????? ???? ??? ?? ??? "?????? ???????".
???? ???? CLS ?
FIDCLS??? ????????
?
<2.5s
???? ????????
(??? Input Delay)??? ???? Chrome.
?
FCP | (First Contentful Paint) | ?????? ????? ????? ???????? ???????? ????? ???? ??????? ?????????? ????????? ?????????? ?????? ????? ?????. | ????? ??????? ????? |
|---|---|---|---|
??? ????? ???? "???? ?????" ? ???????? ??????? ???????? ????? ???????? | (Time to First Byte) | ?????? | (Largest Contentful Paint) |
Lighthouse<100ms | ? ????? ???? | ??? ?????? ????? | ???? ???? ?????? ??????? |
??? ??? ???????<0.1 | ?? ?? ???????? ???? ??? ?????? ?????? ? ????? ??????? ? | ?????? ???? ?? ?????? ??? ??? | (Cumulative Layout Shift) |
?????? ????? ??????? ???????<1.8s | ???????? ???????? ???? ????? ???? ??? ??????? Google SEO ?????? ?????? | TTFB | ??? ??? ??? ???? ?? ??? ??? ?????? |
???? ????????? ???????2. ???? ???? ???????? ???????? ?????? | DevTools | LCP | ??????? ??????: |
?
???? ????? ??????? ??????? ?????? ? ??????? ??????? ? ?????? ??????? ???????????? ? ??????? ????????????? ???????? ?????? ???????? ????? ?? ????? ???
????? ?????? ? ????? ????
??????? ???????? ???????? ?? Chrome: Web Vitals ? Core Web Vitals Reporter
????? ??? JS ??????? ?????
<0.5s
????? ?????????? ?? "???????" ? ????? ?? ???? ???? ??????? ??????? JS ??????
???? ????? ??????? ?????????? ?? ?????
?? ?????? ????? ??????? ??????
?????? ??? ??? "???? ???????" ? ???? ?? ??? ?????? ??? ???? ????
?????/???????? ???????? ???? ?? ??????? ????? (preload)
2. LCP: ?? ????? ?????? "??? ?????"
????? Chrome ??? "???? ???? ?????" ? ???? ?? ?????!
??????? Chrome DevTools → Performance → Lighthouse
??????? ??? ???????? (?????? ?????)
??? ?? ???? ??????? ??? ?????? ? ?? ?? ????? ?????? ??? ??? ???? ??????? ??????
??? ???? ??????: ???? ??? ???? ? ???? ??? ???? ????? ? ???? ??? Tab ? ???.
????? ??? ??? JS
4. CLS: ???? "?? ????"3. ???? ?? ???? ????? ??????? ????????
??????? ??????? ????? ??????? (WebP/AVIF)
???? ???? ??? ? ???? ???? ??????????
??????? ????? ? DNS ???? ? CDN ??? ????? ? ???? ??? ??? ??????
????? ????????: ???? ??????? ?? ???????
??????? ???????? ??? ????????? ??? requestIdleCallback ?????? ?????? ??? ??????
4. ????? ??? ??? ???????? ?
???? ??????? ??? ????? ?????? ? ?? ???????? ????? ? ????? ??????? ? ???? ?????? ??? ?????? ????? ? ??? ?? CLS ?????
?
3. FID: "???? ?????????" ?????? ???????? ?????
1. FCP: ???? "??? ???????"
import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);?
.
FCP → ?? ?????????? ?????? ?? "?????? ?????"
????? ??? ??????: http://www.fushitang.cn/google-seo-chrome-lighthouse-core-web-vitals-fcp-lcp-fid-cls-ttfb.html
?? ???? ??? ???????? ?????? ? ????? ????? ?? ???? ???? ???? ?????:
LCP → ???? ?????????? ?????? ?? "??????? ??????? ????"
FID → ?? ?????????? ???????? ????? ?????
CLS → ?? ??? ?????????? ??????? ???????
?
TTFB → ?? ??? ??????? ??????? ???? ??????? ????????.
