.gif?type=w773)
xoxo는 모바일웹에서 사용하는 사진위주 SNS 서비스 입니다.
이런 특성상 긴 로드시간은 사용자 이탈에 가장 큰 영향을 끼칠 것이라고 생각했습니다.
그렇기 때문에 프론트엔드에서는 로드시간에 가장 큰 영향을 미치는 이미지 최적화에 큰 관심을 두고 프로젝트를 진행하게 되었습니다.
사용자들은 포스팅을 작성할 때 최대 10개의 사진을 업로드 할 수 있습니다.
10개의 사진을 처음부터 로드하는 것은 사용자에게 보여지지 않을 수 도 있는 이미지를 로드하는 것 이기 때문에 서버 비용이 상대적으로 더 발생하고, 페이지 로드시간에 영향을 미칩니다.
이러한 점에서 Image lazy-loading 기법을 사용하게 되었습니다.
하지만 미처 원본 사진을 다운로드 하지 못했을 때, 페이지가 빈 img태그를 보여주는 현상이 발생할 수도 있습니다. 이러한 점을 보완하기 위해 LQIP 기법을 사용하게 되었습니다.
페이지 안에 있는 이미지들이 실제로 화면에 보여질 필요가 있을때 로딩할 수 있도록 하는 기법입니다.
현 시점에서 불필요한 이미지의 로딩을 뒤로 미루는 것입니다.
장점