게으른 로딩 및 UX 가속

1) 목표와 원칙

• 임계 경로를 희생하여 TTI/LCP를 줄입니다.
• 예측 가능한 치수로 레이아웃 (낮은 CLS) 을 안정화하십시오.
• 배터리와 트래픽을 모바일로 절약하십시오.
• 변환 올리기-사용자는 조치를 더 일찍 볼 수 있습니다.

원칙: 우선 순위 → 진행 → 예측 가능성. 첫째, 중요한 콘텐츠, 진보적 인 콘텐츠 및로드 후 개선.

2) 중요한 렌더링 경로

중요한 HTM: 즉시 "위의" 마크 업을 제공하십시오.
중요한 CSS: 인라인 나머지는 'media = "print" + 교환/재 장전입니다.
차단기로서의 JS: '연기 '/' async', 청크 분할, 경로를 따라로드 로직.
글꼴: '글꼴 표시: 교환' 옵션 ', WOFF2 사전로드, 시스템 대체' 및.

3) 네트워크 리소스 우선 순위

미리 연결하기/글꼴/이미지에 연결합니다.
세 번째 도메인에 대한 DNA 프리 페치.
중요한 이미지/글꼴/스크립트를 미리로드합니다.
우선 순위 힌트 (영웅 이미지의 경우 '중요도 =' 높음 ',' fetchopriate = '높음' ').
TP/3/QUIC: 대기 시간이 줄어 듭니다. CDN- 에지는 사용자에게 더 가깝습니다.
캐시 정책: 버전이있는 자산에 대한 '불변의'; 올바른 ETag/Last-Modified.

4) 프로그레시브 렌더링 및 다운로드 상태

스피너 대신 해골/시머: "점프" 없이 시각적 진보.
고정 크기 플레이스 홀더 (카드, 미리 보기) -CLS 제로.
스트리밍/청크 HTM: 프레임을 빠르게 제공 한 다음 컨텐츠를 추가하십시오.
낙관적 UI (주의): 즉각적인 조치와 검증.

5) 게으른 미디어 콘텐츠

이미지: 'loading = "lazy"', decoding = "async" ', AVIF/WebP 형식 (차단/PNG 대체).
반응: 다른 DPR/너비에서 'srcset '/' sizes'; 1x로 충분한 3x를로드하지 마십시오.
예측 가능한 높이: '너비/높이' 또는 CSS '종횡비'.
비디오: '프리로드 = "메타 데이터", 포스트로드 포스터, 외부 뷰 포트 자동 일시 정지.
아이콘: 스프라이트/인라인 SVG; 불필요한 HTT 요청을 피하십시오.

6) 게으른 구성 요소 및 경로

코드 분할: 경로/위젯에 의한 동적 가져 오기.
섬 구성 요소/부분 수화: 대화 형 영역 만 애니메이션됩니다.
SSR/SSG + ISR: 서버에서 HTML을 렌더링하고 점차적으로 새로 고침합니다.
Suspense/Defer (사용 된 프레임 워크에서): 데이터 및 UI의 분해.

7) 거대한 목록과 테이블

windowing-Render는 가시 영역 + 버퍼 만 보입니다.
앵커 재 장전: 팩을 다시로드 할 때 위치를 유지합니다.

배치 업데이트: 스크롤 할 때 다시 그리기를 최소화합니다

예측 가능한 크기의 고정 행 높이 또는 '내장 크기'.

8) CSS 및 브라우저 가속기

'콘텐츠 가시성: 자동': 브라우저는 보이지 않는 (최소 계산) 것을 건너 뛰고 있습니다.
'포함 '/' 의지 변경': 스타일/레이아웃의 영향을 제한합니다.

애니메이션: 변환/불투명도 만; 레이아웃/페인트가 많은 효과를 피하십시

그림자와 흐림-특히 목록에서 드물게.

9) 이벤트 및 JS로드 관리

패시브 스크롤/타차 청취자 ('{수동: 참}').
크기 조정/스크롤/핸들러에 대한 직불/스로틀.
보기 포트 외부의 위젯의 초기화 연기 (IntersectionObserver).

무거운 컴퓨팅을 웹 작업자로 마이그레이션

10) 모바일 컨텍스트

네트워크: 느린 3G/높은 RTT-게으른 다운로드가 더 적극적입니다.
배터리 및 열: 타이머 주파수를 제한하고 배경 애니메이션의 FPS를 줄입니다.
압축: 텍스트 용 Brotli, 올바른 '수락 인코딩'.
가능한 전환 (클릭 기록) 에 대해서만 Wi-Fi를 사용하여 미리 가져옵니다.

