Web Guide프리로드프리커넥트리소스 힌트
미리 연결과 미리 불러오기
필요해질 것을 미리 준비해두는 기법입니다.
몇 줄로 첫 화면 시간을 줄일 수 있습니다.
01종류와 쓰임
준비 정도가 다릅니다.
주소 미리 찾기
도메인 주소만 먼저 조회.
연결 미리 맺기
접속까지 미리 준비.
파일 미리 받기
곧 쓸 파일을 먼저 요청.
다음 페이지 준비
이동할 곳을 미리 가져옵니다.
우선순위 지정
중요한 것을 먼저.
지연 지정
덜 중요한 것은 나중에.
02어디에 쓰나
효과가 큰 지점이 정해져 있습니다.
폰트 서버연결을 미리 맺어둡니다.
대표 이미지첫 화면 이미지를 먼저.
핵심 스타일화면을 그리는 데 필요한 것.
외부 API곧 호출할 서버에 미리 연결.
다음 단계결제나 상세로 갈 것이 뻔할 때.
영상 첫 조각재생 시작을 앞당깁니다.
03과용 주의
많이 쓰면 오히려 느려집니다.
점검 항목
대역폭 경쟁
정작 필요한 것이 밀립니다.
안 쓰는 파일
받아놓고 안 쓰면 낭비.
모바일 데이터
이용자 데이터를 씁니다.
연결 수 제한
미리 연결도 자원입니다.
개수 제한
정말 중요한 몇 개만.
경고 확인
안 쓰이면 브라우저가 알려줍니다.
04적용 순서
측정 후 필요한 곳에만 씁니다.
잘못된 접근
일단 많이 붙이기 · 효과 측정 없음 · 오히려 느려짐
올바른 접근
먼저 병목 측정 · 늦게 오는 핵심 자원 확인 · 몇 개만 적용 · 전후 비교
CHECK POINT
□ 병목이 되는 자원을 먼저 측정했는가
□ 폰트 서버에 미리 연결하는가
□ 첫 화면 대표 이미지를 미리 불러오는가
□ 미리 불러온 파일을 실제로 쓰는가
□ 적용 개수가 과하지 않은가
□ 브라우저 경고가 없는가
□ 모바일 데이터 소모를 고려했는가
□ 적용 전후 속도를 비교했는가
#프리로드#프리커넥트#리소스 힌트#첫 화면#폰트#대역폭#측정#반응형#웹비스타#홈페이지 제작