LCP 최적화 2.5초 초과 문제 해결 7가지 방법

LCP최적화 사용자 경험은 느린 서버 응답시간, 랜더링차단 Javascript 및 Css, 리소스 로드 시간, 클라이언트 측 렌더링 시간에 영향을 받는다고 하고 있다. 모바일에서 로드하는데 LCP 2.5초 초과 문제가 발생하는 경우 LCP를 최적화하려면 가장 큰 요소의 로딩 속도를 개선하여야 한다.

 

LCP(Largest Contentful Paint)는 웹 사이트 또는 애플리케이션의 사용자 경험을 측정하는 데 중요한 지표로서 가장 큰 요소의 로딩 속도를 측정하는 지표이다. LCP 최적화 2.5초 초과 문제 해결 방법에 대하여 알아보겠다.

 

LCP최적화 2.5초 초과 문제 해결 7가지 방법

 

 

LCP최적화 2.5초 초과 문제의 해결 방법은 이미지 최적화, Javascript 및 css파일 최소화, 지연로딩 사용, 스코롤 브라우저 캐싱활용, 서버응답시간 단축, AMP사용을 통하여 가능하다.

 

1. 이미지 최적화

이미지 최적화는 웹 페이지의 로딩속도를 개선하는 방법 중 하나로서 품질 저하 없이 이미지를 압축하여 파일 크기를 줄여야 한다. 이미지가 크면 웹 페이지 로딩 속도가 크게 느려질 수 있기 때문이다. 다음은 로딩 시간을 줄이는 데 도움이 되는 이미지를 최적화하는 5가지 방법이다.

 

• TinyPNG, Kraken.io 또는 Compressor.io와 같은 이미지 압축 도구를 사용하여 품질 저하 없이 이미지 파일 크기를 줄인다.
• 올바른 이미지 파일 형식 사용을 사용한다. JPEG는 색상이 많은 사진 및 이미지에 이상적이며 PNG는 로고 및 일러스트레이션과 같이 색상이 적은 이미지에 가장 적합하다.
• 업로드하기 전에 적절한 크기로 이미지 크기를 조정한다. Adobe Photoshop, GIMP 또는 Canva와 같은 이미지 편집 도구를 사용하여 이미지 크기를 조정할 수 있다.
• 사용자 화면 크기에 맞게 이미지가 조정되는 반응형 이미지 사용은 로드 데이터 양을 줄여준다. HTML 그림 요소 또는 srcset 속성을 사용하여 웹사이트에 반응형 이미지를 구현한다.
• 한 번에 로딩하는 대신에 필요할 때만 로딩하여 웹 페이지 초기 로드 시간을 줄이는데 도움이 되는 지연 로딩을 사용한다. lazysizes 또는 Intersection Observer API와 같은 JavaScript 라이브러리를 사용하여 지연 로드를 구현할 수 있다.

위와 같은 방법으로 이미지를 최적화하면 페이지의 로딩 속도를 크게 개선하고 방문자의 사용자 경험을 향상할 수 있다.

 

2. JavaScript 및 CSS 최소화

JavaScript 및 CSS 파일도 웹 페이지의 로딩 속도를 저하시킬 수 있으므로 로딩 속도 개선을 위해서는 JavaScript 및 CSS 파일 크기를 줄여 최소화하는 것이다. 파일을 최소화하려면 불필요한 코드를 제거하고 파일을 압축하여 크기를 줄인다.

다음은 JavaScript 및 CSS 파일을 최소화하는 5가지 방법이다.

 

• JavaScript 및 CSS 파일을 최소화하는 방법 중 하나는 주석, 공백 및 사용하지 않는 코드를 포함 불필요한 코드를 제거하는 것이다. CSSNano 및 UglifyJS와 같은 도구를 사용하면 불필요한 코드를 자동으로 제거할 수 있다.
• 여러 CSS 및 JavaScript 파일을 단일 파일로 결합하면 웹 페이지를 로드하는 데 필요한 HTTP 요청 수를 줄이는 데 도움이 될 수 있다. Gulp 또는 Grunt와 같은 도구를 사용하여 파일을 연결하고 축소할 수 있다.
• Sass 및 Less와 같은 CSS 전처리기를 사용하면 보다 효율적인 모듈식 CSS 코드를 작성할 수 있다. 또한 주석 및 공백 제거와 같은 CSS 파일을 최소화하기 위한 내장 기능도 있다.
• JavaScript 파일을 비동기적으로 로드하면 웹 페이지 다른 리소스의 로드를 차단하지 않도록 할 수 있다. async 속성을 사용하면 스크립트를 비동기적으로 로드할 수 있다.
• 초기 페이지 로드 후까지 중요하지 않은 JavaScript 파일 로드를 연기하면 웹 페이지의 인식되는 로딩 속도를 향상할 수 있다. defer 속성을 사용하면 스크립트 로드를 연기할 수 있다.

