[10분 테코톡 / 성능개선] "록바의 웹성능 개선하기 - 이미지" 리뷰

🎈개요

 10분 테코톡 에서 발표한 " 발표내용 " 발표를 듣고 강의 내용을 간략히 정리하고, 느낀점과 해야할 일을 적는 리뷰 글입니다.

 

📚강의 내용 정리

왜 이미지를 개선해야 하는가?

• 웹성능(로딩성능과 렌더링 성능) 을 개선해야함
• 이미지의 파일이 웹페이지의 가장 큰 용량을 가짐

 

차세대 이미지 형식 결정하기

• PNG : 무손실 압축 사용, 최고 품질이미지를 제공하나, 크기가 다른 형식에 비해 훨씬 크다
• JPEG : 손실 압축 사용, PNG에 비해 용량이 작다
• WebP : 구글에서 2010년 발표, JPEG보다 더 나은 압축과 더 많은 기능을 제공, 범용성이 더 높다
• AVIF : AOMedia에서 2019년 발표, WebP와 유사하게 높은 압축률 자랑

WebP 사용시 JPG에 비해 35% ~ 65%정도 용량을 줄일 수 있다. 하지만 모든 브라우저에서 사용되지 않는다.

 

그러면 WebP 지원하지 않는 브라우저 → JPEG 사용하고 Webp지원 하는 브라우저⇒ Webp 사용할 수 있을까?

 

Source 중 하나라도 동작하면 그 요소를 사용하므로 Jpg 파일보다 Webp 파일이 더 높은 우선순위를 가진다.

 

적절한 크기의 이미지 사용하기

원본 크기와 렌더링 된 크기가 매우 차이날 수 있다. ⇒ 매우 비효율적이다.

화면의 크기에 따라 렌더링의 이미지가 크기가 달라진다면 어디에 맞춰야하냐? ⇒ srcset와 sizes 속성 사용

• srcset : 브라우저에게 제시할 이미지 목록과 그 크기를 정의한다.
• sizes : 화면 크기에 따른 어떤 이미지 크기가 최적인지 정의한다.

Image CDN

• 이미지 파일을 효율적으로 보내주는 프록시 서버
• 이미지 압축, 최적화 기능 제공

⇒ 효율적으로 이미지 파일을 로딩할 수 있음

 

 

CLS 개선하기

• 이미지의 width와 height가 명시되지 않으면, 추후에 사진이 로딩 됐을 경우, Layout의 변화가 생길 수 있음

⇒ width와 height를 미리 지정해주어서, 레이아웃이 바뀌는 상황을 막을 수 있다.

 

Lazy Loading

수 많은 이미지가 존재할 때 이미지 로딩을 늦춰서 네트워크 대역폭을 유동적으로 이용할 수 있음

• Loading = “lazy” 속성을 통해 레이지 로딩이 가능하다
• Intersection Observer 를 통해 레이지 로딩이 가능하다

이미지 Pre-Loading

한 이미지를 불러오는데 오래 걸린다면, Pre-loading을 적용하여 시각적으로 렌더링을 빠르게 하는 것 처럼 보여줄 수 있다.

클릭했을 경우 이미지를 불러오는 것이 아닌(사진의 첫 번째 호버 핸들러),

이미 로드하여 렌더링 된 것을 보여주는 형식 (사진의 두 번째 클릭 핸들러) 

 

 

 

✨마치며

느낀점

 평소 이미지 최적화를 해야겠다고 생각을 했습니다. 기존 프로젝트 롤 챔피언 정보관리 시스템에서 큰 이미지가 존재하여 LCP가 느리기도 했고, 로딩에 이미지가 크게 차지한다고 느끼고 있었습니다.

 

 그러던 와중에 너무 궁금한 제목이 눈에 띄어서 보게 됐습니다.Image CDN이나 이미지 사이즈 조절 등과 같은 방법에 대해 기대하고 있었습니다.

 

 webp 이미지 형식이 이미지 최적화에 도움이 되고, 마켓 컬리에서 실제로 사용하고 있는 형식인 것을 알게 됐습니다. 또한 srcset이나 sizes 속성을 추후에 적용한다면 디바이스 크기에 따른 이미지 최적화를 적용하면 로딩 성능을 크게 끌어올릴 수 있을 확신이 생겼습니다.

 

내가 해야 할 것

• 기존 프로젝트에 이미지 최적화하기
  • webp파일로 변경
  • 반응형에 따른 이미지 크기 재조정
• 추후 프로젝트에 이미지 최적화 적용
• <picutre> 와 <source> 태그 공부
• srcset 와 sizes 사용법 공부

내가 한 것들 (2023-09-07)

- 기존 프로젝트 이미지 최적화 작업 완료 => 특정 이미지 로딩 성능 42 ~ 67퍼 개선

: https://github.com/TaePoong719/LoL_Champion_Management/pull/4

Refactor: 메인 이미지 최적화 작업 : 특정 이미지 로딩성능 42 ~ 67퍼 개선 by TaePoong719 · Pull Request #4

 

- srcset sizes 공부

: https://heropy.blog/2019/06/16/html-img-srcset-and-sizes/

HTML IMG의 srcset과 sizes 속성(updated)

 

출처

https://www.youtube.com/watch?v=INPldifIEXE