웹 성능
웹 요청을 하면 HTML, CSS, JS, 이미지 등을 받아 브라우저가 랜더링한다.
때문에 웹 요청시 성능에 영향을 주는 요소는 정적 리소스 들이다.
우리 서비스에서 어떤 요소들이 현재 문제가 되는지 파악을 해보기 위해서 웹 페이지 테스트를 하며, 아래 지표들을 통해 각각의 지표들을 어떻게 개선해나갈지 고민하게되고, 개선해나가는 과정에서 성능이 개선될 수 있다.
성능 개선이 중요한 이유
3초안에 로딩되지 않으면 사용자가 떠난다는 말이 존재하는 등,
성능의 개선 및 저하가 수익에 직접적인 영향을 준다.
서비스의 성능은 어떻게 확인할까?
- 전구간 : 브라우저로 직접 QA
- 인터넷 구간 : webpagespeed등의 도구
- 전구간 (브라우저 렌더링 제외) : 부하테스트
정적 컨텐츠에 영향을 받는 지표
웹 서버에 영향을 받는 지표
Security Score: TLS 및 HTTP 헤더 보안성 + JS 라이브러리 보안 취약성First Byte Time: 서버 응답시간 + 네트워크 비용 (웹서버에서 받은 첫번째 바이트가 얼마만에 도착하는가?)Keep-Alive Enabled: 매번 3 way handShake 등의 과정(TCP연결)을 거쳐 Connection을 생성하지 않고 재사용 하는지Compress Transfer: gzip 압축 여부 (스크립트 파일이 Content-Encoding으로 압축 되어 있는지)Compress Image: 이미지 압축 여부 (사용자는 이미지 품질 차이보다 네트워크 지연에 더 민감하다)Cache Static Content: JS, CSS, 이미지 등 정적 컨텐츠 캐싱 여부 (불필요한 요청수 감소)CDN: CDN 여부 (가까운데서 받는 것이 효율적)
💡 위의 지표들이 우수하다면
CDN 덕분에 가까운데서, keep-alive 설정으로 connection을 재사용하고, 캐싱으로 요청 수를 최소화하여, gzip 압축을 통해 각 리소스의 전송 인코딩을 최적화하고, 이미지를 압축하여 패킷 사이즈를 줄여 네트워크 비용을 줄일 수 있다.
웹 성능 우선순위
📌 사용자 트래픽이 많은 페이지 등 가장 중요한 페이지가 무엇인지 파악
- 사용자에게 컨텐츠가 빠르게 노출되는 것이 중요한지
- 사용자에게 관련 링크를 빠르게 클릭하는 것이 중요한지
- ....
📌 Pagespeed 를 활용하여 FCP, TTI 등의 지표를 확인
📌 경쟁 사이트 또는 유사한 사이트의 성능을 조사 등 성능 기준 설정
우선순위를 세우고 나서는 다음과 같은 (예시) 기준들이 정량적으로 세워질 수 있다.
- 메인 페이지의 모든 오브젝트 파일 크기는 10MB 미만으로 제한한다
- 모든 웹 페이지의 각 페이지 내 포함된 JS 크기는 1MB를 넘지 않아야 한다.
- LTE 환경에서의 모바일 기기의 Time to Interactive는 5초 미만이어야 한다.
- Lighthouse 성능 감사에는 80점 이상이어야한다
- 👩🏻💻