우수한 소프트웨어와 실용적인 튜토리얼
완벽한 LCP 최적화 플러그인인 WP Meteor는 LCP 최적화 방법을 자세히 설명합니다.
LCP 최적화 이를 통해 검색 엔진에서 웹사이트의 가시성을 높여 더 많은 트래픽을 얻을 수 있습니다.LCP 최적화 가장 쉬운 방법은 설치하는 것입니다 WP 유성 ,이것플러그인클릭 한 번으로 LCP 속도를 최적화하고, JS 파일 로딩을 지연하는 등의 작업을 할 수 있습니다. WP Meteor는 복잡한 설정 없이 간단한 버튼 하나로 바로 사용할 수 있으며, 사용하기 쉽고 초보자에게도 매우 적합합니다. 아래에서는 여러 가지 LCP 최적화 방법을 자세히 소개합니다.
사용WP 플러그인LCP 최적화 후 LCP 인덱스가 2.5 미만인 경우, 플러그인에서 WP Meteor를 검색하여 설치하세요. WP Meteor는 페이지 속도를 최적화하는 완전히 새로운 방식입니다. 다음을 포함한 기존 최적화를 기반으로 실행할 수도 있습니다.
- 자동 최적화
- WP 로켓
- WP 토탈 캐시
- WP 슈퍼 캐시
- LiteSpeed 캐시
LCP 최적화를 위한 여러 가지 방법
- 가장 큰 콘텐츠 페인트(LCP)는 페이지에서 가장 큰 상단 요소가 로드되는 데 걸리는 시간을 측정합니다.
- 사이트의 LCP를 줄이면 사용자가 사이트의 필수 콘텐츠를 더 빨리 볼 수 있습니다.
- PageSpeed Insights의 진단 섹션에서는 LCP 지표를 트리거하는 요소가 무엇인지 보여줍니다.
DevTools의 성능 패널도 똑같은 작업을 수행합니다.
페이지의 LCP 시간을 개선하려면 해당 요소의 로딩 시간을 최적화해야 합니다. LCP 인덱스를 개선하는 다섯 가지 효과적인 방법을 소개합니다. 이는 FCP, CLS, TTI 점수 향상에도 도움이 됩니다.
LCP 최적화, LCP 시간을 개선하는 방법
1. 이미지 최적화
이미지 최적화는 모든 부하 지표를 개선하고 레이아웃 변경(CLS)을 줄이는 기술 집합입니다. 이미지 압축은 이보다 훨씬 더 중요한 부분입니다. 압축은 다양한 알고리즘을 적용하여 이미지의 일부를 제거하거나 그룹화하여 이미지 크기를 줄이는 것을 의미합니다. 압축에는 손실 압축과 무손실 압축, 두 가지 유형이 있습니다.
- 손실 압축파일에서 일부 데이터가 제거되어 품질이 낮은 밝은 이미지가 생성됩니다. JPEG와 GIF는 손실된 이미지 유형의 예입니다.
- 무손실 압축거의 동일한 이미지 품질을 유지합니다. 즉, 데이터를 삭제하지 않습니다. 고용량 고품질 이미지를 생성합니다. RAW와 PNG는 무손실 이미지 형식입니다.
이를 위해 다음과 같은 훌륭한 도구가 많이 있습니다.이미지민또는옵티미질라.
또한 웹사이트가 성장함에 따라 더 많은 이미지를 추가하게 될 가능성이 높습니다. 이미지를 필요한 수준으로 자동 최적화해 주는 도구가 필요합니다.
올바른 형식을 선택하세요
이미지 형식을 선택할 때 까다로운 점은 품질과 속도의 균형을 찾는 것입니다. 고화질 이미지는 용량이 크지만 보기에는 좋습니다. 저해상도 이미지는 보기에는 형편없지만 로딩 속도는 빠릅니다.
사진이나 패션 웹사이트처럼 경쟁에서 돋보이기 위해 고화소 이미지가 필요한 경우도 있습니다. 뉴스 웹사이트나 개인 블로그 등의 경우에는 저화소 이미지도 괜찮습니다. 다음은 참고할 수 있는 간단한 규칙입니다.
- 로고와 같은 간단한 기하학적 모양으로 구성된 이미지에는 SVG를 사용하세요.
- 품질을 유지하면서 속도를 희생하는 경우 PNG를 사용하세요.
- 품질과 UX의 균형을 최적화하려면 WebP를 사용하되, 원본 형식을 대체 형식으로 유지하세요. WebP는 브라우저에서 100%를 지원하지 않기 때문입니다.
이미지 유형을 선택한 후에는 사진을 압축해 보는 것을 잊지 마세요.
srcset 속성 사용
이미지 작업 시 흔히 저지르는 실수는 모든 기기 크기에 동일한 큰 이미지를 제공하는 것입니다. 큰 이미지는 작은 기기에서는 보기 좋지만, 탐색 속도가 매우 느립니다.
더 나은 접근 방식은 브라우저가 다양한 이미지 크기를 볼 수 있도록 제공하는 것입니다.장비에 따라어떤 것을 사용할지 결정하세요. srcset 속성을 사용하여 제공할 이미지의 다양한 너비를 지정하면 됩니다. 예를 들어 다음과 같습니다.
보시다시피 srcset에는 px 대신 w를 사용합니다. 이미지 너비를 600px로 지정하려면 600w라고 입력해야 합니다. 다시 말해, 이 방식은 이미지 크기 선택을 브라우저에 위임하는 방식입니다. 사용자는 옵션만 제공하면 됩니다.
Airbnb 웹사이트에서는 다음과 같은 접근 방식을 사용합니다.
적절한 이미지 크기를 결정할 때 Google 애널리틱스를 사용하여 데스크톱이나 모바일을 통해 사이트에 접속하는 잠재고객의 비율을 계산해 보세요. 기기 보고서에는 방문자가 사용하는 특정 기기에 대한 심층적인 정보도 포함되어 있습니다.
DevTools를 사용하여 다양한 뷰포트에서 이미지가 어떻게 보이는지 확인하는 것도 좋습니다.
이미지 크기를 조정해야 할 때 사용하세요스마트 크기 조정일괄 크기 조정.
WordPress 사용자를 위한 참고 사항:4.4 버전부터 WP는 자동으로 여러 버전의 이미지를 생성합니다. 또한 srcset 속성도 추가되었습니다. WordPress 사용자라면 올바른 이미지 크기를 제공하세요.
영웅 이미지 미리 로드
마지막 팁은 영웅의 브라우저 검색을 최적화하는 것입니다. 이미지의 속도. 이미지는 대개 위쪽에 위치하는 것이 가장 효과적이므로, 이미지를 더 빠르게 로딩하는 것이 사용자 경험에 중요합니다.
Forbes는 홈페이지에 가장 큰 폴더블 이미지를 미리 로드합니다.
이 기술은 브라우저가 페이지를 렌더링할 때 특정 이미지의 우선순위를 정하도록 합니다. 사전 로드는 LCP를 크게 향상시킬 수 있으며, 특히 다음과 같은 히어로 이미지를 로드하는 페이지에서 더욱 그렇습니다.
- 자바스크립트;
- CSS의 배경 이미지 속성.
2. CSS 및 JavaScript 최적화
브라우저가 페이지를 렌더링하려면 먼저 HTML을 파싱하는 동안 발견되는 모든 CSS 및 JavaScript 파일을 로드, 파싱, 실행해야 합니다. 이것이 CSS와 JavaScript가 기본적으로 렌더링을 차단하는 이유입니다. 최적화하지 않으면 페이지 로드 속도가 느려지고 LCP에 문제가 발생할 수 있습니다. 최적화 방법은 다음과 같습니다.
- 축소및 압축된 코드 파일
최소화는 코드 파일에서 주석, 공백, 줄 바꿈 등 불필요한 부분을 제거합니다. 이를 통해 중소 규모의 파일 크기를 줄일 수 있습니다. 반면, 압축은 다양한 알고리즘을 적용하여 파일의 데이터 양을 줄입니다. 일반적으로 파일 크기를 크게 줄여줍니다.
두 기술 모두 성능 측면에서 필요합니다.호스팅 회사그리고CDN 제공업체이러한 기술은 기본적으로 적용됩니다. 웹사이트에 구현되어 있는지 확인하는 것이 좋습니다.
DevTools의 네트워크 탭을 사용하여 파일의 응답 헤더를 분석하면 이것이 사실인지 확인할 수 있습니다.
대부분의 축소된 파일에는 이름에 ".min"이 포함됩니다. . 압축 파일에는 Content-Encoding 응답 헤더가 있습니다.일반적으로 gzip 또는 br 값을 가집니다.
사이트 파일이 최소화 또는 압축되지 않았다면 지금 바로 시작하는 것이 좋습니다. 호스팅 업체나 CDN 제공업체에 이러한 작업을 대신 해 줄 수 있는지 문의해 보세요. 그렇지 않다면, 다양한 축소 및 압축 도구가 있습니다.
중요한 CSS 구현
중요한 CSS를 구현하는 과정은 다음 3단계로 구성됩니다.
- 다양한 뷰포트에서 접힌 부분 위의 콘텐츠 스타일을 위한 CSS를 찾으세요.
- CSS를 페이지의 head 태그에 직접 삽입합니다(인라인).
- 나머지 CSS를 연기합니다.
DevTools의 Coverage 패널을 사용하여 페이지에서 각 CSS 파일의 사용량을 계산할 수 있습니다.
자산을 유형별로 정리하고 각 CSS 및 JS 파일을 찾아볼 수 있습니다.
당연히 페이지에서 사용되지 않는 CSS는 중요하지 않습니다. 이 시점에서는 렌더링 속도를 저하시킬 수 있으므로 사용되지 않는 CSS를 제거하거나 줄이는 것이 좋습니다.
다음으로, 중요한 CSS를 추출하려면 코드를 직접 검사하거나 도구를 사용해야 합니다. 이 작업에 적합한 두 가지 옵션은 다음과 같습니다.크리티컬CSS그리고비판적인.
추출된 중요한 CSS는 페이지의 헤드 태그에 삽입됩니다.
마지막으로 나머지 CSS를 비동기적으로 로드합니다.Google 제안link rel="preload" , as="style" , 빈 onload 핸들러를 사용하고 스타일시트에 대한 링크를 noscript 요소에 중첩합니다.
또한, 서로 다른 뷰포트를 고려해야 합니다. 데스크톱 사용자와 모바일 사용자는 동일한 상단 콘텐츠(Above the fold)를 보지 않습니다. 이 기법을 최대한 활용하려면 기기 유형에 따라 서로 다른 주요 CSS를 사용해야 합니다.
더 작은 JavaScript 페이로드 제공
JavaScript는 웹 로딩 속도를 느리게 만드는 주요 원인 중 하나입니다. 이미지와 마찬가지로, 최상의 성능을 위해서는 사이트의 JavaScript를 최적화해야 합니다.
LCP의 경우,JavaScript 번들 분할점수를 높이는 좋은 방법입니다. 초기 경로에 필요한 코드만 전송하는 것이 핵심입니다. 초기 번들에 포함되지 않은 코드는 나중에 제공해야 합니다. 이렇게 하면 한 번에 파싱하고 컴파일해야 하는 JavaScript가 줄어듭니다. 이를 위한 대표적인 도구로는 WebPack, Rollup, Browserify가 있습니다. 코드 분할에 대한 자세한 내용은 다음을 참조하세요.이 기사는 web.dev에서 발췌했습니다..
3. 더 빠른 서버 응답 시간
서버 응답 시간을 줄이는 것은 PageSpeed Insights에서 가장 일반적인 권장 사항 중 하나입니다.
이 문제를 해결하기 위해 취할 수 있는 몇 가지 단계는 다음과 같습니다.
호스팅 플랜을 업그레이드하세요저렴한 공유 호스팅 플랜을 사용 중이시라면 업그레이드가 필요합니다. 웹사이트는 빠르고 호스팅 서버는 느리다는 것은 불가능합니다.
서버를 최적화하세요서버 성능에는 여러 가지 요소가 영향을 미칠 수 있으며, 특히 트래픽이 급증하는 기간에는 더욱 그렇습니다.Katie Hempenius의 이 튜토리얼서버를 평가, 안정화, 개선 및 모니터링합니다.
타사 플러그인, 도구 및 라이브러리에 대한 사이트 의존도를 줄이세요서버나 브라우저에서 실행해야 하는 코드 양이 증가합니다. 이로 인해 리소스 소비가 증가하고 Time to First Byte, First Contentful Paint, LCP와 같은 지표가 손상됩니다.
캐시 사용을 극대화합니다.캐싱은 뛰어난 웹 성능의 핵심입니다. 로고, 탐색 아이콘, 미디어 파일 등 많은 자산을 몇 달 또는 1년 동안 캐싱할 수 있습니다. 또한, HTML이 정적이면 캐싱하여 TTFB를 크게 줄일 수 있습니다.
CDN을 사용하세요CDN은 방문자와 원하는 콘텐츠 사이의 거리를 줄여줍니다. 작업을 최대한 간편하게 하려면 CDN이 내장된 캐싱 도구를 사용하세요.
서비스 워커 사용서비스 워커는 공통 요소의 중복을 방지하여 HTML 페이로드 크기를 줄입니다. 서비스 워커가 설치되면 서버에 최소한의 데이터를 요청하여 완전한 HTML 문서로 변환합니다.자세한 내용은 Philip Walton의 이 튜토리얼을 확인하세요..
4. 제한적이고 최적화된 클라이언트 측 렌더링
클라이언트 측 렌더링(CSR)은 JavaScript를 사용하여 브라우저에서 직접 페이지를 렌더링하는 것을 말합니다. 이 방식은 데이터 가져오기, 라우팅 등의 작업을 서버에서 클라이언트로 이전합니다. CSR은 처음에는 완벽한 솔루션처럼 보일 수 있지만, JavaScript를 더 많이 추가할수록 유지 관리가 점점 더 어려워집니다.
CSR을 구현한 경우 JavaScript를 최적화할 때 특별히 주의해야 합니다.코드 분할, 압축 및 최소화가 필수입니다.또한 사용HTTP/2 서버 푸시 그리고Link rel=preload는 중요한 리소스를 더 빠르게 제공하는 데 도움이 될 수 있습니다.
마지막으로, CSR을 사전 렌더링과 결합하거나 서버 측 렌더링을 추가하는 방법을 고려해 볼 수 있습니다. 이때 어떤 방식을 사용할지는 사이트의 기술 스택에 따라 달라집니다. 클라이언트 측에 얼마나 많은 작업을 투입하고 있는지, 그리고 이것이 성능에 어떤 영향을 미치는지 이해하는 것이 중요합니다.
이 주제에 대해 더 자세히 알고 싶다면 웹 렌더링에 대한 포괄적인 가이드를 읽어보시기 바랍니다.
5. rel=preload, rel=preconnect 및 rel=dns-prefetch를 사용합니다.
이 세 가지 속성은 브라우저가 먼저 처리해야 할 리소스와 연결을 가리키도록 하여 브라우저에 도움이 됩니다.
먼저, 브라우저가 우선적으로 처리해야 하는 리소스에 rel=preload를 적용하세요. 일반적으로 이러한 리소스에는 페이지 상단에 표시되는 이미지, 비디오, 중요한 CSS, 또는 글꼴이 포함됩니다. 다음과 같이 head 태그에 몇 줄만 추가하면 됩니다.
글꼴을 미리 로드할 때 as="font", type="font/woff2", crossorigin과 같은 속성은 브라우저가 렌더링 시 리소스 우선순위를 지정하는 데 도움이 될 수 있습니다. 또한, 글꼴을 미리 로드하면 FCP(Functional Content Policy)를 준수하는 데 도움이 되어 레이아웃 변경을 줄일 수 있습니다.
Forbes.com은 이 기술을 사용하여 글꼴 로딩 시간을 줄입니다.
다음으로, rel=preconnect는 브라우저에 도메인에 즉시 연결을 설정하겠다는 것을 알려줍니다. 이렇게 하면 중요한 도메인으로의 왕복 시간이 줄어듭니다. 다시 말하지만, 이 기능을 구현하는 것은 매우 간단합니다.
하지만 사전 연결할 때는 매우 주의해야 합니다. 도메인에 사전 연결할 수 있다고 해서 반드시 그래야 하는 것은 아닙니다. 연결해야 하는 도메인에만 사전 연결을 설정하세요.시간이야원치 않는 호스트에 사용하면 다른 모든 DNS 요청이 차단되어 이로운 점보다 해로운 점이 더 많습니다.
마지막으로, 덜 중요한 연결에서 DNS 조회 시간을 절약하려면 rel=dns-prefetch를 사용하세요.
Prefetch는 preconnect의 대안으로 사용될 수도 있습니다.
이러한 모든 기술은 사이트 성능 지표를 개선하는 데 매우 유용합니다. 아직 구현하지 않았다면 어떤 리소스를 미리 로드하고 어떤 호스트에 미리 연결할지 신중하게 선택해야 합니다.
WordPress 사이트의 LCP 메트릭 줄이기
위에 나열된 기술은 WordPress(WP) 기반 사이트를 포함한 모든 사이트의 LCP를 개선하는 데 도움이 될 수 있습니다. 하지만 두 가지 추가 팁을 통해 WP 사이트에서 이 지표를 최적화할 수 있습니다.
가벼운 테마를 선택하세요.너무 복잡한 테마는 로딩 시간을 크게 늘리고 LCP를 포함한 Core Web Vitals에 악영향을 미칠 수 있습니다. 따라서 테마를 신중하게 선택해야 합니다. 자세한 내용은 다음을 참조하세요.Kinsta의 이 연구;
플러그인을 너무 많이 사용하지 마세요.플러그인은 유용한 기능을 제공하지만, 대부분 성능 저하를 초래합니다. 실행해야 하는 코드 양이 늘어나 리소스 소모가 증가합니다. 각 플러그인을 신중하게 검토하고 추가한 후에는 사이트 성능을 모니터링하세요.
이 두 가지 팁은 WP 사이트 작업 시 필수입니다. 위에 나열된 기법들과 함께 사용하면 LCP(웹 디자인 계획)가 크게 향상될 것입니다.
핵심 웹 바이탈 모니터링을 위한 추가 도구 및 모범 사례
LCP 최적화에 문제가 없더라도 잠재적인 문제를 감지하기 위해 정기적으로 현장 데이터를 검토하는 것이 좋습니다.
현장 데이터는 Chrome 사용자 경험 보고서(CrUX)를 통해 수집됩니다. 이 데이터는실제 사용자사이트 성능 현황입니다. PageSpeed Insights의 전체 점수 바로 아래에서 필드 데이터를 확인할 수 있습니다.
Google은 지난 28일 동안 페이지의 핵심 웹 바이탈을 평가하므로 중요한 페이지는 최소한 한 달에 한 번 테스트해야 합니다.
데이터가 누락되어 PageSpeed Insights에 이 섹션이 표시되지 않으면 다른 도구를 사용하여 CrUX 데이터 세트에 액세스할 수 있습니다.
- LCP 최적화 Chrome UX 보고서 API - JavaScript 및 JSON 경험이 필요합니다.
- LCP 최적화 빅쿼리 - Google Cloud 프로젝트 및 SQL 기술이 필요합니다.
- LCP 최적화 Google Search Console의 Core Web Vitals 보고서- 초보자에게 적합하며, 마케터, SEO, 웹마스터에게 유용합니다.
어떤 도구를 선택할지는 사용자의 선호도에 따라 달라집니다. 사이트의 LCP(웹 콘텐츠 관리 시스템)와 다른 핵심 웹 바이탈(CV) 관련 잠재적인 문제에 주의를 기울이는 것이 중요합니다.
마찬가지로, 최소 한 달에 한 번은 Core Web Vitals 보고서를 확인하세요. 예상치 못한 곳에서 문제가 발생하여 오랫동안 감지되지 않는 경우가 있습니다.
LCP를 최대한 최적화하면 예상치 못한 성과를 얻을 수 있습니다. 검색 엔진 순위가 향상되는 것을 확인할 수 있을 것입니다. 이것이 바로 LCP의 역할입니다. LCP 지표를 무시하지 마세요. LCP 최적화는 매우 중요합니다!
