lighthouse에 대해 배운 이후 바로 실무에 적용해보았다. 우선 가장 중요한 사이트인 wow-metaverse쪽으로 들어갔다.
권장사항이 100이었지만 나머지는 넘어야 할 산들이 많아보였다. 추천을 읽으면서 하나씩 수정해나보자!
성능
성능 면에서는 텍스트 압축이 가장 큰 부분을 차지했다. 내가 텍스트 관련 내용을 저렇게 많이 넣었나? 싶어서 찾아보니 react-icons 라이브러리가 문제였다. 사용하지 않는 자바스크립트 또한 react-icons 라이브러리 문제였다.
문제를 확인한 후 react-icons에 대해 조사해보니 이 라이브러리는 한번 불러낼 때 모든 리소스들을 불러낸다고 한다. 그렇기에 이를 실제 사용하는 아이콘만 가져오는 해당 라이브러리의 개선 버전으로 대체하였다.
// 이전
import { BsPencilSquare as EditIcon} from 'react-icons/bs'
// 이후
import { BsPencilSquare as EditIcon} from '@react-icons/all-files/bs/BsPencilSquare'행복한 마음으로 lighthouse를 찍어보았다. 그런데 1.6초정도 좋아졌음에도 불구하고 성능개선에 전혀 초록빛이 돌지 않았다... 다시 확인해보니 이번에는 mui가 문제인것 같다.
chatGPT도 활용해보고 MUI 공식 홈페이지에도 들어가보았으나 추천에는 방법을 찾을 수 없었다.
접근성
접근성의 문제는 크게 두가지가 있었다.
우선 첫번째는 이미지에 alt를 넣지 않았던 나의 습관 문제였다. 그 다음 링크에 인식 가능한 이름이 어떤것인지 조사해보았는데 title을 붙이면 해결이 된다고 한다.
그 후 나온 문제인
[user-scalable="no"]이(가) <meta name="viewport"> 요소에서 사용되거나 [maximum-scale] 속성이 5보다 작음
은 시키는 대로 meta tag를 조정하여 변경하였다.
그 결과 42점이던 접근성이 93점으로 크게 증가하였다.
다시 성능으로..
접근성 문제를 포기하려던 찰나 아래로 살짝 내려보니 텍스트 WOFF 크기 자체가 문제인것을 알 수 있었다. 서칭 결과 노토산스KR의 경량화 버전을 찾을 수 있었고 바로 실행에 옮겼다.
텍스트 압축 사용이 감소하고 페이지로드의 크기가 22,000KB에서 11,000KB로 줄었음에도 성능 점수는 1점도 변하지 않았다. 아쉽지만 이 이상 고치기는 힘들 것 같아 여기서 마무리하였다.
회고
lighthouse를 처음 쓰기에 굉장히 낯설것이라 생각했지만 의외로 해야할 길을 잘 제시해주어서 헤메지는 않았다. 나머지 페이지들 또한 이런 방식으로 하나씩 고쳐나가야겠다.
참조
