모모 프로젝트를 리팩토링하고 lighthouse로 성능을 확인해보았다.
Before ➜ After
순서대로 성능 / 접근성 / 웹 표준 사례 / 검색엔진 최적화 이다.
이중 Before에서보면 접근성과 SEO가 낮은 점수를 보여서 이를 중점으로 개선해보려고 한다!
Accessibility : 접근성
웹 접근성이란?
: 장애를 가진 사람들도 웹사이트를 이용할 수 있도록 하는 것
즉, 어느 장애, 제약에도 관계 없이 누구나 접근하여 사용할 수 있도록 하는 것이다.
예를 들어, 시각장애인들은 리더기를 통해 웹을 인식하는데 이 리더기는 HTML 태그들로부터 정보를 인식한다고 한다. 그래서 시멘틱 태그를 통한 명시가 도움이 된다. 또한 청각 장애인을 배려하여 자막 제공이나 대체 텍스트 제공도 접근성을 향상시키는 방법이다.
그럼, 어떻게 적용할 수 있을까?
lighthouse 점수를 눌러보면 친절히 감점된 요인들을 알려준다! 이에 맞춰서 해결해보았다.
- alt속성으로 대체 텍스트 명시
- ul > li 태그를 사용한 목록
ul 태그 하위의 목록으로 li를 쓰기를 권장한다.
- 시멘틱 태그
화면 레이어를 구성하는 의미있는 이름의 태그이다. 위의 그림처럼 각각의 영역의 역할을 직관적으로 알 수 있다. 덕분에 가독성과 접근성을 향상시킬 수 있고, 아래 나올 SEO에도 도움이 된다!
SEO : 검색 엔진 최적화
Search Engine Optimization으로 말그대로 검색 엔진이 이 웹사이트를 상위에, 많이 노출시킬 수 있도록 주어진 규격을 잘 맞춰야 합니다.
- 시멘틱 태그
위에서 언급했덧, 시멘틱 태그를 사용하면 SEO를 향상시킬 수 있다.
무의미한 div로 모두 사용했던 코드를 시멘틱 태그를 사용하여 레이아웃을 직관적으로 두었다.
어렵지 않은 부분인데, 개발하다보면 쉽게 놓치기에 꼼꼼함이 필요하겠다!
- Links are not crawable
팀원분이 소개해주신 해결방법! useNavigate()를 통해 라우트를 이동시키던 코드를 react-router-dom의 Link 태그로 감싸주는 방식을 사용하여 해결
- 유효한 robots.txt 파일
meta 태그 설정
이미 적용해놓은 부분이긴하지만, SEO 향상의 기본이다!
기본적인 예시로 다음과 같다
<meta name="description" content="서비스소개" />
<meta name="keywords" content="관련 키워드 나열" />그 결과,
다섯번째로 등장 ㅎㅎ 물론,, '모두의 모임 모모'라고 전부 입력해야하지만..
'웹 표준과 접근성을 고려한 개발'이란 말을 많이 듣고 알고 있었지만, 개발할 때 바로바로 신경쓰지 못함을 반성했다..
겸사겸사 웹 표준과 접근성 개념에 대해 다시 공부할 수 있었다!
성능 개선을 위한 코드 스플리팅, 그 외의 방법들을 더 공부해봐야징
