웹 최적화
넷플릭스 웹 최적화(Web optimization) 및 개선사항을 정리합니다.
Chrome의 Lighthouse(웹 품질 개선 자동화 도구)를 사하여 웹 앱의 성능(Performance), 접근성(Accessibility), 최적화(best practice), 검색 엔진 최적화(search engine optimization, SEO) 항목을 검사하 문제점 확인하고 개선한다.
Performance
render-blocking 문제 `CSS`를 컴포넌트 단위로 작업했기 때문에 불러오는데 시간이 걸렸을 뿐, 번들러를 사용하면 해결된다.
HTTP/2 문제 해당 페이지는 웹 서버에 배포하는 페이지가 아니기 때문에 임시적으로는 보안의 과정이 필요하지 않는다.
Accessibility
role="text" 문제 `role="text"`는 문제가 없다. `Lighthouse`에서 사용하는 `axe-core`의 버전이 낮아서 아직 적용이 안됐을 뿐이다. [axe-core의 role="text" 관련된 내용 확인](https://github.com/dequelabs/axe-core/issues/1597)
best practice
HTTPS 문제 HTTP/2 문제와 내용 동일
Performance 개선 내용
이미지 최적화 하기
TinyPNG 도구를 사용해서 사용자의 눈에 보이지 않는 부분의 데이터를 감축시켜 이미지의 용량을 줄여준다.
마크업에 이미지 사이즈 입력하기
Image elements do not have explicit width and height
이미지 또는 동영상에 사이즈를 명시적으로 입력하면 브라우저가 로딩 될때 이미 해당 콘텐츠의 공간을 계산하고 미리 할당하게 된다. 만약 사이즈를 입력하지 않았을 때 해당 콘텐츠를 만나면 다시 사이즈를 계산해야 하기 때문 성능에 영향을 미칠 수 있고 기기 화면의 시각적인 버벅 거림을 나타낼 수 있다. 그렇기 때문에 사이즈를 명시적으로 입력하는 것을 권장하고 있다.
Accessibility 개선 내용
button 요소에 aria-label 적용하기
스크린 리더 사용자에게 해당 버튼의 사용 용도를 간략하게 전달한다.
[MDN]aria-label 속성 사용 ARIA-LABEL 사용하기
render-blocking 문제
Eliminate render-blocking resources
해당 문제는 CSS 파일을 컴포넌트 방법으로 작업을 해서 각각의 파일을 불러오는데 시간이 걸린다는 것이다. 이것은 번들러를 사용해주면 해결되는 문제이다!
글자 색상 대비 문제
처음에 적용했던 색상은 기존의 넷플릭스에서 사용하던 색상이다. 이를 접근성 관점에서 개선하였다.
role="text"가 문제??
role="text"가 문제??role="text"가 문제라는 안내가 떠서 찾아보았다. Lighthouse사 사용하는 툴인 axe-core의 Github에 들어가보았다.
위의 사이트의 내용을 보니 axe-core에서는 사람들의 건의로 role="text"가 접근성에 문제가 되지 않는다라는 것을 인식하고 v4.1.0 적용을 했으나 현재 Lighthouse에서 사용하는 axe-core가 v3.3.0을 사용하고 있어서 role="text"가 문제가 있다고 뜨는 것이다. 즉, role="text"는 문제가 없다.
<span>, <div>을 사용하면 Lighthouse에서 통과가 된다고 한다. → 해봤는데 안된다.
SEC
Search Engine Optimization(검색엔진최적화)는 브라우저에 검색을 했을 때 해당 웹 페이지가 검색결과 상단에 노출될 수 있도록 하는 것이다.
https 보안 개선
우리 사이트는 보안기능을 사용할 수 없기 때문에 이 부분에 대해선 개선이 힘들다.
meta description을 설정해준다.
Document does not have a meta description
Last updated