11) 가용성 및 SEO

스켈레톤 어 컨텐츠: 스크린 리더를 방해하지 않습니다. 논리적 초점 순서.
키 텍스트의 서버 HTML- JS 뒤에 모든 것을 숨기지 마십시오.

Alt와 헤더는 다시로드 할 때까지 계속 사용할 수 있습니다

게으른 내용이 키보드의 경로를 차단해서는 안됩니다.

12) 측정 및 대상

LCP (영웅 이미지/헤더): 5 초 (모바일).
INP (입력 응답): 소 200ms.
CLS: Λ0,1.
TTFB: 소 500ms; TTI: λ3s.
와이어를 통한 바이트 (첫 번째보기): 엄격한 예산 (예: 자원).
스크롤 생크: <1% 프레임> 16. 7ms.

• '게으른 _ engued '/' 게으른 _ loaded' (id, 유형, 크기, 대기 시간),
• '구성 요소 _ 수화' (시간, 무게 JS),
• (PHP 3 = 3.0.6, PHP 4)
• (PHP 3 = 3.0.6, PHP 4)
• (PHP 3 = 3.0.6, PHP 4)

13) 일반 영역의 패턴

홈/디렉토리: SSR + 스켈레톤 카드, 게으른 이미지, 프로그레시브 필터.
제품/게임 카드: 영웅 이미지 프리로드 + 우선 순위; 갤러리-게으른; 리뷰-클릭별로.
긴 기사/위키: TOC, 진행 상황 읽기, 미디어/코드 블록의 게으름, 지연된 내용 테이블.
라이브 테이프: 라인 가상화, 자동 스크롤 일시 정지, 버퍼 제한.

14) 안티 패턴

전체 화면 스피너> 1-2 초 동안 진행하지 않습니다.
로컬 홀더가없는 게으름 → 레이아웃 점프 (CLS TP).
드문 시나리오를 위해 "모든 JS를 한 번에 다운로드" 합니다.
중요한 부분에 무거운 글꼴/이미지를 인라인합니다.
예측할 수없는 카드 크기 → 로밍 컨텐츠.
게으른 크리티컬 로딩 (로고, 영웅 텍스트) -LCP를 중단합니다.
"다시" 후에는 위치 반환이 없습니다.

15) 구현 점검표 (단계별)

스프린트 1 - 진단: 측정 LCP/INP/CLS/TTFB; 지도 리소스와 중요한 경로.
스프린트 2-비판/우선 순위: 중요한 CSS/HTM, '사전 연결 '/' 사전로드', JS 청크 감소.
스프린트 3-미디어: AVIF/WebP, 'srcset/sizes', 고정 치수, 비 영웅에게는 게으름.
스프린트 4-목록: 가상화, 앵커 재 장전, 해골/쉬머.
스프린트 5-아키텍처: 부분 수화/섬, SSR/SSG/ISR, 스트리밍.
스프린트 6-미세 조정: '콘텐츠 가시성', 우선 순위 힌트, 바운스, 웹 작업자.
스프린트 7-A/B 및 원격 측정: 골격 옵션, 게으른 수준, 예산 비교.
스프린트 8-릴리스 위생: 자산 버전, 현금 베이스팅, 롤백 전략.

16) 용어집 (브리핑)

게으른로드-보이지 않는 콘텐츠의로드 지연.
LCP/INP/CLS/TTFB/TTI/TBT는 주요 UX 속도 지표입니다.
코드 분할/수화/제도-UI 분쇄 및 활성화 기술.
가상화-눈에 보이는 목록 상자를 렌더링하십시오.
우선 순위 힌트/사전 연결/사전로드-이전에로드 할 내용에 대한 브라우저 지침.

콘텐츠 가시성-보이지 않는 컨텐츠에 대한 계산을 건너 뛰

17) 결론

게으른 로딩은 "풋 '로딩 =" 게으른 "것이 아니며 완료되었습니다. "이것은 시스템입니다: 중요한 경로, 올바른 미디어 형식, 섬 상호 작용, 가상화 및 원격 측정. 중요한 순간, 보조 미묘하고 저렴하며 레이아웃을 예측할 수 있습니다. 그런 다음 모든 장치와 네트워크에서 제품이 빠르게 느껴집니다.