세리프 따라잡기
이미지로 웹 성능 개선할 수 있을까 본문
이미지는 굉장히 무거움
즉, 이미지 크기 및 로딩을 개선하면 말 그대로 웹 성능이 높아짐
- lighthouse로 로딩 성능 및 렌더링 성능을 체크해 볼 수 있음
[다만 네트워크 등의 다른 문제로 점수가 다르게 나올 때가 있다~]
webp는 생소한 사람들이 많을 것 같은데,
사진처럼 구글이 출시한 jpg보다 압축률이 더 좋은 이미지 파일 형식
그럼 webp를 쓰는 게 제일 좋겠네? 싶지만~
문제는 webp를 모든 브라우저에서 지원해주지 않는다.
즉, webp가 생소한 이유는 모든 브라우저에서 지원해주지 않는 파일 형식을 웹 사이트를 구축할 때 덜 고려하기 때문
[당연하다]
그래서, 이미지를 필요한 만큼만 쓰는 게 중요한데
실제로 많이 쓰이는 유용한 3가지로 함축하면 sprite, cdn, lazy-loading인 것 같다
sprite
스프라이트(sprite)는 컴퓨터 그래픽스 용어로 비트맵 이미지나 애니메이션을 합성하는 기술을 뜻한다.
웹에서 이미지 스프라이트란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 것을 의미
즉, 여러 사진들을 붙여서 하나의 이미지를 만든다는 것이다.
- 원리
이미지 스프라이트는 이미지의 정확한 width, height를 알아야 하고, 스프라이트 이미지 내의 position 값도 알아야 한다.
그리고 적절한 background-position값과 width, height값을 적용하면 필요한 이미지만을 출력할 수 있다.
- 장점
1. 여러 이미지를 하나의 이미지로 줄였기에, 서버에 요청수를 줄여 로딩 시간을 단축할 수 있다.
2. hover 시 나타나는 이미지의 경우, 이미 스프라이트 이미지를 로딩했기에 로딩 지연이 없다.
3. 스프라이트 이미지 파일만을 관리하기에 관리에 용이하다.
- 단점
1. 스프라이트 이미지에서 사용하려는 이미지의 정확한 position을 알아야 한다.
2. 스프라이트 이미지 내 이미지를 변경해야 할 시 단일 파일보다 번거롭다.
견해:
일단 현업에서 쓰기 시작하면, 단점1은 문제가 되지 않는다. 라이브러리가 잘 되어 있다.
단점2도 사실상 처음 구축할 때를 말고는 해결하기 쉬운 단점이다.
cdn
CDN(Content Delivery Network)은 지리적으로 분산된 서버들을 연결한 네트워크로서 웹 컨텐츠의 복사본을 사용자의 가까운 곳에 두거나 동적 컨텐츠(비디오 등)의 전달을 활성화하여 웹 성능 및 속도를 향상할 수 있게 하는 걸 말한다.
cdn을 이용하면 각 서버는 호스트 서버에 있던 웹 컨텐츠(HTML 파일, 이미지, 오디오, 비디오, 애플리케이션 등) 일부의 복사본을 저장하거나 캐싱하여 로딩 시간을 단축하고, 대역폭 소비 및 비용을 관리할 수 있다.
이렇듯, it기업에서 cdn은 필수불가결하게 사용하고 있다.
lazy-loading
'Study' 카테고리의 다른 글
| 브라우저 동작 원리 및 렌더링 & 리페인트/리플로우 (0) | 2024.04.29 |
|---|---|
| normalize vs reset css 란 (0) | 2024.03.31 |
| 크롬 오류 해결 방법 (2) | 2022.06.24 |
| aws 인스턴스 및 탄력적 주소 해제 (0) | 2022.05.27 |
| 인터넷활용 1, 2, 3 (0) | 2021.04.13 |
