✨ 개요
얼마 전 릴리즈한 프로젝트 '트위터 명함'의 성능을 Google Lighthouse로 측정해보기로 했다.
트위터명함은 Next.js로 만든 사이드 프로젝트이다.
메인 페이지의 성능을 측정해봤을 때, 결과는 아래와 같았다. 성능(Performance)이 36점으로 가장 좋지 않았고, 그 다음으로는 접근성(Accessibility) 부분에서 개선할 점이 있었다.
이부분을 팀원과 함께 개선해보기로 했다!
성능을 측정한 사이트: https://twitter-namecard.vercel.app/
👏 접근성 개선하기
글자 색상 변경하기
먼저 lighthouse에서 제안한대로 글자 색상을 바꿔보기로 했다. 배경색과 글자색이 비슷해서 사용자가 읽기 어려울 가능성이 있다고 한다.
기존에는 배경색이 흰색에, 글자색은 아래와 같았다. 이렇게 했을 때 접근성 테스트를 통과하지 못했다.
그래서 글자색을 더 진한 색으로 바꿨다. 이렇게 해서 접근성은 95점 -> 100점이 되었다.
유저 피드백 반영하기
div 대신 button, Link 사용하기
접근성은 100점이 되었지만, 성능을 측정하기 이전에 유저의 피드백을 받아 접근성을 개선한 경험이 있어 그부분도 함께 다뤄보려고 한다.
공유하기, 다운로드, 수정하기, 삭제하기나 SNS 아이디 부분을 Tab으로 진입할 수 있게 div에서 button, Link 등으로 바꿔달라는 피드백을 받았다.
그래서 Next.js에서 페이지간 이동을 지원하는 Link 태그를 사용하는 것으로 변경하였다.
이미지의 alt 속성 더 구체화하기
이미지의 alt 속성을 더 구체화했다. 기존에는 모든 명함 이미지의 alt가 '명함 이미지'였는데, 더 구체화하면 좋겠다는 피드백을 받아 '각 명함 닉네임의 명함 이미지'로 변경했다.
🙌 성능 개선하기
성능을 개선하기 전에, 성능(Performance) 부분은 36점으로 가장 낮았다. 성능을 측정하기 전에도 성능이 좋지 않을 거라는 예상을 했는데, 실제로 메인 페이지의 로딩이 느렸기 때문이다.
기존에는 메인 페이지에서 모든 데이터(명함 데이터 200여 개)를 한번에 불러오고 있었는데 페이지네이션이 구현되어 있지 않았다. 그래서 페이지네이션 기능이 구현되면 성능이 좋아질 거라고 예상돼서 팀원분이 무한스크롤을 가장 먼저 구현해주셨다.
그 이후 36점에서 84점으로 성능이 큰 폭 향상되었다!
🔮 더 개선하고 싶은 부분
성능을 84점 이상으로 더 개선하고 싶다. 어떤 부분에서 감점이 되었나 보니 아래와 같은 문제가 있었다. 이후에 이 부분을 개선해서 점수를 올려보고 싶다.
