🥲 최적화를 꼭 해야할까요 ?

네 이건 교수님의 과제가 아니잖아요 ? (단호)

최적화란 무엇일까 ?

우린 다음과 같은 이유들로 최적화를 미뤄왔습니다.

1. 성능이 너무 좋아서

   → 우린 이미 고성능의 컴퓨터와 빠른 인터넷 연결을 사용하여 애플리케이션을 개발하고 테스트를 하곤 합니다.

2. 이미 최적화를 하기에는 너무 거대해진 애플리케이션..

   → 초기 개발 단계에서는 미미했지만 점점 커져버린 애플리케이션과 그에 상응하는 복잡성

3. 다른걸 하기에도 너무나도 바쁜 일상

   → 빠르게 mvp를 개발해야되는 상황에서는, 성능 최적화보다는 기능 개발이 우선이 되기 때문에 성능에 대한 고민을 뒤로 미루곤 합니다.

최적화는 왜 필요할까 ?

---

렌더링 최적화의 경우엔 해당 포스트를 확인해주세요.

1) 😤 로딩 속도의 중요성 ..

본인만 봐도 집이나 다른 공간이 아닌 밖에서 핸드폰으로 사이트에 들어갈 때 해당 페이지가 즉각적으로 열리지 않고 계속 로딩창만 보여준다면 여러번 새로고침을 누르거나, 그 페이지를 나가버리곤 합니다. 이는 아래 통계에도 나와있듯이 그만큼 첫페이지 로딩 속도는 중요합니다.

페이지 표시 속도 (1초 기준)	이탈율
3초	32% 증가
5초	90% 증가
6초	106% 증가
7초	113% 증가
10초	123% 증가

쉽게 말해, 웹 성능 최적화란 사용자에게 웹사이트를 빠르게 보여주는 것입니다. 이는 자연스럽게 비즈니스에 영향을 미칩니다.

일반적으로, 웹사이트가 사용자에게 빠르게 로딩되면 좋은 사용자 경험(UX, User Experience)을 제공할 수 있습니다. 로딩 시간은 주로 사용자와 제공자 간의 데이터 전송 때문에 발생하며, 각 요소가 속도에 미치는 영향은 다음과 같습니다.

• HTML 요소 (웹페이지 구조): 미미한 시간 소요
• CSS 요소 (웹페이지 디자인): 미미한 시간 소요
• JavaScript (웹페이지의 동적 요소): HTML보다 더 많은 시간 소요
• 이미지/비디오: 하나만 있어도 로딩 시간이 크게 증가하며, 용량에 따라 큰 차이 발생
• 폰트: 위치와 전달 방식에 따라 일정 시간 소요

2) ✅ Lighthouse를 이용한 성능 체크

사실 Lighthouse를 사용하지 않고도 성능, 네트워크 탭을 이용해서 이벤트 발생 시점이나 불러오는 리소스들의 크기를 분석할 수 있습니다.

하지만 웹 애플리케이션이 점점 방대해지고 사용자에 액션에 의한 큰 스크립트들과 많은 이벤트로 인해 성능을 측정하는 기준이 모호해지게 되었고 그에 따라서 사용자 기준의 측정 방식이 필요하게 되었습니다.

Lighthouse 실행하는 방법은 다들 알고있을거라 생각하구

평가항목을 보겠습니다.

1. Performance

해당 항목은 4가지의 점수 중 가장 중요한 요소에 해당합니다.
구글 입장에서는 사이트 진입 속도가 빨라야 검색결과를 상위에 올려줄 명확한 이유가 되기에(사용자 입장에서는 최상단의 사이트를 들어갈 확률이 높기 때문!) 성능 점수를 높게 가져가는 것이 중요합니다.

구글에서는 성능(Performance)를 판단하는 데 LCP와 TBT에 가중치를 높게 둔다고 합니다.

Lighthouse에 각 항목을 보면 아래와 같이 진단에 대한 해결책을 상세하게 보여줍니다.

2. Accessbility

해당 항목은 다양한 사용자들이 어려움 없이 사이트를 이용할 수 있는 여러 접근성 규칙을 따르지 않는 요소들을 집어서 알려줍니다.

이때 다양한 사람들이란 장애인, 고령자 등을 포함한 모든 웹사이트 사용자들을 칭합니다.

나의 포폴 사이트에는 배경색과 글자색의 대비가 충분치 않다고 나오는걸 확인할 수 있다,, ㅎㅎ;;

3. Best Practices

해당 항목은 웹사이트가 대체적으로 보안과 관련한 조건들이 충족되고 있는지를 알려줍니다. HTTPS를 사용하는지, 레거시된 API를 사용하진 않는지 등의 요건을 충족할수록 점수가 올라갑니다.

4. SEO

해당 항목은 검색 엔진 최적화가 얼마나 되어 있는지에 대한 지표로,

• 0-49: 낮음(빨간색)
• 50-89: 보통(주황색)
• 90-100: 좋음(초록색)
  

구글의 검색 순위 결정 요소로 작용됩니다.

참고한 사이트

Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed
Lighthouse로 성능 기회 탐색하기  |  Articles  |  web.dev