크롬 Dev 서밋에서 발표한 내용입니다. 빠른 웹사이트를 만들기 위해 기억해야 할 3가지 항목인 이미지, 웹 폰트, 그리고 자바스크립트에 대해 어떻게 활용하고 응용해야 하는지 잘 짚어준 영상인거 같습니다. 로딩 속도를 줄이기 위한 최신 기술에 대한 부분 등에 대한 얘기들도 있으니 한번쯤 보시는 걸 추천합니다.
- 이미지는 포맺과 압축 그리고 정확한 디스플레이 사이즈 등 사용
- 애니메이션 GIF를 사용하는것보다 비디오 포맺을 사용할 것
- ffmpeg -i filename.gif filename.mp4 방식으로 컨버팅할 것
- GIF 태그를 비디오 태그로 변경 할 것
- WebP라는 모던 이미지 포맺을 사용할 것(현재 크롬과 마이크로소프트 앳지 브라우져에서 지원) WebP 포맺은 JPEG 또는 PNG 포맺보다 25~35% 정도 파일 사이즈를 줄일 수 있음
- WebP를 사용하면 로딩 속도를 30% 정도 줄일 수 있음
- AV1 비디오 포맺을 사용할 것VP9에 비해 30% 빠름
- 멀티플 이미지 사이즈를 지원할 것. px 대신 w 포맺을 이용할 것
- Lazy Loading 기술을 이용할 것. 크롬에서 향후 네이티브 Lazy Loading을 탑재할 계획
- 이 외에도 유용한 자바 스크립트 관련 유용한 얘기들도 많습니다.
특히 비디오 후반에 나오는 유니클로가 페이지 로딩 속도를 2초 줄여서 바운스 레잇이 14% 줄어들고 사이트에 머무르는 시간이 31% 향상되고 페이지뷰가 25% 늘어난 결과가 시사하는 바는 큰거 같습니다.