콘텐츠가 포함된 최대 페인트 요소 시간 줄이는 방법

by

사이트 로딩이 느려서 PageSpeed Insights 웹 페이지 속도 측정 사이트를 이용하여 점검 후 확인 해보니 LCP 성능이 낮게 나온것을 확인하였습니다. 구글 콘텐츠가 포함된 최대 페인트 요소 시간 줄이는 방법을 질문하여 기록하였습니다.


콘텐츠가 포함된 최대 페인트 요소(LCP, Largest Contentful Paint) 시간을 줄이기 위해서는 여러 가지 최적화 기법을 적용할 수 있습니다. LCP는 사용자가 페이지를 로드할 때 주요 콘텐츠가 화면에 렌더링되는 시간을 측정하므로, 이를 줄이기 위한 방법은 다음과 같습니다.


이미지 최적화

  • 이미지 크기를 줄이고, 적절한 포맷(JPEG, PNG, WebP 등)을 사용합니다.
  • <img> 태그에 width와 height 속성을 명시하여 브라우저가 이미지를 적절히 배치할 수 있도록 합니다.
  • Lazy loading을 사용하여 화면에 보이는 시점에만 이미지를 로드합니다.
<img src="example.jpg" alt="Example Image" width="600" height="400" loading="lazy">


텍스트 파일 최적화

  • CSS와 JavaScript 파일을 압축하고 최소화(minify)합니다.
  • 필요 없는 CSS와 JavaScript 코드를 제거합니다.
  • 중요한 CSS를 인라인으로 작성하여 초기 렌더링에 필요한 CSS를 빠르게 로드합니다.
<style>
  /* Critical CSS */
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
</style>


서버 응답 시간 단축

  • 서버의 응답 시간을 줄이기 위해 캐싱을 사용합니다.
  • CDN(Content Delivery Network)을 사용하여 사용자와 가까운 서버에서 콘텐츠를 제공받습니다.


폰트 최적화

  • 웹폰트를 사용 시, font-display: swap을 설정하여 폰트가 로드될 때까지 시스템 폰트를 사용합니다.
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}


자바스크립트 최적화

  • 필요하지 않은 자바스크립트 파일은 비동기 로드하거나 지연 로드합니다.
  • <script> 태그에 defer 또는 async 속성을 추가하여 페이지 로드에 방해되지 않도록 합니다.
<script src="example.js" defer></script>


브라우저 캐싱 활용

  • 캐시 만료 헤더를 설정하여 브라우저가 리소스를 다시 다운로드하지 않도록 합니다.
Cache-Control: max-age=31536000


HTML 구조 최적화

  • 중요한 콘텐츠를 페이지 상단에 배치하여 사용자가 빠르게 볼 수 있도록 합니다.
  • 콘텐츠 로딩 우선순위를 조정합니다.

위의 방법들을 적용하면 LCP 시간을 단축하고, 웹페이지의 초기 로드 성능을 개선할 수 있습니다. 코드 수정 시에는 변경 전후의 성능을 측정하여 최적화 효과를 확인하는 것이 좋습니다.

Leave a Comment