Web Guide번들 크기자바스크립트속도 개선
자바스크립트 번들 크기 줄이기
기능을 하나 추가할 때마다 사이트가 조금씩 무거워집니다.
쌓인 스크립트는 특히 모바일에서 체감 속도를 크게 떨어뜨립니다.
01무거워지는 경로
대부분 필요해서 넣었지만 지금은 쓰지 않는 것들입니다.
1
안 쓰는 라이브러리
예전 기능 때문에 넣고 그대로 남아 있습니다.
2
전체 불러오기
기능 하나 쓰려고 전체를 불러옵니다.
3
중복
같은 일을 하는 도구가 두세 개 들어 있습니다.
4
외부 스크립트
광고, 분석, 채팅 도구가 쌓입니다.
5
모든 페이지 로딩
특정 페이지에서만 쓰는 것을 전 페이지에서 불러옵니다.
02줄이는 방법
무엇이 큰지부터 확인하고, 큰 것부터 처리하는 것이 효율적입니다.
구성 분석
어떤 항목이 용량을 차지하는지 확인합니다.
미사용 제거
쓰지 않는 코드와 라이브러리를 정리합니다.
필요한 부분만
전체 대신 필요한 기능만 가져옵니다.
페이지별 분리
해당 페이지에서만 불러오게 나눕니다.
나중에 불러오기
당장 필요 없는 기능은 나중에 요청합니다.
압축 전송
서버에서 압축해 보내도록 설정합니다.
03외부 스크립트 관리
우리가 만들지 않은 스크립트가 속도를 떨어뜨리는 경우가 많습니다. 외부 서비스가 느리면 우리 사이트도 느려집니다.
목록 관리현재 붙어 있는 외부 스크립트를 목록으로 정리합니다.
필요성 점검지금도 쓰는지 정기적으로 확인합니다.
비동기 로딩화면 표시를 막지 않도록 설정합니다.
태그 관리 도구여러 스크립트를 한곳에서 관리합니다.
장애 대비외부 서비스가 멈춰도 사이트가 열려야 합니다.
개인정보 확인어떤 정보가 외부로 나가는지 파악합니다.
04기준을 정해두기
한 번 줄여도 관리하지 않으면 다시 늘어납니다. 기준을 두는 것이 중요합니다.
관리하지 않으면
기능 추가마다 누적 · 아무도 제거하지 않음 · 1년 뒤 두 배 · 원인 파악이 어려워짐
기준을 두면
상한선 설정 · 추가 시 영향 확인 · 정기 점검 · 제거 담당 지정 · 속도가 유지됩니다
CHECK POINT
□ 현재 스크립트 구성과 용량을 파악했는가
□ 쓰지 않는 라이브러리를 제거했는가
□ 페이지별로 필요한 것만 불러오는가
□ 외부 스크립트 목록을 관리하는가
□ 외부 스크립트가 화면 표시를 막지 않는가
□ 외부 서비스 장애 시에도 사이트가 열리는가
□ 용량 상한 기준이 있는가
□ 정기 점검 주기를 정했는가
#번들 크기#자바스크립트#속도 개선#외부 스크립트#코드 정리#모바일 성능#태그 관리#홈페이지 개발#웹비스타#홈페이지 제작