댕댕어디가 리팩토링 - #0 웹 성능 개선하기

LG유플러스 유레카 1기 최종융합프로젝트(비대면부문)에서 1등을 하며 기분 좋게 마무리한 후 약 한달간의 휴식기간을 가지고, 팀원들과 약속했던 리팩토링을 진행하기로 했다.

프로젝트 기간 짧아 아쉬움이 많이 남았던 부분들을 위주로 보완하기로 했는데

특히 프론트는 각자가 구현한 페이지를 최적화하기로 했고, 시작하기전에 최적화를 어떻게 하는지 제대로 알고 하는 게 좋을 것 같아서 한번 글을 써본다.

 

🚀 웹 성능(Web Performance)이란?

웹 성능(Web Performance)이란 웹사이트가 사용자에게 얼마나 빠르고 원활하게 콘텐츠를 제공하는지를 의미한다.

그럼 단순히 웹 성능은 빠르게 페이지를 보이게 만드는 것일까? ㄴㄴ

 

1️⃣ 전체 로드 시간 단축: 웹사이트를 렌더링하는데 필요한 파일을 다운로드하는 데 걸리는 시간

2️⃣ 사이트를 빠르게 사용가능하게 준비: 사이트가 로드를 시작한 후 사용 가능한 시간

3️⃣ 매끄러움과 상호작용성: 사이트가 안정적이고 동작이 매끄럽고 동작이 잘 작동하는지

4️⃣ 체감성능: 사용자 경험에서 실측한 시간보다 느끼는 사용자 체감시간

 

이 4가지가 이뤄져야 웹성능이 좋은 페이지라고 할 수 있다.

로딩성능이란?

페이지가 렌더링 되기 전까지 리소스를 불러오는 성능

네비게이션 타이밍

노란부분: TTFB: 네트워크 요청 시 브라우저까지 도달하는 시간

Redirect~TCP: 네트워크 개선 및 리다이렉트 방지, 캐시를 적극적으로 사용해 개선가능

Request~Response: 리소스의 압축하거나 최적화해 개선 가능

 

렌더링 성능

브라우저 렌더링 과정

HTML과 CSS를 가져와 파서를 거치고, html은 돔트리를 만들고 css는 cssom을 만들고 둘을 합쳐 렌더트리를 만들고 layout과정과 pain과정을 거침 이때, paint과정에서 동적으로 dom이 변경되면 파서부터 다시 시작함. 

파서 과정이 두번 일어나지 않고 하려면 바로 돔을 넣어주는 식으로 변경하는 게 좋음

 

로딩성능, 렌더링 성능 말고도 사용자 경험 또한 개선되어야 하는데,

Lighthouse라는 Google에서 제공하는 웹사이트 품질 분석 도구를 사용하면 페이지를 분석해 어떤 부분을 개선해야할지까지 알려준다고 한다.  

분석 방법은 3가지가 있는데 보편적으로 navigation 모드를 많이 사용한다고 하고,

측정 기기는 모바일 기준으로하면 3G에 모바일 화면 기준화면으로 측정하고 데스크탑은 말그대로 내가 쓰고 있는 데스크탑 기준인 듯 하다. (그래서 모바일 기준으로 하면 점수가 확 떨어진다..!)

 

Lighthouse로 측정했을 때 측정한 페이지의 점수를 4가지 카테고리로 나눠 볼 수 있고, 각 페이지에서 어떤 점을 개선하면 점수가 오를 수 있을지도 알려준다.

여기서 우리는 각 카테고리가 90점 이상이 되도록하는 것을 목표로 진행하기로 했다.

📌 1️⃣ Performance (성능)

🔹 성능 점수는 페이지 로딩 속도와 사용자 인터랙션 속도를 기반으로 측정된다.

