[FE] 당근 플래너의 모바일/웹 페이지 성능 최적화 하기!

안녕하세요. 당근플래너 팀 프론트엔드를 맡은 강산입니다. 😊

당근 플래너는 좀 더 편한 유저 경험을 제공하기 위해 웹 페이지의 성능과 접근성을 최적화하였습니다! :)

저희는 ligth house라는 google chrome 툴을 사용하여 웹 페이지의 성능과 접근성의 점수를 측정하였습니다!

성능 개선 전

성능 개선 전에는 모바일에서 성능과 접근성이 너무 좋지 않았습니다. 😭

모바일 성능이 25라니 처참..

성능

도메인 주소를 입력하여 사이트에 접속하고 웹페이지가 로딩되어 내용을 볼 수 있을 때까지 걸린 시간

 

사이트의 속도에 신경 써야 하는 이유

속도가 빠르면 방문자가 늘어나는 효과를 볼 수 있습니다.

구글 검색 로직에서 사이트 속도가 빠른 웹 페이지를 검색 우선순위에 올려주기 때문에

사이트 속도는 구글 검색 노출 순위에도 영향을 미칩니다.

또한 방문자의 이탈율도 낮춰 줄 수 있습니다.  

 

1. 이미지 형식을 WebP로 변경

🟡 성능 저하 원인

전통적인 이미지 포맷인 PNG, JPEG 이미지 사용으로 인해 이미지 로딩 속도가 느린 문제

 

🟢 개선 방안

이미지의 로딩 속도를 향상시키기 위해서 사이트 공통으로 뜨는 이미지들을  압축률이 높은 차세대 이미지 형식 Webp 형식을 적용

png -> webp 이미지 형식 변경

2. 웹 폰트 설정 변경

🟡 성능 저하 원인

글꼴은 로드하는 데 시간이 걸리는 대용량 파일임

이를 처리하기 브라우저는 글꼴이 로드 될 때까지 텍스트를 숨기는 FOIT 현상이 생김

 

🟢 개선 방안

font-display swap을 설정 

웹 폰트가 로딩되기 전까지 fallbalck 포트로 글자를 보여주도록 수정

 

3. 모든 이미지요소에 width, height 명시

🟡 성능 저하 원인

이미지의 가로 세로 크기 누락

 

🟢 개선 방안

사용된 모든 이미지를 화면 크기에 맞도록 이미지의 크기를 변경

4. 사용하지 않는 자바스크립트 줄이기

🟡 성능 저하 원인

React는 기본적으로 SPA이다. 하나의 파일에 모든 로직이 담기게 되는데 이에 따라 최초 로딩이 시간이 길어짐

당장 화면에 필요하지 않은 components들도 가져오면 성능이 저하됨

🟢 개선 방안

초기 렌더링에 사용되지 않는 컴포넌트를 추후에 사용될 때에 동적으로 불러올 수 있는 React.lazy 메서드를 이용

이러한 Lazy 컴포넌트들은 Suspense로 감싸서 로딩이 될 때, fallback 컴포넌트가 보이도록 처리

 

---

접근성

접근성은 다양한 사람들이 이용하는 웹의 특성을 염두에 두고, 누구나 동등하게 이용할 수 있게 하는 것 이다.

 

 

1. 확대 축소 허용

🟡 접근성 저하 원인

확대/축소 기능을 지원하지 않았음

시각장애인 및 고령자들을 위한 웹 접근성 표준 지침에 어긋남

🟢 개선방안 

확대/축소 기능을 허용

 

2. 이미지 요소에 alt 속성 부여

🟡 접근성 저하 원인

이미지 요소에 alt 태그가 누락

alt 속성은 만약 시각 장애인이 어떠한 이미지를 클릭한다면 이미지를 설명해 주는 글이 음성인식기를 통해 나오는데 이때 이미지를 설명해 주는 글의 역할을 해주는 속성

🟢 개선방안 

이미지 요소에 alt 태그 속성을 부여

 

3. 버튼/링크에 접근 가능한 이름 붙이기

🟡 접근성 저하 원인 

버튼이나 링크에 접근 가능한 이름이 없어 인식하기 어렵고 고유하지 못한 버튼과 링크가 됨

🟢 개선방안

버튼, 링크에 aria-label을 이용해서 접근 가능한 이름을 부여

---

성능 / 웹접근성 개선 후

성능 개선 후 데스크탑 기준 150%, 모바일은 무려 300% , 웹 접근성은 100점으로 향상되었습니다!! 😝

 

 

이렇게 간단한 작업들만으로도 웹의 성능과 접근성을 향상시킬 수 있습니다 :)

 

유저가 더욱 더 편리한 당근플래너를 사용 할 수 있도록, 앞으로도 계속해서 노력해 나가겠습니다!