CSS 및 JavaScript 파일을 최소화하여 웹 페이지의 크기를 줄이고 방문자의 로딩 속도를 향상할 수 있는 것이다.

 

3. 지연 로딩 사용

지연 로딩을 사용하면 이미지와 동영상을 한 번에 모두 로드하지 않고 필요할 때만 로드할 수 있다. 지연 로딩은 페이지에서 가장 큰 요소의 로드 시간을 줄일 수 있어 웹 사이트 성능을 개선하고 LCP 시간을 줄일 수 있다.

웹 페이지 로딩 속도를 개선하고 초기 로딩 시간을 줄이는 지연 로딩 구현 단계는 다음과 같다.

 

• lazysizes, lozad.js 및 Intersection Observer API와 같은 웹 사이트에서 지연 로딩을 구현하는 데 도움이 되는 많은 JavaScript 라이브러리가 있다. 필요에 맞는 라이브러리를 선택하여 사이트에 통합을 한다.
• 라이브러리를 선택한 후 웹 페이지에 지연 로딩 스크립트를 추가한다. 스크립트를 다운로드하여 사이트에 수동으로 추가하거나 콘텐츠 전송 네트워크(CDN)를 사용하여 스크립트를 호스팅 할 수 있다.
• 지연 로딩을 구현하려면 이미지 요소에 특정 속성을 추가하여 HTML을 수정해야 한다. 예를 들어 이미지의 URL을 포함하는 이미지 요소에 data-src 속성을 추가하는 것이다. JavaScript에서 쉽게 선택할 수 있도록 이미지 요소에 클래스 또는 ID를 추가할 수도 있다.
• HTML을 수정했으면 JavaScript 코드에서 지연 로딩 라이브러리를 초기화한다. 이는 라이브러리에서 제공하는 특정 함수나 메서드를 호출하여 수행할 수 있다. 예를 들어 lazysizes를 사용하면 lazysizes.init() 메서드를 호출하여 라이브러리를 초기화할 수 있다.
• 지연 로딩을 구현한 후 페이지를 테스트하여 예상대로 작동하는지 확인한다. 브라우저 개발자 도구를 사용하여 네트워크 요청을 확인하고 이미지가 필요할 때만 로드되도록 할 수 있다. 성능을 향상하기 위해 필요에 따라 구현을 구체화한다.

지연 로딩을 구현하면 웹 페이지의 로딩 속도를 개선하고 방문자에게 더 나은 사용자 경험을 제공할 수 있을 것이다.

 

4. 스크롤 없이 볼 수 있는 콘텐츠 우선순위 지정

스크롤 없이 볼 수 있는 콘텐츠에 우선순위를 지정하면 체감되는 로딩 속도와 전반적인 사용자 경험과 참여를 개선할 수 있다. 스크롤 없이 볼 수 있는 콘텐츠는 화면에 표시되는 콘텐츠이다.

다음은 중요한 콘텐츠를 먼저 로드하고 중요하지 않은 콘텐츠는 연기하는 콘텐츠의 우선순위를 지정하는 방법이다.

 

• 웹 페이지에 명확한 시각적 계층 구조를 설정하여 사용자의 관심을 가장 중요한 콘텐츠로 안내한다. 이는 더 큰 글꼴 크기, 볼드체 및 이탤릭체 텍스트, 대비되는 색상, 공백의 전략적 사용을 통하여 할 수 있다.
• 접힌 부분 위에 중요한 콘텐츠를 배치한다. 헤드라인 및 기본 클릭 유도문안과 같은 가장 중요한 콘텐츠를 스크롤 없이 볼 수 있는 부분에 배치하여 사용자가 즉시 볼 수 있도록 하는 것으로 '접힌 부분'은 웹 페이지에서 스크롤하지 않고 볼 수 있는 부분이다.
• 이미지를 최적화하여 빠르게 로드하고 중요한 콘텐츠를 스크롤 없이 볼 수 없도록 한다.
• 웹 페이지가 반응형이고 다양한 화면 크기에 적응하는지 확인한다. 이렇게 하면 더 작은 화면에서 중요한 콘텐츠를 계속 볼 수 있고 가로 스크롤이 필요하지 않기 때문이다.
• CSS 및 JavaScript 파일과 같은 중요한 리소스가 먼저 로드되는지 확인한다. 다른 리소스가 계속 로드되는 동안 사용자가 중요한 콘텐츠를 볼 수 있기 때문이다.

