최적화의 방법

파일 다운로드 시간과 브라우저에 화면을 그리는 시간을 줄일수록 최적화가 더 우수하다.

이를 위해서는 아래와 같은 사항을 준수해야 한다.

• 파일의 용량을 줄여 가능한한 빠르게 다운로드가 이뤄져야 한다.
  또한 이미지의 크기, 확장자를 바꾸는 것으로 많은 용량을 줄일 수 있다,
• 여러 페이지에 걸쳐 사용되는 파일을 캐싱한다.
  캐싱을 해두면, 기존의 이미지를 새로 요청하지 않고, 로컬에 다운받았던 이미지를 그대로 사용한다.
• 첫 인상이 중요하므로, 초기 화면에 필요한 파일만 다운로드 하며, 뷰포트외의 이미지는 다운로드를 지연시킨다. ( lazy loading )
• 이미지 다운로드를 뒤로 미뤄서 CSS 파일을 더 빨리 다운로드시킨다.
  화면에 올바른 컨텐츠의 배치를 위해서는 css 가 빨리 html과 합쳐저 렌더링 되야한다.

이외에도 많은 사항이 존재한다.
작은 사항을 지킬수록 더 큰 성능 향상을 기대할 수 있다.

이미지

• picture, source 로 이미지 확장자 선택

 <picture>
     <source type="image/webp" srcset="images/lecture/lecture1.webp" />
      <img
          class="card-image"
          alt="비전공자를 위한 개발자 취업올인원 가이드"
          src="images/lecture/lecture1.jpg"
          loading="lazy"
      />
  </picture>

최신 브라우저와 호환이 가능한 저용량의 성능이 좋은 확장자의 이미지를 우선적으로 호출하도록한다.

• 게으른 로딩

	<img
          class="card-image"
          alt="비전공자를 위한 개발자 취업올인원 가이드"
          src="images/lecture/lecture1.jpg"
          loading="lazy"
      />

loading이라는 어트리뷰터에 lazy라는 값을 설정하면, 스크롤에 의해 뷰포트가 해당 이미지 근처로 이동하면 그때서야 이미지를 요청해서 불러온다.

• 이미지 스프라이트 기법

이미지의 요청을 줄이기 위해 아이콘 등의 이미지를 한 이미지에 넣고, 이를 사용하는 이미지의 위치 값 설정으로 각각 다른 아이콘을 보여줄 수 있다.
요청을 가급적 줄이는 것이 성능 최적화 관점에서 좋다.

웹팩

파일의 용량을 줄일 수 있고, 번들링을 통해 하나의 파일로 만들어 요청의 개수를 줄일 수 있다.

참고 : https://velog.io/@bumsu0211/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95%EA%B3%BC-%EC%B5%9C%EC%A0%81%ED%99%94#%EC%B5%9C%EC%A0%81%ED%99%94-%EC%A0%90%EC%88%98-%EC%B8%A1%EC%A0%95