블로그 사이트 최적화

1. LightHouse 툴을 활용한 페이지 검사

• Category

  • 무엇을 위한 검사를 할지 항목을 선택 가능

• Device

  • 기기를 선택할 수 있음.
    • Mobile
    • Desktop

• Plugins

  • 커스텀 플러그인 세팅 가능

• Generate Report

  • 성능 검사를 완료하면 아래와 같이 보여준다.
  • 1.METRICS - 검사의 지표를 통해 성능을 확인할 수 있다.
  • 2.스크린 샷으로 랜더링된 페이지 목록을 볼 수 있다.
  • 3.Opportunities - 리소스의 관점에서 로딩 성능 최적화에서 어느 부분을 개선할 수 있을지 문제점과 문제점의 해결 방안을 제시해 준다.
  • 4.Diagnostics - 페이지의 실행 관점에서 렌더링 성능 최적화에서 문제점과 해결 방안을 제시해 준다.
  • 

2. Opprtunities 항목을 통한 최적화

• 이미지 사이즈 최적화를 먼저 보겠다.
• 아래의 이미지들을 보면 상당히 크기가 크다.

• 이 아래의 이미지를 보면 랜더링된 이미지는 고작 120 120이지만 불러온 이미지의 크기는 1200 1200임을 알 수 있다.
• 넓이로 따지면 100배 정도는 더 크다.
• 그러므로 120 * 120 크기의 이미지를 사용하는 것이 옳은가?
  • 해상도에 따라서 더 많은 픽셀을 요구할 수 있으므로 2배 정도 크기를 사용해보자.

• 아래와 같이 API를 통해 이미지의 주소를 가져온다.
• 이런 경우에는 이미지를 줄이기 쉽지 않다.
  • 이미지 CDN을 활용해 해결한다!

CDN이란?

Contents Delivery Network의 약자로 물리적 거리의 한계를 극복하기 위해 소비자(사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술

ex) 미국 원본 서버에서 미리 한국 서버에 이미지를 복사해두면, 사용자가 요청할 때, 미국으로 요청을 보내지 않아도 된다.

image CDN이란?

image processing CDN

Image CDN은 기본적인 CDN 개념과 이미지 처리 과정을 거쳐 사용자에게 전달하는 과정이다. 사이즈, 포맷 등을 모두 처리할 수 있다.

http:cdn.image.com?src=[img src]&width=200&height=100

위와 같이 사용할 수 있다. 원본 이미지 소스를 width: 200, height: 100으로 가공하는 소스이다.

• Imagix와 같은 사이트에서 최적화 소스 솔루션을 제공한다.