[포트폴리오] 포트폴리오 웹사이트 최적화 - 1 (Light House 및 수정할 부분)

포트폴리오 웹을 제작하고 나서 뭔가 렌더링도 느리고, 최적화 관련 책을 읽은 김에 한번 최적화를 해보고 싶어서 라이트 하우스를 사용해 검사를 해보았다

결과는 좀 충격적^^...

Light House란?

Lighthouse는 웹 페이지의 품질을 개선하기 위한 오픈소스 자동 도구입니다
- 출처 : 라이트하우스 공식 홈페이지

모든 웹 페이지에 대해 실행할 수 있는 웹 품질 검사기라고 생각하면 된다

라이트 하우스에서는 점수를 어떻게 계산할까?

The Performance score is a weighted average of the metric scores. Naturally, more heavily weighted metrics have a bigger effect on your overall Performance score. The metric scores are not visible in the report, but are calculated under the hood.

 

라이트하우스에서 보여주는 퍼포먼트 스코어는 매트릭스 스코어의 가중된 평균 스코어라고 한다

즉, 아래의 항목에서 해당하는 매트릭스를 잘 지켰다면 사용자 경험이 좋은 웹이므로 그만큼 가산된 점수를 더 얻어 높은 스코어를 얻을 수 있다

 

Lighthouse 10

AuditWeight

First Contentful Paint	10%
Speed Index	10%
Largest Contentful Paint	25%
Total Blocking Time	30%
Cumulative Layout Shift	25%

Lighthouse 8

AuditWeight

First Contentful Paint	10%
Speed Index	10%
Largest Contentful Paint	25%
Time to Interactive	10%
Total Blocking Time	30%
Cumulative Layout Shift	15%

 라이트하우스 8버전에서는 TTI가 포함되어 있었지만 10 버전부터는 제외되었다

(공홈을 보니 제외된 매트릭스는 TTI(TIme to Interactive)를 포함해 총 4개이다(참고))

 

각 매트릭스가 의미하는 것

그렇다면 각 매트릭스는 어떤 것을 의미하는 걸까?

그리고 어떻게 개선 시키면 좋을까? 

 

1. First Contentful Paint(FCP)

브라우저가 첫 번째 DOM 콘텐츠를 렌더링 하는 데 걸리는 시간을 측정하는 항목.

이미지나 canvas elements, SVG는 DOM 콘텐츠로 간주된다고 한다

또한 iframe 안의 모든 요소는 DOM 콘텐츠로 간주되지 않는다고 한다

 

이 항목을 보니 이 항목 점수가 낮은지 알거 같다^^...

 

2. Speed Index(SI)

페이지 로딩 중 콘텐츠가 시각적으로 얼마나 빨리 표시되는지를 측정하는 항목.
예를 들면 a,b라는 두 개의 페이지 다 전체 화면이 보이는데 5초가 걸린다고 가정했을 때, 모든 콘텐츠가 보이는 시간은 똑같지만 a라는 페이지에서 일부 콘텐츠가 면에 먼저 표시됨 -> 이런 경우에는 a페이지가 더 빨리 로드된 걸로 계산된다 
 

라이트 하우스에서 페이지가 로딩되는 동영상을 챕쳐해서 아래와 같이 보여준다

처참^^...

 

딱 봐도 느린게 느껴진다 ㅎㅎ...

실제로 배포한 사이트를 들어가 보니 페이지가 바로 보이지 않고 2초 정도 흰 화면이 나온 후 콘텐츠가 보였기 때문에 이 부분은 최적화가 반드시 필요하다

 

3. Lagest Contenful Paint(LCP)
뷰포트에서 가장 큰 콘텐츠 요소(ex: 이미지, 텍스트 등)가 화면에 렌더링되는 시점을 측정하는 항목.

이 항목을 통해 페이지의 주요 콘텐츠가 사용자에게 표시되는 시점을 대략적으로 나타낼 수 있다고 한다

이 부분도 점수가 낮아서 수정이 필요하다^^...

 

4. Total Blocking Time(TBT)

말그대로 사용자의 입력(ex: 클릭, 키보드 입력 등)에 대해 웹페이지가 응답하지 않도록 차단된 총시간을 말하는 항목.
FCP와 TTI 동안 일어난 시간을 측정하고 메인 스레드를 독점해 다른 동작을 방해하는 작업에 걸린 시간을 총합함

 

TTI란?

사용자가 페이지와 상호작용(ex: 클릭, 키보드 입력)이 가능한 시점까지 걸리는 시간을 측정

이 시점 전까지는 화면이 보여도 클릭이나 키보드 입력같은 것들이 동작하지 않음

 

5. Cumulative Layout Shift(CLS)

웹페이지의 시각적 안정성을 측정하는 항목.

사용자가 페이지에 방문한 후 상주한 시간을 모두 측정하고, 해당 시간 동안 페이지 내부에서 발생하는 레이아웃 및 개별적인 레이아웃 요소들의 변화가 몇 번이나 변경되었는지 측정한다. 숫자가 클수록 레이아웃이 많이 변경되었음을 나타낸다. 

이 항목이 있는 이뉴는 팝업과 같이 가독성을 해치는 요소가 얼마나 자주 표시되는지 측정하기 위해서이고, 팝업 등이 많은 뉴스 사이트의 경우 CLS값이 높게 평가됨

점수가 의미하는 것

