TIL 118일차

오늘 이미지 성능 개선에 대해 공부를 하였습니다... jpg, svg, png 등등 여러개 파일이 있는데 각각에 대해 아직 부족해서 공부를 좀더하고 정리를 해야할 거 같습니다. 그리고 내일은 mock데이터를 사용하여 임시데이터로 무한스크롤을 구현해 볼 생각입니다.!

트러블 슈팅

1. 문제점

   • 로그인 페이지에 배경 svg 파일이 처음 불러올때 처음 하얀 화면에서 몇 초뒤 배경이 나타나는 상황이 발생
     

2. 문제 인지

   • svg 파일은 복잡할 수록 이미지 처리 속도가 느려 질수 있다고 알게됨

   • jpg로 파일을 변경하는게 좋다고 판단 하여 jpg를 사용하였지만 사진이 조금 깨짐이 발생

3. 문제 해결

   • webp라는 형식에 대해 알게 되었고 jpg와 png 장점을 모두 가지고 있으며 단 하나의 단점으로 브라우저 지원 범위가 한정적이지만 성능면을 보고 webp를 사용하게 됨

   • picture 태그를 사용하여 source에 webp 형식을 부여하고 img에는 jpg를 부여하여 webp에 지원이 되지 않을땐 jpg가 나타나게 하였습니다.

   • 네트워크 탭에서도 콘텐츠 다운로드 속도를 2밀리초로 줄였습니다.