UI 성능 최적화
1) "빠른" 것으로 간주되는 것
TTFB (시간에서 첫 바이트까지) -빠른 서버/CDN에 응답합니다.
LCP (Large Contentful Paint) - "메인" 컨텐츠가 빠르게 나타났습니다.
INP (다음 페인트와의 상호 작용) -상호 작용 중 응답 성.
CLS (누적 레이아웃 시프트) -인터페이스 지터가 없습니다.
TTI (Time to Interactive) -모든 것이 이미 응답하는 경우.
권장되는 참조 지점: LCP 자리 2. 5 초, INP 1 (실제 사용자의 75 번째 백분위 수).
2) 프로세스: 측정 → 병목 현상 찾기 → 예산 수정
1. 측정: RUM (실제 사용자, 국가/네트워크/장치 별 백분위 수) + 합성 (등대/브라우저).
2. 찾기: 성능 프로파일 러 (긴 작업> 50ms, 레이아웃 스 래싱, 추가 렌더링).
3. 수정: CI의 예산 (JS/CSS/글꼴 가중치, LCP/INP) 및 "빨간색 선".
3) 네트워크 및 리소스 로딩
3. 우선 순위 1 개
그림% 1개의 캡션을 편집했습니다.
'중요한 도메인에 사전 연결;' dns-prefetch 'to 2 차 도메인.
중요한 리소스 (영웅 이미지, 기본 글꼴) 에 대한 '사전로드'.
'fetchopriate = "high/low"' 및 'priority' 힌트는 지원되는 곳에 있습니다.
3. 2 캐싱
파일 해시가있는 정적: '캐시 제어: 공개, 최대 연령 = 31536000, 불변성'.
HTML- CDN을 통한 짧은 TTL + 오래된 오류.
오프라인/반복 방문을위한 ETag/Last-Modified 및 서비스 작업자.
4) 코드: 더 적고 나중에 "평평한"
4. 1 총회
나무를 흔들고 최소화하십시오. ч. 데드 코드 엘림).
경로/위젯으로 코드 분할, 동적 가져 오기
기본 번들에서 "전역" 무거운 패킷을 피하십시오 (moment → Intl/Day). js).
4. 웹 렌더링 및 배송 2 개
SSR/ISR/스트리밍: 프레임 워크와 기본 컨텐츠를 먼저 제공하십시오.
부분/제도 수화: 대화 형 영역 만 수화합니다.
중요하지 않은 모든 것을 연기하십시오: '<schrypt 유형 = "모듈" 연기>'.
4. 3 반응 특이성 (반응이 사용되는 경우)
'반응. 게으른 위젯에 대한 게으른 '+' 서스펜스 '.
무거운 필터/전망을위한 'startTransition' 및 'useDeferredValue'.
RSC (서버 구성 요소) - 클라이언트의 JS보다 적은 서버 계산.
(zustand/redux) 의 선택기: 전체 스택이 아닌 구성 요소를 조각으로 부호하십시오.
5) 렌더링 및 상태: "느려지는" 위치
5. 1 재실행기 격리
큰 구성 요소를 분쇄하고 회고하십시오 ('메모', 'useMemo', 'usecoll').
목록 키는 안정적입니다. 불필요하게 소품에 새로운 기능/객체를 만들지 않습니다.
자주 변경되는 데이터에 대한 "글로벌" 컨텍스트를 피하십시오 (선택기 또는 이벤트 버스 사용).
5. 2 가상화 및 큰 목록
시트/테이블 → 가상화 (렌더링 창).
역압으로 페이지 화/무한 스크롤 (한 번에 100k 라인을로드하지 마십시오).
뷰 포트 외부에서 무거운 위젯의 초기화가 지연되었습니다.
5. 3 레이아웃 및 페인트
내용 가시성: 자동; 숨겨진 파티션의 경우 (브라우저는 보이지 않는 것을 렌더링하지 않습니다)
예측 가능한 크기에 대한 '내재 크기' 를 포함하고 포함합니다.
빈번한 레이아웃 읽기 항목 (레이아웃 스 래싱) 을 피하십시오 그룹 측정.
의지 변경 사용 복용 (그렇지 않으면 추가 메모리/레이어).
6) 이미지 및 그래픽
형식: AVIF/WebP (PNG에서 폴백).
반응 형 접근 방식: 'srcset' + '크기', 망막의 밀도 기반.
비 영웅 이미지에 대한 '로딩 =' 게으른 '; 우선 순위/사전로드-LCP 후보자에게만 해당됩니다.
고정 크기 장소 홀더 → CLS 점프가 없습니다.
캔버스/차트: 계산을위한 오프 스크린 캔버스 및 웹 워커; 버칭 다시 그립니다.
7) 글꼴 및 텍스트
많은 스타일 대신 하나 또는 두 개의 변수 글꼴.
'글꼴 표시: 교환 '/' 선택 사항', 기본 스타일에 대한 사전로드.
글꼴을 변경할 때 '점프' 를 줄이려면 '크기 조정' 합니다.
유사한 메트릭을 갖는 로컬 대체 글꼴.
8) CSS 및 애니메이션
중요한 CSS 인라인 (<14-20kB), 휴식-연기됩니다.
사용하지 않는 스타일 (퍼지/CSSTree) 을 삭제하십시오.
가능하면 변환/불투명도에 대한 애니메이션; '선호 감소 운동' 을 존중하십시오.
깊은 캐스케이드와 블라스팅 셀렉터를 피하십시오.
9) 웹 작업자, 흐름 및 무거운 작업
작업자의 모든 CPU가 무겁습니다 (파싱, 정렬, 집계, ML).
긴 응답에 대한 스트리밍 API ('ReadableStream', '스트림이있는' 페치 ').
응답 성을 유지하기 위해 '요청 Idlecalls '/마이크로 작업을 통해 작업을 덩어리로 나눕니다.
10) 레이아웃 안정성 (CLS)
LCP 요소의 공간을 저장합니다 (이미지/위젯).
고정 크기없이 배너/리본을 삽입하지 마십시오.
비대칭 tultips/toasts-내용을 이동하지 마십시오. 레이어/포털 사용.
11) 스 니펫의 예
중요한 글꼴 및 LCP 이미지
html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">게으름 및 보안 위젯 초기화
js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}레이아웃 안정화
css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}12) 회귀 제어 및 예산
번들 예산: 총 JS
CI (에뮬레이션) + RUM- 알림 (백분위 수) 의 웹 바이탈.
번들 분석: PR의 소스 맵 탐색기/분석기.
구성 요소의 성능 벤치 마크 (10k 요소 렌더링, 반응 시간).
13) 반 패턴
"한 번에 모두로드": 첫 번째 화면에 그래프, 편집기, 맵입니다.
거대한 글로벌 상태 → 계단식 재실행기.
'srcset/sizes' 없이 원하는 크기의 2-4 × 이미지.
메인 스레드의 긴 동기 루프.
'ouline: 최적화없이 사용자 정의 트릭 없음-렌더 표시기를 방해합니다.
'상단/왼쪽' 별 애니메이션 (레이아웃을 끊고 역류 호출).
14) 화면 점검표
- LCP 계정 2. 3G/모바일 트래픽에서 5 초, CLS 1, INP λ200ms
- 중요한 자원: 사전로드/우선 순위; 나머지는 연기/게으르다
- 번들: 코드 분할, 추가 종속성 없음
- 목록/테이블 가상화, 무거운 위젯 지연 초기화
- 이미지: AVIF/WebP, 'srcset/sizes', 'loading = "gazer"'
- 글꼴: 가변 + '글꼴 표시', 원하는 미리로드
- CSS: 중요한 인라인, 퍼지, '콘텐츠 가시성' 및 '포함'
- 무거운 컴퓨팅을위한 근로자/유휴
- 예산과 웹 바이탈은 대시 보드/알림에 연결됩니다
15) 구현 계획 (3 회 반복)
반복 1-빠른 승리 (1-2 주)
Brotli/TH-2/3, CDN을 사용하십시오. 중요한 CSS 및 사전로드 LCP 리소스.
무거운 위젯을 동적 가져 오기로 이동하
이미지 → AVIF/WebP + 'srcset'. 글꼴: '글꼴 표시: 교환'.
Iteration 2-구조 개선 (3-4 주)
경로 별 코드 분할, 번들 분석, "무거운" 라이브 제거.
가상화, 내용 가시성, 포함 크기를 나열하십시오.
SSR/스트리밍/섬 (관련된 경우) 을 구현합니다.
웹 바이탈이 포함 된 RUM, CI의 예산.
Iteration 3-규모와 견고성 (연속)
작업자/오프 스크린 캔버스, 버칭 계산, startTransition/deferredValue.
정기적 인 perf 감사, 회귀 자동 다이제스트, 팀 교육.
16) 미니 -FAQ
모바일에서 가장 빠른 속도는 무엇입니까?
원래 JS, SSR/스트리밍 및 LCP 이미지 최적화
항상 SSR이 필요합니까?
아니요, 그렇지 않습니다. 페이지가 동적으로 대화 형이고 제대로 캐시되지 않으면 섬/부분 수화가 더 좋을 수 있습니다.
INP가 "가벼운" 번들로 나쁜 이유는 무엇입니까?
메인 스레드의 긴 작업 (정렬, 그래픽) - 작업자에게 가져와 작업을 나눕니다.
합계
Fast UI는 네트워크 우선 순위 및 캐시, 더 작고 늦은 번들, 예측 가능한 비 점프 렌더링, 경제적 인 이미지 및 글꼴, 일정한 실제 메트릭 제어 등의 분야의 모음입니다. 예산을 입력하고, 점검을 자동화하고, 팀에게 모든 단계에서 속도에 대해 생각하도록 가르칩니다.이 방법으로 인터페이스는 현재와 1 년 안에 빠르게 유지됩니다.