Lighthouse가 뭐야? 🤔
Lighthouse는 구글이 만든 웹 성능 검사 도구임. 이걸로 페이지 속도, 접근성, SEO 등을 체크할 수 있음. 웹페이지 성능 점수를 높이는 건 단순히 숫자를 올리는 게 아니라 사용자 경험을 위해 중요한 부분임. 성능이 좋아지면 사람들이 페이지를 떠나지 않고 더 오래 머무르게 됨
Lighthouse 성능 점수 이해하기 📊
Lighthouse는 페이지 성능을 평가하는 몇 가지 핵심 지표가 있음. 이 지표들이 높아야 점수가 잘 나오고 사용자 경험도 좋아짐.
- First Contentful Paint (FCP) : 첫 콘텐츠가 화면에 나타나는 시간임. 첫 이미지나 텍스트가 나타나기까지 걸리는 시간이라고 보면 됨.
- Largest Contentful Paint (LCP) : 페이지의 주 콘텐츠가 다 로딩돼서 눈에 보이기까지 걸리는 시간임. 큰 배너 이미지나 타이틀 텍스트가 완전히 보여야 하는 부분임.
- Cumulative Layout Shift (CLS) : 화면 레이아웃이 이동하는 양임. 페이지 로드 중에 배너가 아래로 밀리거나, 버튼이 이동해서 사용자가 실수로 누를 일이 생기면 CLS 점수가 낮아짐.
성능 최적화 팁과 구체적 예시 💡
이미지 최적화
이미지는 웹에서 큰 용량을 차지하는 요소임. 여기서 줄일 수 있는 건 줄여보자!
- WebP 포맷 사용하기
이미지를 PNG나 JPG 대신 WebP로 저장함. 예를 들어, 500KB PNG 이미지를 WebP로 변환하면 200KB 이하로 줄어들 수 있음. 거의 절반 이상 용량을 줄일 수 있음. - 적절한 크기와 해상도 선택
사용자 화면보다 훨씬 큰 이미지를 로드하는 건 리소스 낭비임. 모바일 화면에는 300px짜리 썸네일만 필요하다면 그 크기에 맞는 이미지를 로드함. - Lazy Loading
사용자 화면에 보여지기 전까지 이미지를 로딩하지 않는 방식임. loading="lazy" 속성을 써서 스크롤할 때 필요한 이미지만 로드되게 함.
CSS와 JS 최소화 및 축소 📜
- Minification
코드에서 공백, 줄바꿈, 주석 등을 제거해서 크기를 줄이는 거임. CSS 파일에서 수십 줄이 사라지면 그만큼 로딩 속도가 빨라짐. cssnano 같은 도구를 쓰면 됨. - 필요한 스타일과 스크립트만 로딩하기
모든 CSS와 JS를 한 번에 로딩하는 대신 필요한 파일만 가져옴. 예를 들어 메인 페이지와 다르게 상세 페이지에는 특정 스크립트가 필요 없다면 분리해서 로딩함. - defer와 async로 자바스크립트 로딩 속도 높이기
중요한 콘텐츠보다 자바스크립트가 먼저 로딩되지 않게 defer와 async 속성을 추가함. 이렇게 하면 스크립트가 로드되면서 다른 콘텐츠도 동시에 로드될 수 있음.
캐싱 전략 🗄️
- 서비스 워커 설치해서 오프라인 지원하기
자주 사용하는 이미지나 스타일 파일을 서비스 워커에 캐싱해 두면 네트워크 연결이 없어도 보여줄 수 있음. - Cache-Control 헤더 설정
캐싱 가능한 리소스에 Cache-Control을 설정해두면 브라우저가 재방문 시 파일을 다시 다운로드하지 않아도 됨. 예를 들어 max-age=31536000을 설정하면 사용자가 1년 동안 다시 로딩하지 않아도 됨.
폰트 최적화 📚
- 폰트 지연 로딩하기
font-display: swap; 옵션을 사용해서 폰트가 준비되기 전에 기본 폰트를 먼저 보여주고 준비되면 폰트가 교체되도록 함. - 필요한 글자만 포함된 폰트 파일 사용
전부 다 포함된 폰트 파일 대신 자주 사용하는 글자만 있는 서브셋 폰트를 사용함. 예를 들어 한글 전용 웹폰트를 사용할 때 자주 쓰이는 자음/모음만 추려서 용량을 확 줄일 수 있음. - Preload로 중요한 리소스 미리 로드하기
처음에 꼭 필요한 폰트를 link rel="preload"로 미리 로드해주면 첫 화면 로딩 속도가 빨라짐.
JavaScript 실행 최적화 ⚙️
- 코드 분할 (Code Splitting)
필요한 부분만 분리해서 로드하는 방법임. 예를 들어 메인 페이지와 상세 페이지에서 다른 스크립트를 로드하도록 Webpack을 설정함. - Web Workers 사용
무거운 계산은 Web Workers를 통해 백그라운드에서 돌림. 특히 애니메이션이나 데이터 처리 작업이 있으면 브라우저가 멈추지 않게 도움. - 필요 없는 라이브러리 줄이기
lodash처럼 용량이 큰 라이브러리는 필요한 함수만 lodash-es처럼 가져와서 크기를 줄임. 배포 용량을 확 줄일 수 있음.
슬기로운개발생활🤖