디자이너를 위한 웹 성능 최적화 기법 (1)

책 - "디자이너를 위한 웹 성능 최적화 기법" 을 읽고 정리하는 포스트 입니다.

페이지 속도의 원리와 프론트단에서 성능 최적화를 해야하는 중요성과  최적화 방법들, 성능 최적화 관련 툴들을 소개 하고 있는데, 새로 알게 된 것들이 많았습니다. html,css 코딩을 하시는 분이라면 한번은 봐야 될 책이라고 생각합니다.

이미지 포맷 고르기

대부분의 사이트에서 페이지 용량의 대부분을 이미지가 차지합니다. 이미지 최적화는 사이트 내의 페이지 로딩 시간을 개선할 때 가장 쉬우면서도 큰 효과를 낼 수 있는 방법입니다.

다음의 작업을 통해서 주요 콘텐츠 이미지 뿐만 아니라 사이트를 구성하는 이미지들도 상당 부분 개선 할 수 있습니다.

1. 각 이미지 파일의 크기와 품질 사이의 균형점 찾기

2. 사이트의 이미지 요청 횟수를 줄일 방법 찾기 

3. 사이트의 이미지 생성 워크 플로를 최적화 하여 성능 개선하기 

1.이미지 포맷을 결정할 때 다음의 질문들을 생각을 해보세요.

- 눈에뛰는 품질 저하 없이 이미지를 압축 할 수있는가?

- 얼마나 많은 색상이 필요한가?

- 이미지를 더 단순하게 할 방법은 없는가?

- 이미지가 투명해야 하는가?

- 애니메이션이 필요한가?

- 이미지가 화면에 표시 될 때 최대 높이와 너비는 어떻게 되는가?

- 사이트에서 어떤 용도로 이미지를 사용할 것인가?

이미지 포맷	모범 사용 예	최적화 방법
jpg	사진, 많은 색이 사용된 이미지	해상도 줄이기, 프로그레시브 JPEG로 내보내기, 이미지 노이즈 줄이기
gif	애니메이션	디더링 줄이기, 색상 수 줄이기, 수평 패턴 사용, 수직 노이즈 줄이기
png-8	적은 색이 사용된 이미지	디더링 줄이기, 색상 수 줄이기, 수평 및 수직 패턴 사용
png-24	일부 투명한 이미지	노이즈 줄이기, 색상 수 줄이기

웹으로 저장하기를 쓰는 이유 ? : 추가적으로 최적화를 적용 할 수 있으며, 이미지의 품질 조정 할 수 있고 미리 볼 수 있습니다.

프로그래시브 jpg 란 ? : 낮은 품질로 한꺼번에 화면에 나타난 후 이어서 점진적으로 높아진 해상도로 대체됨. 전체를 로딩 하는 대신 낮은 품질로 즉시 표현하기 때문에 기본 JPEG 파일보다 빠르게 나타 납니다.

프로그래시브 jpg 단점 : 여러번 스캔하는 프로그레시브 JPEG에서 각각의 스캔은 기본 JEPG 파일 하나를 페이지에 레더링 하기 위해 스캔 하는 것과 같은 수준의 CPU 파워를 소모합니다. 모바일 기기에서는 이러한 부분이 문제 될 수 있습니다.(사파리 모바일 브라우저는 점진적으로 스캔하지 않습니다.) http://www.imgopt.com

다음의 2경우는 gif 포멧으러 선택하는 것이 좋습니다.

GIF 파일의 크기가 PNG-8로 생성한 이미지 파일의 크기보다 작을 때

에니메이션을 CSS3으로 대체 할 수 없을 때

수직으로 된 노이즈를 줄이면 GIF의 파일 크기에 상당히 긍정적인 영향을 줄 수 있다.

PNG 포맷은 흰색, 파란색, 초록색, 빨간색의 4색만으로 내보내기가 된다.

PNG 도 다른 이미지 포멧처럼 크기를 줄이려면 노이즈와 색상 수를 줄이는 것이 좋습니다.

추가적인 이미지 압축도구 : 이미지옵팀 ( https://imageoptim.com )

이미지 요청 대체하기

이미지 요청을 줄일 수 있는 방법 대표적인 2가지

- 스프라이트로 이미지를 합치기

- 이미지 파일을 css3, 데이터 URI, SVG 버전으로 교체하기

CSS 그레이디언트의 특징

- 투명성을 제어 할 수 있다.

- 배경 색상에 오버레이 할 수 있다.

- 이미지 요청 횟 수를 줄일 수 있다.

- 변경이 쉽다. 

※주의 : CSS3를 많이 사용하게 되면 사용자에게 화면이 느리게 보일 수 있습니다.