지표	설명	권장값	가중치
First Contentful Paint (FCP)	최초로 텍스트, 이미지, 비디오 등 콘텐츠가 화면에 나타나는 시간	1.8초 이하	10%
Largest Contentful Paint (LCP)	가장 큰 콘텐츠(배경 이미지, Hero 섹션 등)가 화면에 로드되는 시간	2.5초 이하	25%
Cumulative Layout Shift (CLS)	페이지가 로드되는 동안 예상치 못한 레이아웃 변경(화면 깜빡임) 정도	0.1 이하	15%
First Input Delay (FID) → INP로 대체됨	사용자가 첫 입력(클릭, 탭)을 했을 때 반응하는 속도	100ms 이하	10%
Interaction to Next Paint (INP) (NEW)	사용자 인터랙션(버튼 클릭 등) 후 화면이 갱신될 때까지 걸리는 시간	200ms 이하	15%
Speed Index (SI)	전체 페이지 콘텐츠가 얼마나 빠르게 표시되는지 측정	3.4초 이하	10%
Total Blocking Time (TBT)	페이지가 응답하지 않는 시간(스크립트가 실행되면서 멈추는 시간)	200ms 이하	25%

✅ 성능 점수를 올리는 방법:

• 이미지 최적화 (WebP, lazy-loading)
• CSS/JS 축소(minify) 및 불필요한 코드 제거 (tree shaking)
• async & defer 사용하여 JavaScript 실행 최적화

---

📌 2️⃣ Accessibility (접근성)

🔹 접근성 점수는 시각 장애인, 저시력자 등 다양한 사용자가 웹사이트를 원활히 사용할 수 있는지를 평가한다.

지표	설명
적절한 HTML 태그 사용 (<button>, <label>, <alt> 등)	<button>에 aria-label이 있는지, <img>에 alt가 있는지 등 확인
콘트라스트(색 대비) 확인	텍스트와 배경색의 대비가 충분한지 검토
키보드 내비게이션 지원	Tab 키를 이용한 내비게이션이 가능한지
스크린 리더 지원 여부	ARIA 속성(aria-hidden, aria-label 등)이 올바르게 설정되어 있는지
폼 요소의 접근성	<input>에 label이 존재하는지 확인

✅ 접근성 점수를 올리는 방법:

• 이미지에 alt 속성 추가
• 모든 폼 요소(<input>, <button> 등)에 label 추가
• 색 대비 조정 (Lighthouse에서 WCAG 기준 충족 여부 제공)

---

📌 3️⃣ Best Practices (최적 구현)

🔹 웹사이트가 보안, 최신 웹 기술을 준수하는지 평가한다.

지표	설명
HTTPS 사용 여부	https://가 적용되었는지 확인
안전하지 않은 JavaScript 라이브러리 감지	보안 취약점이 있는 JS 라이브러리가 있는지 검사
콘텐츠 보안 정책(CSP) 적용 여부	Content-Security-Policy가 적용되었는지 확인
브라우저 최신 API 사용 여부	최신 웹 기술(Fetch API, WebP, Lazy Loading 등) 사용 여부
오류 발생 여부 (콘솔 경고 체크)	console.error() 발생 여부 확인

✅ Best Practices 점수를 올리는 방법:

• HTTPS 사용 (SSL 인증서 적용)
• 보안 취약점이 있는 JS 라이브러리 업데이트
• Content-Security-Policy(CSP) 적용

---

📌 4️⃣ SEO (검색 엔진 최적화)

🔹 웹사이트가 Google 검색에 잘 노출될 수 있도록 최적화되었는지 평가

지표	설명
메타 태그 (title, meta description) 확인	검색 결과에 표시될 제목과 설명이 있는지 확인
페이지 구조 (H1, H2, H3 태그 적절한 사용)	검색 엔진이 콘텐츠를 잘 분석할 수 있도록 h1, h2, h3 태그 올바르게 사용
링크 구조 검사	링크가 nofollow, noopener 등을 사용하여 보안적으로 안전한지 확인
모바일 친화성 (Mobile-Friendly Test)	모바일 화면에서 정상적으로 표시되는지 확인
크롤러 접근 가능 여부	robots.txt 및 meta robots 설정 확인

✅ SEO 점수를 올리는 방법:

• <title>과 <meta description> 태그를 적절히 설정
• <h1> 태그를 한 개만 사용하고, <h2>, <h3> 등 계층적으로 정리
• robots.txt에서 중요한 페이지가 차단되지 않았는지 확인

지금까지는 단순히 기능 구현에만 초점을 뒀었는데, 이제는 최적화에도 관심을 기울여 작업을 할 줄 알아야하는 시점이 된 것 같다. 열심히 해보자..!