Lighthouse(Opportunities를 통해 최적화하기)

Naver의 성능을 측정해 보았다.

• Serve images in next-gen formats( 차세대 형식으로 이미지 제공)
  : JPEG 2000, JPEG XR, Webp와 같은 이미지 형식을 사용하면 PNG 또는 JPEG보다 압축률이 높으므로 속도가 빠르고 데이터 소비량도 줄어든다.
• Properly size images(적절한 크기의 이미지)
  : 반응형 이미지를 사용한다.
• Efficiently encode images(이미지를 효율적으로 인코딩)
  : 페이지가 더 빨리 로드되고 더 적은 데이터를 사용하도록 이미지를 최적화한다.
  • 이미지 수동 압축
  • 이미지 CDN 사용
    : 방문자의 뷰포트에 맞게 크기가 조정되며 방문자에게 가장 가까운 지리적 위치에서 제공되는 이미지를 제공할수 있다.
    (이미지 CDN이란, 서버로 부터 이미지를 불러오면 image를 크게 하거나, 줄여주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법)
• Eliminate render-blocking resources(렌더링 차단 리소스 제거)
  • 모든 <script> 및 <link>태그를 맨 아래로 이동: 리소스가 페이지 하단에 있는 경우 마지막으로 구문 분석되어 초기에 발생할 수 있는 차단을 제거한다.
  • 비동기 또는 지연 속성 추가: 태그에 aysnc 또는 defer을 추가한다.
    ex) <script defer src="pic.js"></script>
    (*스크립트가 aysnc또는 defer 속성과 함께 작동하도록 설계되었는지 이해해야 한다.)

‣그 외 Performance의 Opportunities

• Use video formats for animated content( 애니메이션 콘텐츠에 비디오 형식 사용)
  : MPEG4/ WebM 비디오를 사용하면 파일 크기가 크게 줄어들고 사용자의 대역폭을 크게 절약할 수 있다.

• Avoid multiple page redirects(여러 페이지 리디렉션 피하기)
  (리디렉션이란, 출력의 방향을 바꾸는것)
  : 플래그가 지정된 리소스에 대한 링크를 리소스의 현재 위치로 지정한다. 중요한 렌더링 경로에 필요한 리소스에서 리디렉션을 피하는 것이 중요한다.

• Defer offscreen images(오프스크린 이미지 연기)
  (오프스크린 이미지란, 사용자가 보고 있는 화면에 보이지 않는 이미지)

  1. 페이지에 lazysizes 스크립트 추가: 사용자가 페이지를 스크롤 할때 이미지를 지능적으로 로드하고 사용자가 곧 보게될 이미지의 우선순위를 지정한다.
     ex) <script src="lazysizes.pic.js"></script>
  2. 지연 로드할 이미지 표시(lazyload 추가)
     ex) <img data-src="pic.png" class="lazyload">

• Enable text compression(텍스트 압축 활성화)
  : 텍스트 기반 리소소의 파일크기/ 페이로드를 줄여 전송되는 데이터의 양을 줄인다.

• Preconnect to required origins(필수 오리진에 사전 연결)
  : <link rel="preconnect">로 원본에 대한 연결을 설정하려고 하며 가능한 한 빨리 프로세스를 시작하기를 원한다고 브라우저에 알린다.