지난 포스팅에서 Lighthouse 측정 결과 및 해설, 그리고 결과 공유방법을 작성했습니다.
[React] Lighthouse 최적화_(1)
Lighthouse 최적화 시작하기어제 드디어 팀프로젝트가 끝났습니다..!!!사실 협업의 전반적인 전략, 네이밍, 소통 등 규칙이나 흐름에 집중하느라기술적으로 특별히 내세울만한 프로젝트는 아니라
ok-frontdev.tistory.com
지난 측정 결과를 토대로, 팀원들과 성능 최적화를 시도해봤습니다.
대체 텍스트와 meta 태그, robots.txt 파일은 팀원분들이 해주셨고,
저는 Performance 항목에서 경고가 뜨고 있었던
LCP 개선과 안쓰는 JavaScript 코드 줄이기에 대해 찾아 개선해봤습니다.
개선 결과
Before
After
따-란 !
휴.. 결과를 비교하니 뿌듯하네요.
먼저 SEO 최적화를 다루고, Performance 항목에 대해 알아보겠습니다.
1. SEO + Accessibility(접근성) 개선
우선 검색엔진에 크롤링 되려면 대체 텍스트와 meta 태그, robots.txt 파일이 필요합니다.
이미지 태그는 alt 속성에 대체 텍스트를 작성하여 정보를 제공하고,
meta 태그는 og:title, og:description 등의 og 태그 설명과
name="description" 으로 홈페이지 설명을 추가하는 등으로 정보를 제공합니다.
robots.txt 파일은 root > public 경로에 생성했고,
다음과 같이 작성하여 모든(*: 와일드카드) 웹 크롤러(User-agent)에게
루트 파일 경로를 크롤링하도록 허용했습니다.
User-agent: *
Allow: /$
허용하고 싶지 않은 페이지가 있다면, Disallow 속성으로 경로를 지정할 수 있습니다.
예를 들어, 다음과 같이 작성하면 전체 사이트를 크롤링하지 못하게 하되,
루트 페이지만 크롤링 가능하도록 허용할 수 있습니다.
User-agent: *
Disallow: /
Allow: /$
이렇게까지 개선하고 나면, 접근성도 어느정도 개선이 됩니다.
그리고 남은 접근성 수치는 배경색/전경색 대비 비율로 개선했습니다.
위 경고를 보시면 회색 텍스트, 빨간 텍스트,
그리고 배경 색의 대비가 4.5:1 보다 낮다는 의미입니다.
저 화면에서 Learn how to privide sufficient color contrast 를 클릭하시면,
색조 대비 비율이 얼마인지 자동으로 계산해주기 때문에
조절하면서 확인해보시면 쉽게 맞추실 수 있습니다 !
이렇게 접근성까지 100점을 달성하고,
딱 보고 이해가 어려웠던 Performance 개선에 들어갑니다.
2. Performance : LCP / Reduce unused JavaScript
Performance 항목에서 가장 점수가 낮았던 수치는 LCP 입니다.
LCP는 페이지 로딩 성능을 측정하는 핵심 지표로,
Largest Contentful Paint element 란 말 그대로 가장 큰 컨텐츠 요소를 의미합니다.
즉, LCP는 사용자가 페이지를 로드할 때
가장 큰 시각적 콘텐츠 요소가 화면에 렌더링되는 시간을 측정합니다.
이는 텍스트 블록, 이미지, 비디오, 기타 블록 요소(div, section, article) 등을 포함합니다.
이미지나 비디오는 크기를 조정하거나 이미지에 lazy를 사용하여
지연 로딩을 시킬 수 있습니다.
또한, 텍스트는 'font-display: swap'을 'font-face'에 추가해,
폰트가 로드되기 전에 시스템 폰트를 먼저 표시하는 최적화가 가능합니다.
저희는 텍스트 블록(p)이 걸렸는데, 해당 블록은 api 데이터라서
서버에서 처리하지 않는 이상, 응답 속도 개선은 어려웠습니다.
그래서 해당 블록이 사용자의 시야에서, 그리고 페이지 내에서
가장 큰 요소가 되지 않도록 해당 데이터 상단에 제목을 추가하였고,
해당 블록은 폰트 사이즈를 1.3rem -> 1.2rem 으로 살짝 줄였습니다.
물론 'font-display: swap'도 추가해 주었습니다 !
그리고 나서 결과가 87 -> 97점이 나왔습니다.
추가로, Reduce unused JavaScript 개선에 대해서도 찾아보았는데,
네.. 화살표 함수도 축약형으로 쓰거나,
불필요한 코드를 늘리지 말라는 의미인 것 같습니다.
이 부분은 전체 페이지를 뜯어봐야 하기 때문에,
각자 맡은 페이지를 찬찬히 보기로 하고
결과지는 여기까지 기록해두었습니다. :)
++ 개발(dev)모드에서 Lighthouse 결과
재배포를 하기 전에 개발모드에서 성능 측정을 진행했더니,
Performance가 55점이 나왔어요...!!
놀라서 검색해보니 개발모드에서는 이런저런 테스트와
오류 측정을 위한 제약이 있어서 성능이 저하된다고 합디다.
너무 놀라지 마시고 배포한 뒤에 다시 검사하시길 권장합니다.
배포 후 검사하니, 제대로 97점이 나왔습니다.
아, 저희는 PC와 Tablet을 타깃으로 한 프로젝트라
Desktop 기준으로 측정했는데, Mobile 은 점수가 더 엄격하다고 하네요.
다음에는 모바일로도 측정해봐야겠습니다.