ururl.me 성능에 대해

1차 배포 후 성능에 초점을 맞춰 개선을 하려한다.

성능 테스트

Lighthouse를 통해 웹 성능 테스트 및 개선 방향을 잡고 개선해 나아가려한다.

1. 로딩 시점에서의 개선

1-1 Reduce unused CSS

사용하지 않는 CSS로 인해 성능 저하가 보여진다고 진단을 받고 이를 개선.

coverage 체크 (command + shift + p 에서 coverage 검색 )

위와 같이 사용하지 않은 css의 용량이 굉장히 크다.
이를 어떻게 줄인 것인가?
=> 라이브러리 이용
찾다 좋은 라이브러리를 발견했다. purgeCSS라는 라이브러리가 불편요한 css를 제거 해주는 역할한다하여 이를 반영하기로 했다.

결과

위와 같이 Total Bytes : 624 576 => Total Bytes : 60 474로 줄어든 것을 볼 수 있다.

시행착오 - 처음 적용했을 때 모달 css가 전부 깨졌다. 그 이유를 보니, 라이브러리에서 별도로 css를 import를 해오는 경우 모든 css를 remove 시켜버려서 깨졌다. 이를 해결하고자 content속성에 해당 라이브러리 css를 추가시켜 주면서 해결.

 

2. 렌딩 시점에서의 개선

1-1 Ensure text remains visible during webfont load

필요한 부분에 있어 폰트를 렌딩해라

이 부분은 라이브러리 쪽에서 사용하는 폰트가 로드를 시킴으로써 따로 설정하기가 어려워 넘겨야했다. 처음에는 override할 생각으로 로컬에서 별도로 link했지만, 무의미해서 돌렸다.

 

추가로, 폰트를 최적하는 방법은 여러 방법이 있다.

local font, Subset, Unicode Range, data-uri 방법이 존재한다.

 

local -  자신의 컴퓨터 폰트를 우선해서 적용시키기 때문에 네트워크를 별도로 타징 않아 훨씬 빠르게 적용이된다.

Subset - 폰트 파일의 경우 모든 글자에 대해 정보를 가지고 있다. 즉, 사용하지 않은 글자에 대한 정보도 가지고 있다는 것이고 이는 불필요한 데이터를 가져오는 상황을 만든다. 이를 해결하고자 자신이 사용하고자 하는 워드에 대해서만 폰트 파일을 만들어 저장시키면 훨씬 효율적으로 간다. 이는 디폴트 폰트의 경우 적용하기는 어려운 부분같다.

Unicode Range - 이는 내가 지정한 unicode에 대해서만 폰트 정보를 fetch해오는 것이다. a라는 유니코드를 적용시키면 font-family를 적용시켜도 오직 a 단어가 있을 때만 fetch해온다.

data-uri - 용량 측면으로 보면 유사하지만, css 부르고 다시 font에 대해 다시 부르는 비효율적인 방법에 대해 개선한 방법이다. css로딩 시점에 폰트에 대한 데이터도 같이 불러오기 때문에 추가로 네트워크 타는 일을 없앤다.

하지만, 모든 폰트에 다 적용하면,  css 가져오는 영역에서 딜레이를 주기 때문에 잘 고려해서 적용하는 것이 좋을 것같다. 

이 이외에 여러 부분을 수정하였다


어려운 부분은 외부 라이브러리를 사용에 따른 커스텀하게 개선시키는 것이 어렵다. 폰트에서도 Pretendard의 용량이 매우 커서 이 부분은 어떻게 할 방법이 없다. swap 옵션 + woff2 다 적용했지만 다른 폰트에 비해 용량이 매우 커서 이쪽에서의 점수를 얻기엔 어려울 듯하다.

Go URURL =>