Lighthouse 실습
사이트를 검사하여 성능 측정을 할 수 있는 도구인 Lighthouse로 내가 자주 사용하는 velog 사이트에 사용해봤다.
Lighthouse 분석 결과
웹 성능을 측정하는 Performance 항목과 웹 표준 모범 사례를 잘 따르고 있는지 확인하는 Best Practices 항목, 검색 엔진 최적화가 잘 되었는지 확인하는 SEO 항목에서는 모두 높은 점수가 나왔지만, 웹 접근성을 의미하는 Accessibility 항목에서는 67점이 나온 것을 확인할 수 있었다.
개선 방향 잡기
이를 어떻게 개선하여 최적화를 할 수 있을지 Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있다.
-
Properly size images 와 Serve images in next-gen format는 이미지 사이즈를 최적화하라는 의미를 가지고 있고, 가져오는 이미지의 용량보다 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻으로 받아들일 수 있다.
-
Use video formats for animated content 의 경우는 큰 GIF는 애니메이션 콘텐츠를 전달하는 데 비효율적이라는 의미를 가지고 있다.
위에서 살펴본 문제들은 아래 적힌 해결방안을 통해 최적화 시킬 수 있다.
images - 해결 방안
1. 반응형 이미지 사용
브라우저의 크기에 맞춰 여러 개의 이미지 파일들을 제공하는 반응형 이미지를 사용하기
2. WebP 또는 AVIF 이미지 포맷 사용하기
이미지 최적화를 위해 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하기
3. CDN 사용하기
서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 변환을 위탁해 원하는 형태로 이미지를 바꿔 사용하기
video - 해결 방안
애니메이션은 MPEG4/WebM 사용
대용량 GIF를 동영상으로 변환하면 사용자의 대역폭을 크게 절약할 수 있기 때문에 MPEG4 혹은 WebM을 사용하여 GIF를 비디오로 변환하기
