Web Guide렌더링 차단초기 로딩성능
화면 표시를 막는 요소 제거하기
다 받을 때까지 화면이 하얗게 멈춰 있습니다.
먼저 받을 것과 나중에 받을 것을 나누면 해결됩니다.
01무엇이 막는가
화면을 그리기 전에 필요한 것들입니다.
1
스타일 파일
다 받아야 화면을 그립니다.
2
머리말 스크립트
위쪽에 있으면 진행이 멈춥니다.
3
외부 폰트
글자 표시를 늦춥니다.
4
외부 스타일
다른 서버 응답을 기다립니다.
5
동기 요청
순서대로만 진행됩니다.
6
큰 파일
내려받는 시간이 깁니다.
02해결 방법
순서와 방식을 바꿉니다.
필수 스타일 내장
첫 화면용만 문서 안에.
나머지 나중에
화면 그린 뒤 불러옵니다.
스크립트 아래로
문서 끝으로 옮깁니다.
비동기 지정
기다리지 않고 진행.
사용 안 하는 코드 제거
안 쓰는 스타일 정리.
파일 분리
페이지별로 필요한 것만.
03비동기 방식 차이
언제 실행되느냐가 다릅니다.
받는 즉시 실행
순서 보장 안 됨 · 독립적인 추적 코드에 적합
문서 분석 후 실행
순서 보장 · 화면 표시를 막지 않음 · 대부분의 경우 권장
04측정과 검증
무엇이 막고 있는지 확인할 수 있습니다.
성능 진단 도구차단 요소를 목록으로 보여줍니다.
개발자 도구요청 순서와 시간 확인.
미사용 코드쓰이지 않는 비율 확인.
첫 표시 시점화면이 언제 뜨는지.
전후 비교개선 효과 측정.
기능 확인바꾼 뒤 동작에 문제없는지.
CHECK POINT
□ 첫 화면용 스타일을 문서에 내장했는가
□ 나머지 스타일을 나중에 불러오는가
□ 스크립트를 문서 끝으로 옮겼는가
□ 비동기 방식을 적용했는가
□ 안 쓰는 스타일과 코드를 제거했는가
□ 진단 도구로 차단 요소를 확인했는가
□ 첫 표시 시점이 개선됐는가
□ 변경 후 기능이 정상 동작하는가
#렌더링 차단#초기 로딩#성능#비동기#스타일 내장#미사용 코드#측정#반응형#웹비스타#홈페이지 제작