- 0~49(빨간색): 미흡
- 50~89(주황색) 개선 필요
- 90~100(녹색) 양호

 

공홈에서 말하길 좋은 사용자 경험을 제공하기 위해서는 90~100점을 받기 위해 노력해야 한다고 한다
물론 100점은 힘들 수도 있지만 최대한 녹색 점수 안에 들어오는 점수를 받아야 사용자들이 해당 웹을 사용하기 편하다는 소리겠지?!

 

 

그럼 내 사이트의 검사 점수는...?

 

 

라이트하우스로 검사하는 방법은

1. 크롬 익스텐션으로 설치해서 검사

2. command line으로 설치 후 검사

3. 크롬 개발자도구에 있는 light house로 검사

나는 익스텐션을 깔아두었기 때문에 익스텐션을 통해 모바일로 설정해서 진행했다. 왜냐하면 반응형까지 구현했기 때문이다 

생각보다 좋은 점수를 받은 거 같지만 퍼포먼스와 접근성 부분에서 고쳐야할 점이 많다

일단 LCP는 바로 처음 나오는 텍스트 애니메이션과 네온사인 박스가 문제인 거 같은데(추측) 매트릭스별로 하나씩 뜯어보겠다

참고로 라이트하우스에서는 DIGANOSTICS라고 진단을 내려주는데 어떻게 개선하면 최적화할 수 있는지를 알려준다

 

일단 퍼포먼스 부분에서 FCP에 관한 DIAGNOSTICS는 아래와 같다

 

와! 고칠 게 산더미다! 재밌겠다!(흑흑)

 

 

이미지에 관한 것과 자바스크립트, 사용하지 않는 CSS에 관한 내용들이 주된 내용들인데 먼저 처음 항목을 보자면 다음과 같다

 

 

첫 번째는 JPEG나 PNG 말고 최신 이미지 포맷인 WebP나 AVIF를 사용하라는 진단이었다

can i use를 찾아보니 WebP의 경우 아래와 같이 익스플로어를 제외한 곳에서 거의 다 지원을 했다

WebP 지원 브라우저

그런데 사파리의 경우 사라피 14~15의 경우에는 지원을 하지만 MacOS인 빅서 11가 있어야 한다고 한다

이놈의 사파리...

 

AVIF 지원 브라우저

 

AVIF같은 경우에는 WebP보다는 지원되는 곳이 더 적었다

can i use의 설명에 의하면 AVIF가 WebP보다 더 압축률이 좋은 거 같은데 호환성을 생각해 보면 WebP가 더 나은 거 같기도 하다

 

 

두 번째로는 이미지 크기 관련 이슈이다

데이터를 절약하고 로딩 시간을 개선하기 위해 적절한 크기의 이미지를 제공하라고 한다

어랏 로고 크기는 생각 못했네

 

 

세 번째는 이미지를 최적화시켜 효율적으로 이미지를 인코딩해라는 말이었다

이미지 관련해서 최적화를 안 했더니 자꾸 이미지 관련 이슈가 나오네...ㅎ

 

 

네 번째로는 자바스크립트 크기를 축소시키면 파싱 시간과 페이로드 사이즈를 줄일 수 있으니까 고쳐라라는 항목이다

근데 저 크롬 익스텐션은 뭐지...? 좀 찾아봐야겠다 -> 저 익스텐션의 정체는 번역을 위해 설치한 익스텐션인 DeepL이었다... 허허허

사용하지 않는 CSS를 줄이라는 내용이다 

근데 이것도 내가 사용 중인 DeepL 때문이었다 아니... 이걸 끄고 검사했어야 했는데 ㅎ...

여하튼 다른 부분을 고쳐보고 디플을 끈 채로 다시 검사를 해보면 알 듯하다

 

그럼 두 번째 매트릭스인 LCP 부분에서 고쳐야 할 점은 뭘까?
FCP와 고쳐야 할 부분은 동일한데 하나가 더 추가되었다

바로 내가 예상한 대로 초기 렌더링시 나오는 텍스트에 관한 내용이었다

 

 

TTFB랑 와우 렌더 딜레이 시간 실화인가?

::before이라는 가상요소는 텍스트 애니메이션 다른 거 만들다가 필요 없어서 지웠는데 왜 안 지워져 있지...?

여하튼 이 부분을 고치면 LCP 부분에서도 최적화 가능할 듯

 

세 번째 매트릭스인 TBT에서 고쳐야 할 점은 아래와 같다

메인 스레드 작업을 최소화하라는 내용이다

왜냐면 자바스크립트는 싱글 스레드니까 메인 스레드를 오래 차지하고 있는 작업이 있다면 해당 시간 동안 렌더링이 중단되어 사용자가 콘텐츠를 보기까지 지연이 생기기 때문이다 

위의 항목을 천천히 보고 하나씩 고쳐야겠다

 

마지막 매트릭스인 CLS에서는 어떤 부분을 고쳐야 할까?

이미지의 height와 width를 명시적으로 정하라고 한다

이상하다...? 분명 설정해 준 거 같은데...?

 

 

---

 

light house를 통해 최적화할 부분을 검사해 보고 어떤 부분을 고쳐야 할지 살펴보았다

고쳐야할 부분이 많지만... 그래도 내 뜻대로 고쳐지면 재밌을 듯

현업에선 어떻게 최적화할지 궁금하지만 일단 내가 할 수 있는 만큼 최적화해보고 싶다