스크롤하지 않고 볼 수 있는 콘텐츠의 우선순위를 지정하면 웹 페이지에서 사용자 경험과 참여를 개선하여 전환율을 높이고 방문자에게 전반적인 경험을 향상할 수 있는 것이다.

 

5. 브라우저 캐싱 활용

정적 리소스의 만료 날짜를 설정 캐시를 활용하면 사용자 브라우저가 리소스를 로컬에 저장하고 더 빠르게 검색할 수 있어 웹 사이트 성능을 크게 향상할 수 있다. 이미지, CSS 및 JavaScript 파일을 사용자의 브라우저 캐시에 저장 HTTP 요청 수를 줄이고 전송해야 하는 데이터 양을 최소화하여 웹 페이지의 로딩 속도를 개선할 수 있는 것이다. 다음은 브라우저 캐싱을 사용하는 몇 가지 단계이다

 

• 사용자의 브라우저가 업데이트를 확인할 시기를 알 수 있도록 리소스의 만료 날짜 또는 시간을 설정한다. 리소스의 HTTP 헤더에서 만료 날짜를 설정할 수 있다.
• 캐시 제어 헤더를 사용하여 사용자의 브라우저가 리소스를 캐시해야 하는 기간을 지정한다. 리소스의 HTTP 헤더에서 캐시 제어 헤더를 설정할 수 있다.
• 콘텐츠 전송 네트워크(CDN) 사용은 전 세계 여러 위치에 리소스를 배포하여 대기 시간을 줄이고 웹 페이지의 로딩 속도를 향상시킬 수 있다. CDN은 또한 캐싱을 사용하여 사용자의 브라우저 캐시에 리소스를 저장한다.
• 여러 리소스를 단일 파일로 결합하고 CSS 스프라이트를 사용하고 이미지를 최적화하여 요청 수를 최소화한다.
• 브라우저 개발자 도구를 사용하여 웹 페이지를 테스트하여 캐싱이 예상대로 작동하는지 확인한다. 성능 향상을 위해 필요에 따라 캐시 설정을 최적화해야 한다.

브라우저 캐싱 사용은 웹 페이지의 로딩 속도를 크게 개선하고 방문자에게 더 나은 사용자 경험을 제공할 수 있는 것이다.

 

6. 느린 서버 응답 시간 단축

느린 서버 응답 시간은 웹사이트 로딩 속도에 상당한 영향을 미치므로 서버 응답 시간을 줄이는 것은 웹 페이지의 전체 로딩 속도를 개선하는 데 중요다. 서버 구성을 최적화하고, HTTP 요청 수를 최소화하고, 콘텐츠 전송 네트워크(CDN)를 사용하여 사용자에게 더 가까운 콘텐츠를 배포하여야 한다. 다음은 서버 응답 시간을 단축하는 6가지 방법이다.

 

• 콘텐츠 전송 네트워크(CDN) 사용을 한다. CDN은 콘텐츠를 전 세계 여러 위치에 배포하여 대기 시간을 줄이고 서버 응답 시간을 개선할 수 있다.
• 압축, 캐싱을 활성화하고 Apache 또는 NGINX와 같은 고성능 웹 서버 소프트웨어를 사용하여 서버 구성을 최적화한다.
• 여러 리소스를 단일 파일로 결합하고 CSS 스프라이트를 사용 이미지를 최적화하여 HTTP 요청 수를 최소화한다.
• 코드를 최적화하고 캐싱과 더 빠른 데이터베이스를 사용하여 서버 측 처리 시간을 줄인다.
• Varnish 또는 Memcached와 같은 캐싱 계층을 사용하여 자주 액세스하는 데이터를 캐시하고 서버 부하를 줄인다.
• New Relic 또는 Google PageSpeed ​​Insights와 같은 도구를 사용하여 서버 성능을 모니터링하고, 성능을 향상하기 위해 필요에 따라 서버 설정을 최적화한다.

서버 응답 시간을 단축하여 웹 페이지의 전반적인 로딩 속도를 개선 방문자에게 더 나은 사용자 경험을 제공할 수 있다.

느린 서버 응답시간 단축을 위해 가장 먼저 해야 할 일은 서버에서 콘텐츠를 처리하는 방법과 위치를 개선하는 것이다. time to first byte(TTFB 최초바이트까지의 시간)로 서버응답시간을 측정한다. TTFB 개선 방법은 서버 최적화, 사용자를 가까운 CDN으로 라우팅, 자산캐시, HTML페이지 캐시 우선제공, 서명된 교환 사용, 조기에 타사 연결 구축이다.

 

<head>

<link rel= "preconnect" href="https://******. com" /> → rel="preconnect"를 사용하여 페이지가 최대한 빨리 연결을 구축할 것임을 브라우저에 알린다.

<link rel= "dns-prefetch" href="https://******. com" /> → dns-prefetch를 사용하여 DNS조회를 더 빠르게 해결할 수도 있다.

</head>

두 가지는 다르게 작동하지만 preconnect를 지원하지 않는 브라우저에 대한 대체로 dns-prefetch를 사용할 수도 있다 [출처:https://web.dev/optimize-lcp]

 

7. AMP(Accelerated Mobile Pages)를 사용하면 웹사이트 성능을 개선하고 LCP 시간을 줄일 수 있다. AMP는 휴대기기에서 웹페이지를 더 빠르게 로드하는 것을 목표로 하는 Google 프로젝트이다. AMP는 모바일 장치에서 빠르게 로드되는 모바일 친화적인 웹 페이지를 만들 수 있는 프레임워크로서 다음은 AMP를 사용하는 단계이다.

 

• AMP 버전을 만들 페이지 선택: AMP 페이지는 블로그 게시물, 뉴스 기사 및 제품 페이지와 같은 콘텐츠 페이지에서 작동하도록 설계되었다.
• AMP HTML 페이지 만들기: AMP 페이지는 일부 제한 사항과 추가 태그가 있는 특수한 유형의 HTML을 사용한다. 새 AMP 페이지를 처음부터 만들거나 기존 페이지를 AMP 버전으로 변환할 수 있다.
• AMP 라이브러리 포함: AMP 라이브러리에는 AMP 페이지가 작동하는 데 필요한 모든 구성 요소와 템플릿이 포함되어 있다. 페이지의 헤드 섹션에 스크립트 태그를 추가하여 AMP 라이브러리를 포함할 수 있다.
• AMP 구성 요소 추가: AMP 구성 요소는 기능을 추가하기 위해 AMP 페이지에 추가할 수 있는 사전 빌드된 요소이다. 이미지, 동영상, 양식, 소셜 미디어 공유 버튼과 같은 구성 요소를 추가할 수 있다.
• AMP 페이지 유효성 검사: 마지막 단계는 AMP 페이지가 AMP 사양을 충족하는지 확인하기 위해 유효성 검사를 수행한다. AMP 검사기 도구를 사용하여 페이지의 유효성을 검사하고 AMP 호환인지 확인할 수 있다.

AMP 페이지가 생성되고 검증되면 웹사이트에 게시할 수 있고, AMP 페이지를 Google에 제출하여 Google의 AMP 검색 결과에 표시되도록 할 수도 있다. AMP 페이지는 Google에서 캐시 하므로 휴대기기에서 로드 속도를 개선할 수 있는 것이다.

 

 

이상 LCP최적화 2.5초 초과 문제의 해결 방법은 이미지 최적화, Javascript 및 css파일 최소화, 지연로딩 사용, 스코롤 없이 볼 수 있는 콘텐츠에 우선순위 지정, 브라우저 캐싱활용, 서버응답시간 단축, AMP사용에 대하여 알아보았다.

 

모바일에서 로드하는 데 2.5초가 걸리는 LCP 문제가 발생하는 경우 LCP 개선하는 방법 LCP 최적화 기술을 구현하면 페이지에서 가장 큰 요소의 로드 속도를 개선할 수 있어 전반적인 사용자 경험을 개선하고 더 나은 LCP 점수를 얻을 수 있을 것이다.